Twenty Twenty-One is the new WordPress default theme coming with WordPress 5.6. If you are waiting for a fully featured WordPress theme you may be a little disappointed.

Twenty Twenty-One is a minimalist theme that looks and acts as a highly customizable blank canvas. Like its predecessors, the new default theme will mostly rely on the Block Editor for page building.

In this post, we’ll go through the most interesting features of the Twenty Twenty-One theme and we’ll show you how to customize the look and feel of a WordPress website with a simple Twenty Twenty-One child theme.

Ready? Let’s dive in!

Twenty Twenty-One

Twenty Twenty-One theme preview (Image source: Make WordPress Core)

A First Look at Twenty Twenty-One WordPress Theme

Like Twenty Twenty, the new default theme coming with WordPress 5.6 isn’t built from scratch, but it’s based on a theme coming from the community.

Twenty Twenty-One has been developed upon a new Automattic’s theme, the Seedlet theme, which provides a clean and well-ordered structure of nested CSS custom properties. Due to the large usage of CSS properties in the theme’s stylesheet, building child themes upon Twenty Twenty-One is quick and easy.

Seedlet WordPress theme

Seedlet WordPress theme

Twenty Twenty-One is a highly accessible, minimalist WordPress theme with a single column layout, a footer sidebar, and two menu locations: Primary navigation and Footer navigation.

The new theme uses a system font stack. This should have several benefits for both users and developers:

The Twenty Twenty-One theme uses a minimal color palette based on pastel green background colors and two shades of grey as foreground colors. The theme provides several additional pastel color palettes.

On this point, Mel Choyse-Dwan, Default Theme Design Lead, explains:

We’ll be bundling the theme with some additional color palettes, including both a white and a black color scheme. Why pastel green? Pastels and muted colors are pretty in right now

Twenty Twenty-One colors

Twenty Twenty-One colors (Image source: Make WordPress Core)

Twenty Twenty-One is the new WordPress default theme coming with WordPress 5.6! 👁‍🗨 Learn all its key features in this in-depth guide!Click to Tweet

How To Install Twenty Twenty-One

At the time of this writing, Twenty Twenty-One is under active development and is not yet available for download in the WordPress Theme Directory. But you can grab an in-progress version of the theme on Github.

The Github repository will be deprecated once the theme is merged into core, and you’ll find it in the Theme Directory. As Twenty Twenty-One follows the WordPress 5.6 release schedule, you may want to save the following dates:

To get the Twenty Twenty-One theme up and running, follow these steps:

  1. Get the zip package from GitHub.
  2. Upload your package to your development installation from the WordPress dashboard or via SFTP.
  3. Browse to Appearance → Themes and click on the Activate button on the theme’s preview image.
  4. Go to Appearance → Customize to configure Twenty Twenty-One.

You can now start running your tests either on a staging website or on your local environment.

dark mode issue

Twenty Twenty-One Issue #620 on Github

Not ready to run your tests?

No worries, we have dissected the theme and we’ll show you what you could expect from Twenty Twenty-One.

Twenty Twenty-One’s Theme and Block Features

Just like Twenty Twenty, the new default WordPress theme is not a fully-featured theme, but a minimalist theme that relies on the block editor for page building. The theme also aims at providing great accessibility. In the words of Mel Choyce-Dwan:

Lastly, we’d love to make the theme meet relevant guidelines from WCAG 2.1 level AAA. We loved the idea when brought it up, and would appreciate any and all guidance from our community a11y experts to help make this possible.

The theme supports a good number of theme and block features including the following:

Theme features:

Block Features:

The following list includes the features that may be more relevant when building a website based on Twenty Twenty-One.

Navigation Menus

Twenty Twenty-One supports two menu locations, the Primary Navigation, located in the header’s top right corner, and the Footer Navigation.

Twenty Twenty-One menu locations

Twenty Twenty-One menu locations

If added to the Footer menu, social links are automatically detected and converted to SVG icons for the supported social media.

Social icons

Twenty Twenty-One social menu

Post Formats

Twenty Twenty-One supports nine post formats: link, aside, gallery, image, quote, status, video, audio, chat. You can pick your post format in the Status & Visibility panel of the editor’s settings.

