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 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 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
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
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
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
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
- Frontity Starter Theme by Alexandra Spalato
- Frontity Dimension Theme by Matnard
- Forgotten Developer – A terminal-like theme by Divaksh Jain
- Copacetic Frontity Theme by Taylor White
- Fourothree Theme by 403Page Labs
- AG Tech by Aamodt Group
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.
Frontity Framework is not under active development anymore.
More frontity articles would be awesome!
Woop! I made the list! Thanks Jyolsna!
Will be making more updates to the theme after a long old break – progress will be updated here https://403page.com/403page-is-now-open-source/
Welcome! We will definitely keep an eye out for more Frontity things from you.
I need theme for my education site, please guide.
I’m trying to create site using frontity frame work, but not able to find any education theme which I can use with frontity.
Currently there are no pre-built Frontity packages or themes for creating educational sites. You need to follow the Frontity guides to create packages/themes that support WordPress themes. You can use any education themes for WordPress or you can use popular theme such as Astra with Educational starter templates.
Resources:
https://docs.frontity.org/
https://docs.frontity.org/guides/processing-page-builder-content
https://wpastra.com/starter-templates/?page-builder=elementor&search=Education