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

Oct 19, 2023

-sidebar-toc>

This isn't surprising since Twenty Twenty-Four is a block-based theme perfectly compatible with all of the amazing features that come with WordPress 6.4 and beyond, such as the detail block, as well as the horizontal text.

Following this short introduction of the new WordPress default themes, in this article, we will explore the many themes, styles, and styles that teach you how to build an visually appealing, mobile-friendly, usable, and accessible website using Twenty Twenty Four.

Launch the Site Editor. Enter the digit Cmd + K to open the template.

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 can be a great way to improve the theme by ensuring that specific resources are embedded only in situations where they are needed. This code queues up the button-outline.css stylesheet only when a button is visible on the webpage:

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. They will only be loaded once the block renders * (both inside the editor, as well as at the frontend) which improves the speedas well as reducing the volume of data that users 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 does not provide any functions for your WordPress website, which means you must rely entirely on plugins to add functions to your website. Therefore, Twenty Twenty Four's functions.php file only handles enqueuing certain style sheets for specific blocks.

When we next look into 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 particular information necessary to allow the theme to function 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 created to satisfy the requirements of various users, for instance, whether it's presenting blog, business or the display of writing or work. There's a wide range of possibilities that can be created by making a couple of changes to the typography or color. Twenty Twenty-four includes styles and fully-page layouts, which can help accelerate the process of building a website. It's completely compatible with the editor for your website, and also utilizes the brand new designs tools which were released by 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 asset folder. It includes a fonts folder, an image set along with a css folder. It also contains button-outline.css style sheets. button-outline.css style sheet.

The default style of Twenty Twenty Four employs the two types of fonts: Cardo for headlines, as well as Inter for all other elements of text.

Cardo font preview on Google Fonts — The preview of Cardo's font is available on Google Fonts

Jost and Instrument Sans font families are provided and used in a variety of styles.

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

styles styles
Patterns
Parts
templates

Global Styles

Twenty Twenty-Four Styles section — Section Twenty 24 Styles

The default style can be found by theme.json and comes with 12 colors, 11 gradients, 5 duotone colors, as well as two types of fonts: Inter for the content body, as well as Cardo to be used for the headings.

Twenty Twenty-Four default gradients and duotones — Twenty Twenty Four's color gradients are default and duotones

Each variation adds specific design variations.

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

Ice This variation is pretty identical to the design that is standard. It utilizes the same colour palette as the default, and also a font system for headings, as well as Inter for the body.

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

Milky The variation has the same font family with a slightly different color scheme.

Twenty Twenty-Four Milky color palette — The Twenty Twenty-Four Color Palette is Milky.

Mint: Mint adds a variation in both colour palettes and font families. It utilizes Instrument Sans for creating headings, and Jost to make body.

The Mint variation changes font family and color palette — The Mint variation changes in both the font family as well as color palette.

Onyx: The HTML0 Onyx style is a dark version of the style that is default. It includes a customized palette, gradients, as well as duotones.

Onyx gradients and duotone combinations — Onyx and Duotone gradients

Rust: Rust uses a pleasing colour palette. The fonts are based off the font families that are standard, but using distinct size fonts.

Twenty Twenty-Four Rust style variation — The version with the twenty-four-four rust.

Sandstorm The variant changes a number of elements from the default style. Sandstorm is a palette with 11 colors that utilizes Instrument Sans as well as Jost font families. The style is also altered to alter the appearance of a number of 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 this 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

Templates that you can use that you can modify in the Editor's Templates section.

For example, take index.html and open it in your editor. You should see the below 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 a the div which contains an header template. The primary element with a heading and the posts-three-columns style forms the body. it's footer template serves as the primary element of the page.

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

The two designs are very alike. Only one distinction: archive.html uses an Archive's title block rather than an H1 element. Both templates utilize using the post-three-columns design to create pages with content.

After you move from your HTML editor to the WordPress website editor, you'll be able to view and edit the templates of the theme. Below is a picture from the Archive template while editing.

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

If you're satisfied with the changes you made, click save at the top right-hand corner. It will open a fresh screen that lets you edit or remove your changes. You can save the modifications. Save another time until you're done.

Design Template Parts and Designs

Twenty Twenty-Four patterns — Twenty twenty patterns

There are patterns as well as template parts in two folders within the twenty-four directory. The patterns folder includes +50 patterns, while the component folder has six templates components.

In the Site Editor, templates, patterns, and other components are contained in the same design Section.

Twenty Twenty-four offers a variety of designs that you can apply for building your complete webpage. This makes editing easier and allows you to build the entire site with just modifications.

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

Full page patterns in Twenty Twenty-Four — The full-page patterns of Twenty Twenty Four

Imagine, for example, that you'd like to create an About page. By using this Twenty Twenty-Four About design, it is possible to create a completely new page then select the design in Block Inserter.

Adding a pattern to an empty page with Twenty Twenty-Four — Integrating patterns onto the blank page using Twenty-Four

Previewing a Twenty Twenty-Four pattern with the Twenty Twenty-Three theme — Examining the Pattern of the Twenty Pattern and the The Twenty Three motif

If you look through to the Patterns navigation menu, you'll notice a Template Parts section, which comprises Header, Footer and General menu items. Each menu item is the entry point to the template category that is corresponding to it. Twenty Twenty-Four provides three footers and the header as well as two template general elements.

Twenty Twenty-Four's patterns and template parts in the Site Editor — Patterns are from Twenty Twenty-Four as well as template components inside the Site Editor

If you visit Twenty Twenty-Four templates in your program editor of choice You'll notice the majority of them have patterns. Think about the Part that includes the Sidebar template, for instance.

The template is only comprised of a Sidebar pattern. It's not listed in the Patterns area of the site Editor since it's a hidden patterns. If you want to dive deep into the code, head to your theme's pattern folder, find the hidden-sidebar.php file, and then open it with the editor you use to edit the code.

The header of the file suggests that it's an unidentified pattern, which isn't available to an inserter for blocks.

Summary

If you are looking for a theme that can be used in multiple ways and has lots of special effects and features, Twenty Twenty-Four is not the right theme.

The all-new WordPress default WordPress theme is lightweight and flexible, with no bells or whistles, and is completely controllable through the editor for your site.

With Twenty Twenty-Four, you'll not have to write a single line of code. It doesn't require setup. To create a website using Twenty Twenty-Four, all you need to do is must edit your templates in the site editor and select one or more patterns for your pages.

It is essentially, Twenty Twenty-Four is a collection of patterns. This new style reflects the current method of creating web sites. It also provides an excellent example of how to build blocks and themes.

Carlo Daniele

Carlo is an infatuated fan of web design and front-end development. He has been using WordPress since more than 10 years. He also works in collaboration with Italian as well as European Universities and schools. 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 through Twitter as well as LinkedIn.

Article was posted on here

How to Monetize Your Travel Blog: Four Strategies to diversify your income

How to sell more than 100 Places in Your Online Course to one corporate customer

Logo

Digital River Alternatives for 2024 --