post formats

Twenty Twenty-One supports nine post formats

To have a look at how the Twenty Twenty-One theme handles post formats, navigate to the template-parts/excerpt folder and pick template. For example, open the excerpt-image.php file in your favorite code editor. In that file you’ll see the following code:

 * Show the appropriate content for the Image post format.
 * @link
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since 1.0.0

// If there is no featured-image, print the first image block found.
if (
	! twenty_twenty_one_can_show_post_thumbnail() &&
	has_block( 'core/image', get_the_content() )
) {

	twenty_twenty_one_print_first_instance_of_block( 'core/image', get_the_content() );


The code is self-explanatory, but let’s take a closer look:

So, if a site viewer requires an archive of posts of the ‘image’ format, WordPress will display an image at the top for each post in the archive. Following the same logic, you can dive into any post format by checking the corresponding template parts.

Site Identity and Custom Logo

Twenty Twenty-One provides support for a 300×100 px custom logo. You can find Custom Logo settings in the Site Identity panel.

Site Identity in Twenty Twenty-One

Site Identity in Twenty Twenty-One

This screen includes:

Editor Font Sizes

Twenty Twenty-One supports the following font sizes:

In the theme’s stylesheet, sizes are set in rem units.

Twenty Twenty-One font sizes

Twenty Twenty-One supports seven font sizes

Color Settings

The Theme Customizer provides a Colors & Dark Mode panel including two options:

The image below shows a light yellow background color with a dark gray text.

Colors & Dark Mode

Colors & Dark Mode settings in Twenty Twenty-One

Background color defaults to a pastel green ('#d1e4dd'), but site admins can easily switch between the following background color alternatives:

The same colors are available as block color palettes in the editor’s block settings.

Additionally, Twenty Twenty-One supports several gradient presets for blocks supporting this feature. The image below shows the default gradients in the Columns block settings.

color gradients

Eight gradient presets in a block’s Color settings

From an accessibility point of view, Dark Mode support is an absolute novelty for a default theme.

Let’s dive a little deeper!

Dark Mode Support in Twenty Twenty-One Theme

Following a discussion on the #core-themes Slack channel, Mel Choyce-Dwan introduced Dark Mode support for Twenty Twenty-One.

Enabling dark mode in MacOS

Enabling dark mode in macOS

At first, it was not clear how this feature could have been implemented in Twenty Twenty-One if added as a theme feature or as a separate project shipping in a plugin.

There were five possible options to choose from:

After a thoughtful discussion, Dark Mode was added to the theme. Now:

Dark mode enabled in the Customizer and disabled on the front site

Dark mode enabled in the Customizer and disabled on the front site

Even if Dark Mode is considered an accessibility improvement, it’s not obvious that your site pages would be more accessible in every context.

The biggest concerns relate to dark logos and transparent images. Switching from a default light template to a dark background color could lead to readability issues that may decrease usability and ruin the appearance of your website.

For example, a dark logo on a light background may disappear entirely if your readers enable Dark Mode on their side. Similar concerns relate to image brightness and contrast and opacity of borders, dividers, and separators.

For this reason, if you are planning to provide Dark Mode support for your website, you should also take into account how your website will look with a dark background.

Dark mode enabled in the Customizer and enabled on the front site

Dark mode enabled in the Customizer and enabled on the front site

Theme contributors are aware of these issues and the discussion continues on Github. For a closer view of Dark Mode usability issues and an opportunity to get involved in the discussion, check the full list of issues on Github.

Dark Mode preferences are stored in the LocalStorage and can be viewed in the browser’s developers tools.

In Google Chrome, launch Chrome WebTools and click on the Application tab. Find the Storage section and expand the Local Storage menu.

Dark Mode user preferences in Brave Browser local storage

Dark Mode user preferences in Brave Browser local storage

To be honest, Dark Mode is not a common thing in the context of websites today. However, as a new WordPress default theme now supports dark mode we could expect a change in this specific area of accessibility since WordPress is the most used CMS software.

Developers who want to dive deeper into the techy stuff shouldn’t miss this in-depth guide on dark mode on the web.

Styles and CSS Custom Properties

That being said, it’s time now to explore the most interesting features of Twenty Twenty-One for theme developers.

Let’s start with CSS Custom Properties.

As mentioned above, Twenty Twenty-One is based on Seedlet, a two-column theme, with a footer sidebar and three menu locations. The styling of Seedlet is completely based on CSS custom properties and this makes it easier for theme developers and advanced users to build child themes upon Automattic’s theme.

The same is for Twenty Twenty-One. The new default theme comes with a single column layout, a footer sidebar, and two menu locations. The stylesheet mirrors the system of nested custom properties provided by Seedlet and this makes Twenty Twenty-One a perfect canvas to build child themes and highly customized websites.

CSS custom properties (also known as CSS variables) are special entities containing specific values that can be reused everywhere in your stylesheet.

So, if you need to change a specific color accent in your document, you don’t need to run a global search to find out any occurrence of that color throughout the stylesheet. You just need to set a different property value within the :root block.

CSS custom properties in Twenty Twenty-One

CSS custom properties in Twenty Twenty-One

As an example of simple customization, say you want to set a custom background color. You don’t need to build a child theme for that. You just need to include two CSS declarations into the code editor of the Additional CSS panel:

:root {
	--global--color-beige: #e6d7c1;

body {
	background-color: var(--global--color-beige);
Additional CSS

Custom CSS in Twenty Twenty-One Customizer

CSS custom properties are safe to use as they are supported by all major browsers, as shown in the image below from Can I Use:

CSS custom properties are supported by the majority of modern web browsers

CSS custom properties are supported by the majority of modern web browsers

If you want to dive deeper into CSS custom properties, check out the MDN documentation.

Twenty Twenty-One Block Patterns

Twenty Twenty-One provides several patterns for the Block Editor. In a previous blog post, we defined block patterns as predefined block layouts allowing users to quickly add complex structures of nested blocks to their pages.

WordPress 5.5 introduced a handful of block patterns and more should come with WordPress 5.6. Moreover, Twenty Twenty-One comes with its own set of block patterns.

In Twenty Twenty-One, block patterns are defined in inc/block-patterns.php file. Twenty Twenty-One patterns vary from simple patterns like the Large Text pattern, which contains a single H2 element, to more complex patterns, such as Overlapping Images and Text and Media and Text Article Title.

Media and Text Article Title block pattern in Twenty Twenty-One

Media and Text Article Title block pattern in Twenty Twenty-One

Currently, the theme provides the following patterns:

Overlapping Images block pattern in Twenty Twenty-One

Overlapping Images block pattern in Twenty Twenty-One

The availability of so many block patterns is great for both users and developers. Users will be allowed to quickly and easily add complex blocks of code to their posts and pages, developers can use those patterns as useful templates to build upon when coding their own.

The Twenty Twenty-One Blocks Experiment

Twenty Twenty-One Blocks is a separate block-based experimental version of the Twenty Twenty-One theme. Its purpose is to share and keep everyone updated on what’s happening on the Full Site Editing experiment, giving everyone a chance to dive into the new FSE features before they become part of WordPress Core.

It’s unlikely that we’ll see this experimental version merged into core with WordPress 5.6. According to Carolina Nymark,

The theme will need Gutenberg and the Full Site Editing experiment to be enabled. It will not be part of Core, but once complete it will be available in the theme directory.

At the time of this writing, Twenty Twenty-One Blocks requires the Gutenberg plugin. Once installed and activated both the theme and the plugin, a Site Editor menu item appears in your WordPress admin menu (you don’t need to activate the Full Site Editing experiment anymore).

The Site Editor menu item

The Site Editor menu item in Twenty Twenty-One Blocks experiment

Now, click on the new Site Editor menu item to open the full-site editing interface and start editing any element on the page using the block editor.

Full Site Editing in Twenty Twenty-One Blocks

Full Site Editing in Twenty Twenty-One Blocks

Here we won’t dive into the technical stuff. Suffice to say that classic themes and block-based themes are structurally different.

The image below shows the content of the Twenty Twenty-One Blocks folder:

Twenty Twenty-One Blocks folder

Twenty Twenty-One Blocks folder

You’d notice the experimental-theme.json file and the block-templates and block-template-parts folders.

The main difference between traditional WordPress themes and block-based themes is that block-based themes include templates that are entirely composed of blocks.

For example, open block-template-parts/header.html in your code editor. You should see the following code:

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title /-->

<!-- wp:site-tagline /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- wp:navigation-link {"label":"Home","url":"#"} /-->

<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->

<!-- wp:navigation-link {"label":"Work","url":"#"} /-->

<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

As you can see, the classic header.php template file has been replaced by an .html file containing several blocks.

You can grab the in-progress version of the Twenty Twenty-One Blocks theme from the theme-experiments project on Github.

If you’re a theme developer, the official documentation provides all you need to know about block-based themes.

If you’d love to contribute to the Full Site Editing Experiment, submit your feedback here.

How To Build a Child Theme on Twenty Twenty-One

Default WordPress themes are great starting points to learn the basics of theme development and get you started with building custom child themes.

Default themes follow the guidelines of the official WordPress Coding Standards and are compliant with web standards.

Is there any better place to learn to code?

Need blazing-fast, secure, and developer-friendly hosting for your client sites? Kinsta is built with WordPress developers in mind and provides plenty of tools and a powerful dashboard. Check out our plans

Child themes are a great WordPress feature that allows you to customize the layout, functionalities, and structure of your pages. With the following examples, we’ll dive into each aspect of theme customization.

Setting up Your Child Theme

Building a WordPress child theme is a 3-step process:

1. Create the Child Theme Folder

Create a new folder in wp-content/themes and name it as you want. But remember that it should be a unique name. The Child Themes handbook recommends using the same name as the parent theme, with -child appended to the end.

So we could name the new folder twentytwentyone-child.

2. Create a style.css File

Now move to your child theme directory and create a new style.css file including the following code:

Theme Name: My Twenty Twenty One Child Theme
Theme URI:
Description: A child theme for Twenty Twenty One.
Author: Your Name
Author URI:
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI:

The information header allows WordPress to properly handle your child theme.

Below that text, you can add your CSS blocks of declarations, as I’ll show you in a moment.

3. Create a functions.php File

With Twenty Twenty-One, you’ll also need a functions.php file. So, create your own in the child theme’s directory, open it in your code editor, and add the following code:

/* enqueue scripts and style from parent theme */
function twentytwentyone_styles() {
	wp_enqueue_style( 'child-style', get_stylesheet_uri(),
	array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') );
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

As the Twenty Twenty-One theme uses get_template_directory() to load its stylesheet, you need to enqueue the child theme’s stylesheet using the wp_enqueue_scripts action.

After that, save your files, open your WordPress dashboard, browse to Appearance -> Themes, and activate your Twenty Twenty-One’s child theme.

Let’s now add our customizations.

How To Add Custom Styles

When it comes to customizing the layout of your WordPress website, you have several options to add your custom CSS code. The Customizer’s Additional CSS panel could be enough for small changes.

But a child theme would be a better option if you have to make advanced customizations, or you need to export your code to different WordPress websites.

Let’s give it a try with simple customization: changing the default font stack.

Say you want to load a different font stack, or simply add your favorite font to the default Twenty Twenty-One font families.

How do you do it?

Here I will show you how to change the default font for H1 headings, but you can change the font family for any text element of your website.

First, open Thenty Twenty-One’s style.css file and find the following block of CSS:

.h6 {
	clear: both;
	font-family: var(--heading--font-family);
	font-weight: var(--heading--font-weight);

As you can see, the font family for headings is set in the --heading--font-family variable.

Now go to the :root{} block and find the following declaration:

--heading--font-family: var(--global--font-primary);

--heading--font-family depends on the --global--font-primary variable, which is defined at the very top of the :root{} block:

	/* Font Family */
	--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);

Now we know what to change!

Copy the --global--font-primary declaration from the parent’s stylesheet and paste it to your child’s style.css. Then, change the property name and value as shown below:

	/* Font Family */
	--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif);

	--global--font-family-child: var(--global--font-primary-child);

Once you’ve declared your custom font stack, you can use it wherever you want in your stylesheet. H1 headings in our example:

.h1 {
	font-family: var(--global--font-family-child);

Save your child’s style.css and reload the page. You should see Ubuntu as the new default font family for your page’s headings.

Custom font family in Twenty Twenty-One

Default font family vs. custom font family in Twenty Twenty-One

Now that you know how to customize Twenty Twenty-One’s style with a child theme, we can explore more advanced features.

How to Add New Block Patterns

In this example, we’ll build a custom block pattern including a two-column block with a rounded image on the left, an H4 heading, and a paragraph on the right.

You can build your pattern directly in the Block Editor or customizing the code of an existing block pattern.

If you choose to build your pattern in the Block Editor, you simply need to add necessary blocks to a post or page draft, then switch to the Code Editor and copy the corresponding code.

A two-column block in the Code Editor

A two-column block in the Code Editor

We can now register our pattern in the child theme’s functions.php file:

add_action( 'init', function(){

		array( 'label' => esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );

		'title'			=> __( 'Author Bio', 'twentytwentyone-child' ),
		'description'	=> _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),
		'content'		=> '<!-- wp:columns {"verticalAlignment":null} --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:image {"id":29,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --> <figure class="wp-block-image size-large is-style-rounded"><img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" /></figure> <!-- /wp:image --></div> <!-- /wp:column --> <!-- wp:column {"width":"66.66%"} --> <div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"level":4} --> <h4>About Kinsta</h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best WordPress hosting platform in the world, and that’s our promise. We don’t settle and are here to stay.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --></div> <!-- /wp:columns -->',
		'categories'	=> array( 'custom-patterns' ),

The code above registers the Custom patterns category and the Author Bio pattern.

Note the code we used to build the img element:

<img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" />

The get_stylesheet_directory_uri() function provides the URI of the child theme’s directory (the image was previously added to the child theme’s assets folder).

Save your changes and create a new post or page.

Now you should find the new pattern in the block inserter.

A custom block pattern

A custom block pattern added to Twenty Twenty-One

Customizing a Template File

If you want to create a new template file for a specific archive, or single post/page, you’ll need to create a new .php template according to the WordPress Template Hierarchy.

But if you only want to edit an existing template (or template part), you just need to copy the original template from the parent theme and paste it into the corresponding position of your child theme (read more about this topic in our extended guide to child themes).

Say you want to customize the “Proudly powered by WordPress” text. You have several options to remove or customize that line. For our example, let’s change it manually.

To do so, copy the footer.php template file from the parent’s folder and paste it into the root of your child theme. When done, open your child theme’s footer.php in your code editor and find the following code:

<div class="powered-by">
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( '', 'twentytwentyone' ) . '">WordPress</a>'
</div><!-- .powered-by -->

Now, you can make your changes. Let’s say you want to give credits to your web host, just replace the a element as shown below:

<div class="powered-by">
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="">Kinsta</a>'
</div><!-- .powered-by -->

To remove that text, just comment out or delete the div.powered-by element:

<!-- <div class="powered-by">
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( '', 'twentytwentyone' ) . '">WordPress</a>'
</div> -->

And that’s it. Now, moving from the simple examples above, you can make more exciting customizations and bring your website powered with the Twenty Twenty-One theme to the next level.

Check out what's new in WordPress theming, from Dark Mode to block-based themes, in this thorough overview of Twenty Twenty-One 🌅Click to Tweet


The Twenty Twenty-One theme is the third attempt to allowing people without advanced technical skills to build websites. It’s a minimalist, well-performing, and accessible WordPress theme that also fits a wide range of use cases. WordPress sites powered by the Twenty Twenty-One theme come in all shapes and sizes. To find out if a theme is using Twenty Twenty-One, check out our handy WordPress theme detector tool.

Designed with the block editor in mind, the new default theme is easy to customize for both users and developers.

Your turn now: Did you install the Twenty Twenty-One theme yet? What’s your experience with it? Share your thoughts in the comments section!

Save time, costs and maximize site performance with:

  • Instant help from WordPress hosting experts, 24/7.
  • Cloudflare Enterprise integration.
  • Global audience reach with 28 data centers worldwide.
  • Optimization with our built-in Application Performance Monitoring.

All of that and much more, in one plan with no long-term contracts, assisted migrations, and a 30-day-money-back-guarantee. Check out our plans or talk to sales to find the plan that’s right for you.