Twenty Twenty: An Introduction to the New Default WordPress Theme

Twenty Twenty is the new default WordPress theme coming with the latest release of WordPress 5.3. Like its predecessor Twenty Nineteen, Twenty Twenty has been designed with a special focus on Gutenberg. There’s a big difference between the two, though: Twenty Twenty isn’t built from the ground up; it’s designed upon an existing theme from the WordPress community instead.

Since we love everything about WordPress, we took a closer look at the new Twenty Twenty theme, peeking into the function.php file, the stylesheet, and the templates.

Even if Twenty Twenty is far from being somewhat stable — at the time of this writing — with many issues still unfixed, today we’ll share with you our very first thoughts about the new default WordPress theme.

Let’s dive into Twenty Twenty WordPress theme!

Quick Intro to the Twenty Twenty Theme

Twenty Twenty has been built upon Chaplin, a free WordPress theme by Anders Norén who is also Default Theme Design Lead of WordPress 5.3.

Chaplin is available for download in the WordPress.org repository and, according to Anders, it has been built with the Block Editor in mind:

Chaplin is a feature-packed WordPress theme that gives you full control over the HTML fonts and colors on your site. It is built from the ground-up with the new Block Editor in mind and makes it easy to create good looking layouts on both posts and pages.

The same philosophy sits behind Twenty Twenty: flexibility, clarity, and readability are the focus keywords for the new theme.

Twenty Twenty comes with a single column layout and three post/page templates, aiming to give WordPress admins and designers the freedom to create their custom layouts directly in the Block Editor by taking advantage of wide and full-with alignments for block elements like columns, images, and the group block introduced with Gutenberg 5.5.

As Anders explains:

Twenty Twenty is designed with flexibility at its core. If you want to use it for an organization or a business, you can combine columns, groups, and media with wide and full alignments to create dynamic layouts to show off your services or products. If you want to use it for a traditional blog, the centered content column makes it perfect for that as well.

Besides of that, Twenty Twenty comes with a new typeface: Inter. It’s a free and open source font family designed by Rasmus Andersson specifically for readability of mixed-case and lower-case text, especially with small font sizes.

Inter gives a stronger personality to big headers, but you’ll get the most from it when using it with alternated text sizes, as shown in the theme preview from the WordPress.org blog post:

More than a fully-featured theme, Twenty Twenty is a theme marking an important new step toward the future evolution of WordPress’ editing UI. Twenty Twenty essentially relies on the Block Editor for editing and laying out the content, and on the Theme Customizer for header, footer, and additional customizations.

With that being said, it’s time for us to install this WordPress theme and run it.

How to Install Twenty Twenty

The upcoming default theme will follow the WordPress 5.3 release plan. This means, at the time of this writing, Twenty Twenty is still not available for download in the WordPress Theme Directory.

Anyway, you can download an in-progress version of Twenty Twenty on GitHub and install it in the current stable version of WordPress or get it with WordPress 5.3. The Github repository will be deprecated once the theme is merged into core. In the meanwhile, you may want to save the following dates from the WordPress 5.3 release schedule:

• 23 September 2019: Beta 1
• 30 September 2019: Beta 2
• 7 October 2019: Beta 3
• 15 October 2019: Release candidate 1
• 22 October 2019: Release candidate 2
• 29 October 2019: Release candidate 3
• 5 November 2019: Release candidate 4 (if needed)
• 12 November 2019: Target date for the release of WordPress 5.3.

To get started with Twenty Twenty, follow the steps below:

1. Get the zip package from GitHub.
2. Upload the zip file to your development installation in 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.

And that’s it! You can now start running your tests either on your staging website or on your local environment.

Now that you are ready to go, let’s move on and dive in the Twenty Twenty WordPress theme.

Twenty Twenty’s Theme Features

Twenty Twenty is not a fully-featured WordPress theme, but a strimmed-down and minimal theme aiming to give developers and site admins the freedom to build custom content layouts for their posts and pages. Like Twenty Nineteen, Twenty Twenty has been build for Gutenberg and mostly depends on Gutenberg’s life cycle (more on this topic in this video of Matt Mullenweg at WCEU 2019).

