Twenty Twenty-Four: The New Minimal Multipurpose Default WordPress Theme (r) (r)

Oct 18, 2023

-sidebar-toc>

It's not surprising, Twenty Twenty-Four is a block theme fully compatible with all the awesome stuff coming with WordPress 6.4 and beyond, such as the detail block as well as vertical text.

Following this short introduction of the brand new WordPress default theme, in this post, we will explore the many designs, templates, and styles that will show you how to create an appealing, responsive, usable, and accessible website with Twenty Twenty Four.

Launch the Site Editor. Enter digit Cmd + K to enter Templates.

Launching templates in WordPress 6.4 — The launch of templates within WordPress 6.4

The Twenty Twenty Four WordPress Theme

The Twenty Twenty-Four functions file is a good example of how to optimize the theme, making sure that specific resources are embedded only when they're needed. This code queues up the button-outline.css stylesheet only when a button is visible 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 once the block renders
 * (both within the editor as well as on the front end) thus improving the performance* and reducing the amount of information that visitors request. *
 * 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 doesn't give any features to your WordPress site, so you must rely entirely on the plugins that add functionality to your webpages. So Twenty Twenty-Four's functions.php file only handles enqueuing certain style sheets for specific blocks.

In our next exploration of the Twenty Twenty-Four theme folder, you'll find there is no style.css file. style.css file only has a header containing specific information needed to allow the theme to work properly and doesn't 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 assortment of patterns and templates is designed to meet the needs of different users for example, whether it's presenting blog, business or the display of work or writing. There are a myriad of options that open up with just a few changes to the color or typography. Twenty Twenty-Four includes style variations as well as full-page layouts to help speed up the site-building process. It is completely compatible with the editor for your site, and takes advantage of the new design tools that were introduced with 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
 */

There is also the assets folder. It contains a fonts folder, an image set as well as a css folder. It also contains button-outline.css style sheets. button-outline.css Style sheet.

Twenty Twenty Four's default style employs the two types of fonts: Cardo for headlines, and Inter for other text elements.

Jost and Instrument Sans font families are offered and utilized in several different styles.

After that, you'll discover four folders that contain the actual juice of the Twenty Twenty Four default themes:

styles
patterns
Parts
templates

Global Styles

Twenty Twenty-Four Styles section — Section Twenty Twenty-Four Styles

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

Twenty Twenty-Four default gradients and duotones — Twenty Twenty-Four's default color gradients, as well as duotones

Each variation adds specific style combinations.

In the moment of writing, Twenty Twenty-Four comes with styles that include:

Ice This variation is pretty similar to the default design. It uses the same colour palette as the default, and a font system for headings as well as Inter for body.

Twenty Twenty-Four Ice style variation — The Twenty Twenty-Four-Four Ice variation

Milky This variation comes with the exact font family, but a different color palette.

Twenty Twenty-Four Milky color palette — Twenty Twenty-Four Milky Color Palette

Mint: Mint adds a variation in both colour palettes as well as font family. It utilizes Instrument Sans to create headings, and Jost to create body.

The Mint variation changes font family and color palette — The Mint variation alters the both the font family and color palette.

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

Onyx gradients and duotone combinations — Duotone and onyx gradients

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

Twenty Twenty-Four Rust style variation — The Twenty Twenty-Four Rust version

Sandstorm This variant alters several elements of the default style. Sandstorm is a palette of 11 colors and employs Instrument Sans and Jost font families and changes the style of several blocks and HTML elements.

Templates

Twenty Twenty-Four comes with eleven pre-built templates. You can find the corresponding documents in the templates directory 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

The collection of templates that you can use that you can modify in the Site Editor's Templates section.

For example, take index.html and open it in your editor. You should see the following code:


 /wp:group --> WP:group "tagName":"main","align":"full","layout ":"type":"constrained" -->
   wp.heading{ level":1,"align":"wide","style spacing padding ":{"top":"var:presetspacing50 HTML18 HTML18 - HTML18->
 Posts  --> Posts 
 /wp:heading wp:pattern "slug":"twentytwentyfour/posts-three-columns" 

  --> wp:template-part "slug":"footer","area":"footer","tagName":"footer"

The template starts with the div that includes the heading template. The primary element that has a heading and the posts-three-columns design creates the body, while the footer template is the base part of the webpage.

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

You'll notice that the two designs are very identical. There is only one difference: archive.html uses an Archive title block instead of an H1 element. Both templates employ the post-three-columns pattern to generate pages with content.

Moving from your HTML editor into the WordPress website editor you will be able to view and customize the theme's templates. Below is an image of the Archive template in editing mode.

Editing Twenty Twenty-Four's Archive template — Editing Twenty Twenty Four's Archive template

If you're satisfied with your changes, select save in the upper right-hand corner. It will open a fresh panel that allows you to make your modifications or delete the changes. Save the changes. Save once more after which you're finished.

Template Parts and Designs

Twenty Twenty-Four patterns — Twenty twenty patterns

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

In the Site Editor, the templates, patterns and parts are all included in the same pattern Section.

Twenty Twenty-four provides multiple designs that you can apply for building your complete page. This makes editing easier and allows you to create your complete website using only changes.

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

Full page patterns in Twenty Twenty-Four — Full page patterns in Twenty Twenty Four

Let's say, for instance, that you'd like to design an About page. With the Twenty Twenty-Four About pattern, you are able to make a brand new page, and simply pick the pattern in Block Inserter.

Adding a pattern to an empty page with Twenty Twenty-Four — Incorporating a pattern onto an unfilled page by using Twenty-Four

Previewing a Twenty Twenty-Four pattern with the Twenty Twenty-Three theme — Looking at the Twenty Pattern with the Twenty Three motif

If you look through to the Patterns navigation menu, you'll see an Template Parts section, which includes Header, Footer, and General menu items. Each menu item serves as the entry point to the corresponding template category. Twenty Twenty-Four provides the header and three footers, and two general template components.

Twenty Twenty-Four's patterns and template parts in the Site Editor — Patterns from Twenty Twenty-Four and template parts within the Site Editor

If you go to Twenty Twenty-Four template components within your preferred program editor, then you'll see that the vast majority contain patterns. Consider for instance the Part with the Sidebar template part, for instance.

The template only contains an Sidebar pattern. It isn't listed in your Patterns area of the site Editor because it is unnoticed pattern. If you want to dive deep into the code, head to your theme's pattern folder, locate that hidden-sidebar.php file, and then open it with your editor for code.

The head of this file indicates that it's an unidentified pattern that is not available by the block inserter.

Summary

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

The brand new WordPress default WordPress theme is light and versatile, and without any bells and whistles, and is completely manageable via the site editor.

With Twenty Twenty-Four, you will not need to write one line of code. There is no need for setup. For creating a site using Twenty Twenty-Four, all you need to do is must modify your templates using the site editor and select one or more patterns to populate your site pages.

In its essence, Twenty Twenty-Four is a collection of patterns. The new design reflects the modern method of building sites and offers a wonderful illustration of how to construct blocks and themes.

Carlo Daniele

Carlo is an infatuated lover of webdesign and front-end development. He's been working with WordPress for more than 10 years, also in collaboration with Italian and European schools and universities. He has written many tutorials and articles about WordPress, published both on Italian and international websites, and on printed magazines. There is a way to connect with Carlo on Twitter as well as LinkedIn.

Logo

(Untitled)