Easy creative tips

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

Oct 21, 2023

-sidebar-toc>

The reason for this isn't too surprising, since Twenty Twenty-Four is a block-based theme that is fully compatible with all of the fantastic features available in WordPress 6.4 and higher, such as the detail block, as well as the horizontal text.

Following this short introduction of the latest WordPress theme options, within this article, we will explore the numerous themes, styles, and styles which teach you to develop a visually attractive, mobile-friendly, usable, and usable website with twenty Twenty Four.

Launch your Site Editor. Type in the number Cmd + K to start your template.

Launching templates in WordPress 6.4
Templates are now available in WordPress 6.4

Twenty Twenty Four WordPress Theme

The Twenty Twenty-Four function file could be an excellent method to enhance the design by ensuring that specific resources are only used when they are required. This code will queue the button-outline.css stylesheet only when a button is visible on the web 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. They will only be loaded when the block renders (both within the editor and also on the frontend) that speeds up rendering as and reduces the amount of information that users need. * * 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 offer any functionality for your WordPress site, so you must rely entirely on the plugins that can add functionality on your website. Therefore Twenty Twenty Four's functions.php file only handles enqueuing certain style sheets that are specific to blocks.

When we next look into our next exploration of the Twenty Twenty Four theme folder you'll notice that there's no style.css file. style.css file only contains a header that includes specific data that is required for the theme to work properly and does not contain 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 variety of templates and patterns is made to fulfill the demands of diverse customers, like whether it's presenting blog, business or the display of writing or work. There's a wide range of options that could be achieved by making just some minor changes to the typography or colors. Twenty Twenty-four has styles as well as full-page layouts that could speed up the process of creating a website. It is fully integrated with WordPress' editor for your site, and uses the latest designs tools, which were introduced 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 contains a fonts folder and an image along with a CSS folder. It also contains button-outline.css style sheets. button-outline.css design sheet.

The default design of Twenty Twenty Four employs the two fonts that are available: 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 accessible via Google Fonts

Jost and Instrument Sans Font families are available and can be used in a range of styles.

Then, there are four folders containing all the essence of Twenty Twenty Four default themes:

  • styles styles
  •       Patterns      
  •       Parts      
  • templates

Global Styles

Twenty Twenty-Four Styles section
Section Twenty 24 Styles
Twenty Twenty-Four Browse styles panel
Twenty Twenty-Four Browse styles panel

The default style can be discovered in theme.json and comes with 12 colors, 11 gradients, 5 duotone colors, and two kinds of fonts: Inter to be used for content bodies and 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.

As of the writing time, Twenty Twenty-Four comes with styles that include:

Ice This variant is identical to the design that's normal. It employs the same colour palette that is the standard design, as well as an alphabet system to indicate headings in addition to Inter to the body.

Twenty Twenty-Four Ice style variation
Version Twenty Twenty Four Four Ice. Twenty Twenty Four Four Ice version

Milky The variant has identical fonts but 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. Mint makes use of Instrument Sans to make headings and Jost to create the body.

The Mint variation changes font family and color palette
The Mint variation changes in both the family of fonts as well as the colour palette.

Onyx: The HTML0 Onyx style is a dark version of the style used by the default. It has a customizable palette, gradients, as well as duotones.

Onyx gradients and duotone combinations
Onyx and Duotone gradients

Rust Rust has a appealing colour palette. The fonts are inspired by the font families that are common, however they use distinct size fonts.

Twenty Twenty-Four Rust style variation
The model with the 244-hour corrosion.

Sandstorm The variant changes some elements of the standard style. Sandstorm is a color palette that has 11 shades that use Instrument Sans and Jost family of fonts. The design is additionally altered to alter the appearance of several blocks as well as HTML elements.

Sandstorm's color palette
Sandstorm's color palette

Templates

Twenty Twenty-Four templates in the Site Editor
Twenty Twenty-Four templates are available through the Site Editor

Twenty Twenty-Four comes with eleven pre-designed templates. The corresponding documents in the templates directory in 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

Templates you can download that you can modify in the editor's templates section.

As an example, you can take index.html and open the file in your editor. The following code should be visible: 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 that contains a head template. The principal element that has an introductory heading as well as the three columns of posts design forms the body. Its the footer template is the primary element of the webpage.

We'll now look at comparing index.html with archive.html:

The two designs are very similar. Only one distinction: archive.html uses an archive's title block, rather than the H1 element. Both templates employ the three-column post style to make pages with information.

Once you've switched from your HTML editor into WordPress's WordPress website editor, you'll be able to view and edit the template of your theme. Below is a picture from the Archive template when editing.

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

If you're happy with the modifications you've made, click save in the upper right-hand corner. Then, you'll be presented with a fresh screen that allows you to make changes or edit them. It is possible to save your changes. Save the changes again, until you're finished.

Design Template Parts, Designs and Designs

Twenty Twenty-Four patterns
Twenty patterns

The patterns are available as templates in two folders within the twenty-four directory. The pattern folder has 50 patterns. The part folder includes six templates components.

Within the site Editor Templates, Patterns, and other components are contained in the identical style Section.

Twenty Twenty-four has a range of styles that you could apply for building your complete webpage. It makes editing simpler and allows you to build your entire website with only modifications.

Examples are Examples are Home page, About page Examples are Home Page, About page About page Overview of Portfolio Page patterns that are included in the About section of patterns.

Full page patterns in Twenty Twenty-Four
The complete-page pattern from Twenty Twenty Four

Imagine, for example, you're looking to design the About page. By using this Twenty Twenty-Four About design, it is possible to design a completely new page then choose the style in Block Inserter.

Adding a pattern to an empty page with Twenty Twenty-Four
Then, you can incorporate patterns into the blank paper using Twenty-Four
Previewing a Twenty Twenty-Four pattern with the Twenty Twenty-Three theme
Analyzing how to interpret the Pattern in the Twenty Pattern and the The Twenty Three motif

If you look through to the Patterns navigation menu, you'll see a Template Parts section, which includes Header, Footer, and General menu options. Each menu item is the entry point to the category for templates that's corresponding to it. Twenty Twenty-Four provides three footers, 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 go to Twenty Twenty-four templates on the program editor you use It will be apparent that the vast most of them feature patterns. Consider the part that contains that Sidebar template, as an example.

The template is comprised of one Sidebar pattern. It's not included in the patterns section of the Site Editor since it's a hidden pattern. If you want to dive deep into the code, visit your theme's patterns folder, find that hidden-sidebar.php file, and then open it using an editor to alter the text.

The file's header indicates that it's an unidentified pattern, which isn't available to inserters that can use blocks.

Summary

If you're looking for a theme which can be utilized in a variety of ways and has lots of effects and special features, Twenty Twenty-Four is not the right theme.

The new WordPress standard WordPress theme is lightweight and flexible, with no bells or whistles, and can be completely controlled via the editor on your web site.

With Twenty Twenty Four, you won't have to write a single line of code. The software doesn't need setup. In order to create a website with Twenty Twenty Four, all you require is to edit your templates in the editor for your site and choose any or all of the patterns you would like to incorporate into the pages you create.

It is essentially, Twenty Twenty-Four is a collection of designs. This new style reflects the current method of creating web sites. This style also gives a great model of how to create blocks and themes.

Carlo Daniele

Carlo is an avid fan of web design and front-end development. He has utilized WordPress for more than 10 years. He also works in collaboration with Italian and European Universities and schools. He has published numerous instructional articles and tutorials on WordPress that have been published on Italian and international websites, and on printed magazines. You can connect with Carlo through Twitter as well on LinkedIn.

This article was originally posted this site

Article was first seen on here