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.

Behmaster’s hosting receives hundreds of five-star ratings. Every Day.

Really love the level of experience and support Behmaster’s live chat engineers provide. The 24/7 support is a game-changer for large sites, especially ecommerce.

Find out why

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.

Important

Twenty Twenty is currently under development and many issues haven’t been fixed yet. You shouldn’t use it in production.

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

Easily test WordPress themes before pushing to production with our one-click staging sites. Try Behmaster for Free.

“}” data-sheets-userformat='{“2″:6659,”3”:{“1″:0},”4”:{“1″:2,”2″:16777215},”12″:0,”14”:{“1″:2,”2″:0},”15″:”Roboto, RobotoDraft, Helvetica, Arial, sans-serif”}’>

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.