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