Twenty Twenty-Four: The New Minimal Multipurpose Default WordPress Theme

Twenty Twenty-Four is the brand new default WordPress theme that will be shipped with the next WordPress 6.4 release.

The idea behind Twenty Twenty-Four is that of a default theme suitable for any kind of site, whatever the topic of the site. The theme is tailored for three use cases: small business owners, photographers and artists, and writers and bloggers.

More than a theme, Twenty Twenty-Four is a collection of templates and patterns that, combined together, enable you to build a wide variety of websites. As such, you can consider Twenty Twenty-Four a multipurpose theme, although it is an absolutely minimal theme.

As you may expect, Twenty Twenty-Four is a block theme fully compatible with all the awesome stuff coming with WordPress 6.4, including the details block and vertical text.

After this quick intro of the new WordPress default theme, in this article, we will explore the many templates, patterns, and styles to show you how to build an attractive, responsive, usable, and accessible website with Twenty Twenty-Four.

Now, launch the Site Editor, digit Cmd + k, and enter Templates.

The Twenty Twenty-Four WordPress Theme

Twenty Twenty-Four gives us a perfect example of a WordPress block theme. When you access the theme folder in your WordPress installation, you will find an extremely simple functions.php file, whose sole purpose is to enqueue a handful of stylesheets for specific blocks.

The Twenty Twenty-Four functions file is a good example of how to optimize a theme making sure that specific resources are embedded only when they are needed. The following code enqueues the button-outline.css stylesheet only when a button is on the page:

if ( ! function_exists( 'twentytwentyfour_block_styles' ) ) :
	/**
	 * Register custom block styles
	 *
	 * @return void
	 * @since Twenty Twenty-Four 1.0
	 *
	 */
	function twentytwentyfour_block_styles() {
		/**
		 * The wp_enqueue_block_style() function allows us to enqueue a stylesheet
		 * for a specific block. These will only get loaded when the block is rendered
		 * (both in the editor and on the front end), improving performance
		 * and reducing the amount of data requested by visitors.
		 *
		 * See https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/ for more info.
		 */
		wp_enqueue_block_style(
			'core/button',
			array(
				'handle' => 'twentytwentyfour-button-style-outline',
				'src'    => get_template_directory_uri() . '/assets/css/button-outline.css',
				'ver'    => wp_get_theme()->get( 'Version' ),
			)
		);
	}
	...
endif;

The theme does not provide any functionality to your WordPress website, and you will completely rely on plugins to add behavior to your pages. So Twenty Twenty-Four’s functions.php file only takes care of enqueuing specific style sheets for specific blocks.

Continuing with our exploration of the Twenty Twenty-Four theme folder, you will notice that the style.css file only includes a header with the details needed for the theme to work properly and does not contain any CSS blocks:

/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile, and applicable to any website. Its collection of templates and patterns is tailored to different needs, such as presenting a business, blogging, and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full-page designs to help speed up the site-building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.2
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

You will also find an assets folder, which contains a fonts folder, a set of images, and a css folder, which includes the button-outline.css style sheet.

Twenty Twenty-Four’s default style uses two fonts: Cardo for headlines and Inter for other text elements.

Jost and Instrument Sans font families are also available and are used in a couple of style variations.

Following, you’ll find four folders containing the real juice of the Twenty Twenty-Four default theme:

• styles
• patterns
• parts
• templates

Global Styles

Twenty Twenty-Four comes with a set of six different combinations of style variations. You can explore each style in the Styles section of the Site Editor or in the Browse styles panel in editing mode.

The default style is defined in the theme.json and comes with 11 colors, 12 gradients, 5 duotone color combinations, and two font families: Inter for the content body, and Cardo for headings.

Each variation adds specific style combinations.

At the time of this writing, Twenty Twenty-Four comes with the following style variations:

Ice: This variation is pretty similar to the default style. It uses the same default color palette with a system font for headings and Inter for the body.

Milky: This variation comes with the same default font families but with a different color palette.

Mint: Mint adds a variation in both color palette and font families. It uses Instrument Sans for headings and Jost for the body.

Onyx: This is the dark version of the default style. It adds a custom palette, gradients, and duotone combinations.

Rust: Rust uses a pleasing color palette. The typography is based on the default font families but with different font sizes.

Sandstorm: This variation changes several elements of the default style. Sandstorm defines an 11-color palette, uses Instrument Sans and Jost font families, and customizes the appearance of several blocks and HTML elements.

