Introducing Twenty Twenty Frontity Theme (v1.0)

Frontity is a free and open source framework for building headless WordPress sites using React. Check out the documentation here.

We are happy to announce that we recently released the 1.0 version of the Twenty Twenty Frontity theme!

The Twenty Twenty default WordPress theme was included in WordPress 5.3 "Kirk" (out on November 12), and ported over to Frontity by the software engineer and designer Segun Adebayo.

According to Segun, the theme development was easy and fast. It took him less than one week to release the beta version of the theme port. Although he knows React, this was the first Frontity theme ever made by him.

The Twenty Twenty theme is based on the Anders Noréns’ free theme Chaplin, and was designed with a special focus on Gutenberg.

Along with the Twenty Nineteen and the Frontity Chakra Theme, the Twenty Twenty theme is a great 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.

You can see the Twenty Twenty Frontity Theme in action here.

Twenty Twenty’s Theme Features

Apart from its amazing performance, this theme comes with some other nice features:

Accessibility Ready

The theme is accessible and screen-reader friendly. We added the proper landmarks, roles and labels. We also paid attention to trap focus within modals, ensure focus indicator is visible for all interactive elements.

Custom Colors

You can give your website or blog a personal touch by changing the background colors, text colors and primary/accent color in the theme settings. You change the color in one place, all visual elements get updated.

Search

The theme comes with a built-in search box to make it easy for your readers to look for specific content. Search box is powered by the robust and performant search engine built into WordPress.

Featured Images

Show beautiful featured images for your blog posts. Frontity uses the featured image uploaded to WordPress and renders it on every blog post. You can also opt out of this in the theme settings.

Content Prefetch

You can prefetch page for any link to provide an almost instant user experience. All you need do is to change your settings to prefetch pages when the user "hovers" on a link, when the link is visible on screen, or prefetch all links on the current page.

Pagination

Frontity's theme has the same pagination as the original WordPress theme so you can have access to different pages in the footer, and navigate easily between pages.

Installation

If you are new to Frontity, we recommend you check out the docs first to learn more about the framework and how it works.

For a new Frontity project

Create a new Frontity project with this command:

npx frontity create

Then you will be asked to (1) enter a name for the project, and (2) pick a starter theme to clone. There you can select @frontity/twentytwenty-theme.

Start a development server with:

npx frontity dev

Lastly, open http://localhost:3000 in your browser (if not already opened) to interact with the Twenty Twenty Frontity Theme in a development environment.

For an existing Frontity project

If you already have a Frontity project but would like to install this theme, the first thing you must know it's the name of the package that you'd like to install. In this case it is @frontity/twentytwenty-theme.

Then, you can follow this guide on how to install a new package and add it to the frontity.settings.js file.

Theme settings

👉 To learn more about the theme settings and how to configure them, please visit the Twenty Twenty Theme documentation.

Resources

Feel free to reach out with any questions you might have about the Twenty Twenty Theme.

To take a look at the code, please refer to the GitHub repo.

Here's some other useful links:

• Live demo
• How to install a new package
• Twenty Twenty Theme documentation
• Best practices for sharing a Frontity project
• Frontity's step-by-step tutorial

Special thanks to Segun Adebayo for porting this theme over to Frontity, and to Uche Jude, Michal Czaplinski, Luis Herranz, and Mario Santos for all their work to release the 1.0 version! 💙

This post was originally published at frontity.org/blog.