11 Frontity Themes To Start Building Your Headless WordPress Website

WordPress is undoubtedly the best-loved CMS of all times. The ease of use and the vast number of plugins and themes serve to increase its popularity. The development of WordPress has always been centred around PHP, but as the use of headless CMS grows, you can now seamlessly build fast websites with React and WordPress using a framework like Frontity. In this article, we will share with you the themes available to use on your Frontity website. But before that, we will look into what Frontity is and the advantages of using it.

What is Frontity?

frontity themes

Frontity is a free and open-source framework that helps you build WordPress applications using React JS. Although React development offers a lot of benefits, you would normally have to follow a complex setup process that includes bundling, server rendering, etc. Fortunately, Frontity eliminates all of these procedures and gets you to the development stage in no time.

Frontity was designed with WordPress firmly in mind. Every part of the Frontity framework has been simplified and optimized specifically for the platform. Once Frontity is set up, your WordPress website will serve its data via the REST API. Frontity will then consume this data, and render it in the web browser as a Single Page Application (SPA).

Advantages of using Frontity

Extremely easy to use: An advantage of using Frontity is the ease with which it can be set up. As it was designed exclusively for WordPress, few configurations are required. Also, API queries are preconfigured according to the needs of WordPress developers. Frontity is a good friend for WordPress developers who are new to React.

Superfast loading: Frontity can also improve your website’s performance, resulting in fast loading times with no extra assets. Frontity sends a navigation ready HTML page generated with React, that is immediately usable. So the initial load feels almost instant.

SEO friendly: With Frontity, your visitors never have to wait while navigating your site. Since page speed is a ranking factor for Google searches, using an optimized solution such as Frontity can also deliver a significant SEO boost.

Extensible: Just like WordPress, Frontity is highly flexible and extensible. Themes and extensions will activate without code changes. Frontity’s themes are also compatible with the React packages that are currently available via the Node Package Manager.

Frontity Themes

During the setup, you will be prompted to select a theme. Now let’s take a look at the available options.

1. Twenty Twenty

Twenty Twenty Frontity Theme

Twenty Twenty is one of the two default themes of Frontity. It was migrated from WordPress and is fully customizable. This theme is based on the Anders Noréns’ free theme Chaplin, and was designed with a special focus on Gutenberg.

The Twenty Twenty theme is an excellent option if you prefer to use a theme as the base for your site instead of starting one from scratch. If you are new to the framework, it will also allow you to get your site up and running easily.

The theme is accessible and screen-reader friendly. You can give your website or blog a personal touch by changing the background colours, text colours and primary/accent colour in the theme settings. The theme comes with a built-in search box to make it easy for your readers to look for specific content.

You can view a demo of the theme at this link.

2. Mars 

Frontity theme mars

Mars is another default theme of Frontity. It can be considered a starter theme or a theme to show people how to use some of Frontity functionalities. 

The theme is located within the packages/mars-theme folder. There you will find another folder called /src which contains an index.js file (where you can define and configure your theme) and a /components folder (where all the pieces that are part of your theme are).

The theme uses Emotion for styling, so you can write CSS styles with JavaScript. If you are familiar with React and JSX, you’ll find it easy to add and modify components.

You can view a demo of the theme at this link

3. AWSM F1 Starter Theme

Screenshot of awsm-theme.vercel.app

Awsm F1 is the first Frontity starter theme that uses all the potential of the Gutenberg-Frontity combination to spinout a solid headless WordPress site in React. This theme enables easy customization, the styling of blocks and extends support for third-party Gutenberg block plugins.

AWSM F1 has everything you need to create a secure, SEO-friendly powerful website without bloat. The theme is not only great for developers who are new to Frontity but also for those who have a specific use-case in mind. Many standard pages are also included in the theme and they are all built out of Gutenberg.

You can view a demo of the theme at this link.

4. Chakra

Screenshot of frontity-chakra.now.sh

This free Frontity theme is powered by the amazing Chakra UI React Component Library is designed and developed by Segun Adebayo. Although it can be adaptable to different websites, the Chakra Theme is best suited for blogs that rely heavily on images to showcase their ideas or products, mostly fashion, tourism, photography, design, etc.

The theme comes with a handful of new, interesting features like using the Chakra’s theming functionality to provide colours to all components. All you need to do is to edit the colours in the frontity.settings.js file and your entire blog visuals will update. It is 100% mobile responsive and adapts to any screen size or resolution.

You can see the Chakra theme demo here.

5. Twenty Nineteen 

Screenshot of twentynineteen.frontity.org

The popular WordPress theme Twenty Nineteen has been ported over to Frontity by Imran Sayed and Smit Patadiya. This ready-made theme allows you to get your site running on Frontity easily. It primarily suits blogs but can be adaptable to a wide range of websites.

You can see the Twenty Nineteen for Frontity theme demo in action here.

Other Available Themes

Besides the 5 themes we have mentioned above, there are other themes too that you can use for your website. Some are 

 We are sure there are plenty more frontity themes underway and we promise to share them with you in future. Please do subscribe to our newsletter to make sure you don’t miss any of the updates. 

One Comment

Leave your comment

Your email address will not be published. Required fields are marked *

Subscribe for new free updates!

Exclusive updates and quality content only. Unsubscribe any time.

Holler Box