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
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
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
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
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 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
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:
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
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 & 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
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
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>
“`
- 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.