WordPress’ Twenty Twenty Theme

Matt Mullenweg: Matt on WordPress

https://wordpress.tv/2019/07/04/matt-mullenweg-matt-on-wordpress/

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 page

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

Twenty Twenty’s Theme Features

Twenty Twenty is not a fully-featured WordPress theme, but a trimmed-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:

php
// 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' ),
)
);

The Theme Customizer in Twenty Twenty

The Theme Customizer in Twenty Twenty

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

php
// 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):

php
// 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 );
}

Customizing colors in Twenty Twenty

Customizing colors in Twenty Twenty

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

php
// 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',
),
) );

Font sizes in the editor's block Text settings

Font sizes in the editor’s block Text settings

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:

Site Identity in Customizer's settings

Site Identity in Customizer’s settings

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 Cover Template section in the Customizer

The Cover Template section in the Customizer

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.

Menu locations in Twenty Twenty

Menu locations in Twenty Twenty

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:

img

Template footer in Twenty Twenty

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.

Single Post/Page templates in Twenty Twenty

Single Post/Page templates in Twenty Twenty

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.

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

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:

media and text

Media & Text block (full-with alignment)

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:

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.

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:

css
/*
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
<?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.

Activate the child theme

Activate the child theme

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

A new template is available in Post Attributes

A new template is available in Post Attributes

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
<?php
if ( ! is_page_template( array( ‘templates/template-canvas.php’ ) ) ) {
?>

<?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
<?php
if ( ! is_page_template( array( ‘templates/template-canvas.php’ ) ) ) {
?>



<?php } ?>
<?php wp_footer(); ?>

</body>

“`