WordPress Theme – Twenty Twenty: Comprehensive Intro

WordPress Theme – Twenty Twenty: Intro to the New 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 functions files, 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 Twenty Twenty
• Installing Twenty Twenty
• Twenty Twenty’s Theme Key Features
• Customizing the Appearance of Twenty Twenty
• How to Create a Child Theme for the Twenty Twenty 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 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 the 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 nor you’ll find it merged in the WordPress 5.3 Core for a while.

Anyway, you can get an in-progress version of Twenty Twenty on GitHub and install it in the current stable version of WordPress as well as in 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. Log into your FASTDOT cPanel control panel.
2. Scroll all the way down to the Applications section and click “WordPress Manager”
3. This will automaticaly install your WordPress site with the TwentyTwenty theme installed

Alternatively, in case you would like to manually install the theme on an older live install you can 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 some 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 header handles the site title, site description, a search button, and a modal menu. You can enable/disable all these elements in the Site Identity and Site Header sections of the Customizer:

On the right, you’ll find a search button and a menu modal box that you can enable/disable in the Site Header section:

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.
• Two drop-down menus to set blend mode and opacity value.

The Menus section has three menu locations: Main Menu, Footer Menu, and Social Menu. By default, the Main Menu is shown in the header in a modal box you can toggle. By disabling the menu modal in the Customizer, the Main Menu is displayed as a regular navigation menu.

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. The image below shows the declarations we used to fine-tune the appearance of the page header with the Cover Template:

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?

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:

• 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_singular() && ! is_page_template( array( 'template-canvas.php' ) ) ) {
?>
	<header id="site-header">
		...
	</header><!-- #site-header -->

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

This code checks whether the current page is a single post/page/custom post type and if the page template is not template-canvas.php. If the page template is 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_singular() && ! is_page_template( array( 'template-canvas.php' ) ) ) {
?>
	<footer id="site-footer" role="contentinfo">
	...
	</footer><!-- #site-footer -->
<?php } ?>
	<?php wp_footer(); ?>

    </body>
</html>

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”.

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!

Related posts:

Strengthening Your Site WordPress Security Best Practices Expanding Content Options with WordPress Custom Post Types Attractive Web Designs Using WordPress: A Portfolio Showcase Why Are .com Domain Names So Popular?