Templates

Twenty Twenty-Four comes with eleven built-in templates. You can find the corresponding files in the templates folder of the theme’s directory:

• single.html
• single-with-sidebar.html
• search.html
• page.html
• page-with-sidebar.html
• page-wide.html
• page-no-title.html
• index.html
• home.html
• archive.html
• 404.html

You can access the list of templates for your customizations in the Site Editor’s Templates section.

Now again, if you want to dive deep into the code of Twenty Twenty-Four templates, you just need to open one or two of them in your favorite code editor. It’s no surprise that each template includes one or more patterns. This proves again that Twenty Twenty-Four is more or less a collection of patterns.

Take for example index.html and open it in your editor. You should see the following code:

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
	<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
	<!-- wp:heading {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
	<h1 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--50)">Posts</h1>
	<!-- /wp:heading -->
	<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

The template starts with a div that includes the header template part. A main element with a heading and the posts-three-columns pattern produces the body, while the footer template part builds the bottom of the page.

Now let’s compare index.html with archive.html:

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
	<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">

	<!-- wp:query-title {"type":"archive","align":"wide","style":{"typography":{"lineHeight":"1"},"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} /-->

	<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->

</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

You’ll notice that the two templates are pretty similar. The only difference is that archive.html uses an Archive title block instead of an H1 element. Both templates use a posts-three-columns pattern to generate the content of the page.

Switching from your HTML editor to the WordPress site editor, you can preview and customize the theme’s templates. The image below shows the Archive template in editing mode.

Once you are happy with your changes, click Save in the upper right corner. This will show a new panel where you can confirm your changes or discard them. Click Save again, and you are done.

Template Parts and Patterns

You can find patterns and template parts in two different folders of the twentytwentyfour directory. The patterns folder includes +50 patterns while the parts folder includes six template parts.

In the Site Editor, template parts and patterns are all included in the same Patterns section.

Twenty Twenty-Four provides several patterns you can use to build the whole page. This simplifies the editing workflow and allows you to build your entire website with few customizations.

Examples are the Home page, About page, and Portfolio Overview Page patterns listed under the About pattern category.

Say, for example, that you want to build an About page. Thanks to the Twenty Twenty-Four About pattern, you can create a new page and simply pick the pattern from the block inserter.

The About pattern provides the entire page layout and you only need to add your customizations, adding or switching blocks, images, and text based on your needs. And if you wonder what happens to your page’s structure if you change the theme, the answer is absolutely nothing. Once included in your page, the pattern becomes part of the content and is stored in the posts table of the WordPress database.

When you scroll down the Patterns navigation menu, you’ll find the Template Parts section, which includes Header, Footer, and General menu items. Each item is the entry point to the corresponding template part category. Twenty Twenty-Four provides one header, three footers, and two general template parts.

But if you open Twenty Twenty-Four template parts in your favorite code editor, you’ll see that most of them simply include a pattern. Take the Sidebar template part, for example:

<!-- wp:pattern {"slug":"twentytwentyfour/sidebar"} /-->

This template part simply includes the Sidebar pattern. You won’t find this pattern listed in your Patterns section of the Site Editor because it is a hidden pattern. If you want to dive into the code, navigate to the theme’s patterns folder, find the hidden-sidebar.php file, and open it in your code editor.

The header of this file confirms that it is a hidden pattern and is not accessible via the block inserter:

<?php
/**
 * Title: sidebar
 * Slug: twentytwentyfour/sidebar
 * Categories: hidden
 * Inserter: no
 */
?>

Summary

If you are looking for a multipurpose theme full of features and special effects, Twenty Twenty-Four is not the theme for you.

The new default WordPress theme is lightweight, flexible, and free of any bells and whistles, and it’s entirely manageable from the site editor.

With Twenty Twenty-Four you won’t have to touch a single line of code, requiring no configuration. To create a site with Twenty Twenty-Four, you just need to customize the templates from the site editor and choose one or more patterns to populate your site pages.

At its core, Twenty Twenty-Four is a collection of patterns. It reflects the new approach to site building and provides a great example of how to build block themes.

Now up to you. Have you installed Twenty Twenty-Four in your development environment? Do you like the new approach to WordPress site-building? Drop a line in the comments below and share your thoughts.

The post Twenty Twenty-Four: The New Minimal Multipurpose Default WordPress Theme appeared first on Kinsta®.