The theme supports a number of theme features like content width (580), automatic feed links, post thumbnails, title tag, and several HTML5 elements (search form, comment form, comment-list, gallery, and caption).

Other features add options to the Theme Customizer. These include custom backgrounds and custom logo. The code snippets below show these features enabled in the theme’s functions file:

// Custom background color
add_theme_support(
	'custom-background',
	array(
		'default-color'	=> 'F5EFE0'
	)
);

// Custom logo
add_theme_support(
	'custom-logo',
	array(
		'height'      => 240,
		'width'       => 320,
		'flex-height' => true,
		'flex-width'  => true,
		'header-text' => array( 'site-title', 'site-description' ),
	)
);

Twenty Twenty also supports some of Gutenberg’s specific features. First, the theme supports wide and full-width alignments:

// Add support for full and wide align images.
add_theme_support( 'align-wide' );

The editor color palette is enabled if the user set an accent color in the Customizer (enabled by default):

// If we have accent colors, add them to the block editor palette
if ( $editor_color_palette ) {
	add_theme_support( 'editor-color-palette', $editor_color_palette );
}

The Twenty Twenty theme comes with four editor font sizes available in the Block Editor:

// Gutenberg Font Sizes
add_theme_support( 'editor-font-sizes', array(
	array(
		'name' 		=> _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 16,
		'slug' 		=> 'small',
	),
	array(
		'name' 		=> _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 18,
		'slug' 		=> 'regular',
	),
	array(
		'name' 		=> _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 24,
		'slug' 		=> 'large',
	),
	array(
		'name' 		=> _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 32,
		'slug' 		=> 'larger',
	),
) );

And that’s it. The theme is quite minimal also in functionality,but it’s easily extendable with a child theme, and we’ll dive into that in a minute.

How to Customize the Appearance of Twenty Twenty

Twenty Twenty comes free from any bells and whistles but provides great flexibility when used in tandem with Gutenberg (or with a good page builder).

Customizing the Twenty Twenty Theme

The Site Identity handles site title and tagline, logo, and icon. You can enable/disable all these elements in the Site Identity section of the Customizer:

The Customizer’s Cover Template section handles the customization settings for the Cover Template page template. There, you’ll find:

• An option to enable a parallax effect on the background image (Fixed Background Image).
• Color pickers to set your custom background color and text color for the featured image overlay.
• A slider to control overlay opacity.

The Menus section provides five menu locations. You can include a regular horizontal menu in the header (Desktop Horizontal Menu) and/or a toggable navigation menu (Desktop Expanded Menu). The Mobile Menu is a specific menu for mobile devices, and Footer Menu and Social Menu are located in the page footer.

The footer handles the Footer Menu and Social Menu locations along with two widget areas. The following image shows the theme’s footer with all its elements in place:

Finally, the Additional CSS section allows you to include your custom styles.

Single Post/Page Templates

When it comes to post and page layouts, you can choose from three different templates. Besides the default template, Twenty Twenty provides a Cover template and a Full Width template you can play with to customize the look and feel of your content.

The Block Editor in Twenty Twenty

Due to its minimal approach, Twenty Twenty’s appearance mostly relies on the Block Editor. We run our tests on Twenty Twenty with Gutenberg version 6.4.0. This version provides a good number of new features, enhancements, and bug fixes that significantly improved the editing experience.

Some blocks come in handy, especially when building single-page websites. Blocks like Media & Text and Cover have been improved and now look great when it comes to presenting products and/or professional portfolios:

Still, as Gutenberg is a work in progress project, you may want to take a look at some of the most popular plugins allowing to add more blocks to the editor.

Here is a quick list of plugins that may be worth a try:

• Gutenberg Blocks
• CoBlocks
• Stackable
• Atomic Blocks.
• Advanced Gutenberg

Theme Customizer and Block Editor do a great job when it comes to appearance and lay-out customization, but a child theme could give you greater control over the look and feel of your pages.

How to Create a Child Theme for the Twenty Twenty Theme

Building child themes for WordPress could be fun and also a good way to start a career as a WordPress theme developer and Twenty Twenty could be a great parent theme when building child themes in WordPress. So, why don’t you give it a try? 😉

If you don’t know where to start with child themes, make sure to check out our extended guide on How to Create a Child Theme in WordPress.

Now, let’s build our first child theme for Twenty Twenty!

Create a new directory under wp-content/themes and name it something like twentytwenty-child or whatever you like.

Browse to wp-content/themes/twentytwenty-child and create a new style.css file with the following heading:

/*
Theme Name: My Twenty Twenty Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty.
Author: Your Name
Author URI: https://example.com/
Template: twentytwenty
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

Next, we have to include the parent theme’s stylesheet. In the same directory, create the following functions.php file:

<?php
/* enqueue scripts and style from parent theme */        
function twentytwenty_styles() {
	wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentytwenty_styles');

Now go to Appearance → Themes and activate your Child Theme. You can now start with your customizations.

You can change almost anything in Twenty Twenty, from adding custom templates to adding your custom styles or changing the theme’s default styles.

Here I will show you how to create a new custom template for single posts and pages.

Adding a Custom Post/Page Template in Twenty Twenty

So far, we have created a child theme for Twenty Twenty and attached the parent styles to the child theme’s stylesheet. In the example below, we’ll get rid of the header and the footer, making room for the page’s body in a post/page template file.

Step 1

Copy and paste the following files from the parent theme to the child theme’s directory:

• templates/template-full-width.php
• header.php
• footer.php

Step 2

Rename template-full-width.php to template-canvas.php (or whatever you like). Open the file, delete the current content, and paste the following:

<?php
/*
Template Name: Canvas Template
Template Post Type: post, page
*/
get_template_part( 'singular' );

Template Name sets the name of the template file as you’ll see it in the Block Editor, while Template Post Type defines the post types supporting this template file. The get_template_part function loads the singular.php file from the parent theme (we don’t need a copy of this file in our child theme).

Go to the WordPress dashboard and create a new post. Now you should find an additional page template in the Post attributes section.

Step 3

And now comes the fun part. Open header.php in your favorite text editor and wrap the header element inside the following if statement:

<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
	<header id="site-header" class="header-footer-group" role="banner">
		...
	</header><!-- #site-header -->

	<?php 
	// Output the menu modal
	get_template_part( 'template-parts/modal-menu' );
}

This code checks whether the page template is not templates/template-canvas.php. If the page template is templates/template-canvas.php, then it won’t include the site header and the modal menu.

Similarly, we can remove the footer from a post page when the active page template is our canvas. Just add the same condition in footer.php as shown below:

<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
	<footer id="site-footer" role="contentinfo" class="header-footer-group">
	...
	</footer><!-- #site-footer -->
<?php } ?>
	<?php wp_footer(); ?>

    </body>
</html>

You can download the code of this example here.
Now create a new post or page, select the Canvas template in Post/Page attributes and check the page on the front site.

Summary

Twenty Twenty is a minimalist WordPress theme, with a single column layout. The way we’ll use it mostly depend on the evolution of the Block Editor. As Anders expressively says:

“The promise of the Block Editor is to give users the freedom to design and structure their sites as they see fit”.

Following Twenty Nineteen, the new Twenty Twenty default theme is the second in a new generation of themes aiming to “allow the construction of websites without manual code editing”. WordPress sites powered by the Twenty Twenty theme come in all shapes and sizes. To find out if a theme is using Twenty Twenty, check out our handy WordPress theme detector tool.

If you think that Gutenberg is still not completely reliable for your projects yet, you could add the blocks you’ll need with plugins like the ones listed above. Or, simply, you can embrace a third-party page builder.

Up to you now: install the new default WordPress theme, play around with it, and let us know what your thoughts are here in the comments!

Carlo Daniele Kinsta

Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.

• Website
• Twitter