Friday, November 22, 2024
HomeEveryday WordPressTwenty Twenty-Five WordPress theme: a developer's overview

Twenty Twenty-Five WordPress theme: a developer’s overview


Based on the idea that simple things should be intuitive while complex things should be possible, Twenty Twenty-Five is a flexible and easily extendable default WordPress theme built to help people tell stories, thanks to its many patterns and styles.

Twenty Twenty-Five will be delivered with WordPress 6.7. It comes with a wide set of inspiring images from Openverse, the free repository of images shared by and for the WordPress community. These images are embedded in the block patterns of Twenty Twenty-Five and ready to be used to tell stories that evoke “ideas of impermanence, the passage of time, and continuous evolution.”

The central role of patterns in Twenty Twenty-Five is evidence of how block theme development is increasingly focusing on the site editor interface and less on writing PHP and JavaScript code.

Now, even users without advanced coding skills can create a theme. You just need to have a good smattering of how theme.json works and how to create block patterns.

The templates and template parts you will see in Twenty Twenty-Five are collections of nested blocks, patterns, and template parts that make up the structural elements of each type of layout.

Twenty Twenty-Five provides an excellent example of the philosophy of democratization of design, and this article will show you its structure in detail.

Twenty Twenty-Five provides an excellent example for you to learn everything about WordPress block themes, and if you have read our introduction to theme.json you will be able to create your own WordPress themes and share them with the entire ecosystem.

But let’s cut to the chase and start our journey through Twenty Twenty-Five, the next default WordPress theme.

Patterns and template parts

Twenty Twenty-Five provides a number of block patterns and template parts that help WordPress users build their posts and pages in minutes. Those patterns and template parts have been designed for several purposes, such as landing pages, products and services, events, calls to actions, about pages, and much more.

In the theme’s folder, you will find the corresponding files in the directories parts and patterns. When you open any template part file, you see that each template part only includes a link to a block pattern. Here is the code of the header.html template part:

Template parts also need to be registered, so you will find them listed in Twenty Twenty-Five’s theme.json under the templateParts property:

{
	"templateParts": [
		{
			"area": "header",
			"name": "header",
			"title": "Header"
		},
		{
			"area": "footer",
			"name": "footer",
			"title": "Footer"
		},
		{
			"area": "footer",
			"name": "footer-newsletter",
			"title": "Footer Newsletter"
		},
		{
			"area": "uncategorized",
			"name": "right-aligned-sidebar",
			"title": "Right Aligned Sidebar"
		},
		{
			"area": "uncategorized",
			"name": "sidebar",
			"title": "Sidebar"
		}
	]
}

The area prop determines the page section where a template part fits in and the corresponding category, name is the template part slug, and title is the text string using to create the label that identifies the template part on the screen.

Twenty Twenty-Five template parts in WordPress 6.7

The patterns folder of the Twenty Twenty-Five theme includes a good number of .php files. You can open any of these files and check the code to learn how block pattern are built.

These patterns provide excellent examples of powerful WordPress features recently added to the core. For example, the copyright.php file includes the following code:



You can see at a glance that this pattern uses the Block Bindings feature introduced with WordPress 6.5 to dynamically generate the Copyright text content.

Here, the content attribute of the Copyright pattern is connected to a source defined in the Twenty Twenty-Five theme.

Twenty Twenty-Five Copyright pattern
Twenty Twenty-Five Copyright pattern

If you are wondering where this text string is defined, check the functions.php file of Twenty Twenty-Five and find the following code:

/**
 * Register block binding sources.
 */
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
	/**
	 * Register the copyright block binding source.
	 *
	 * @since Twenty Twenty-Five 1.0
	 * @return void
	 */
	function twentytwentyfive_register_block_bindings() {
		register_block_bindings_source(
			'twentytwentyfive/copyright',
			array(
				'label'					=> _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ),
				'get_value_callback'	=> 'twentytwentyfive_copyright_binding',
			)
		);
	}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );

'© YEAR' generates the text string displayed on the page, while the twentytwentyfive_copyright_binding callback provides the formatted text string:

/**
 * Register block binding callback function for the copyright.
 */
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
	/**
	 * Callback function for the copyright block binding source.
	 *
	 * @since Twenty Twenty-Five 1.0
	 * @return string Copyright text.
	 */
	function twentytwentyfive_copyright_binding() {
		$copyright_text = sprintf(
			/* translators: 1: Copyright symbol or word, 2: Year */
			esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
			'©',
			wp_date( 'Y' ),
		);

		return $copyright_text;
	}
endif;

If this all sounds a bit complicated, think about how easy it is for the user to create complex layouts simply by using elements available out of the box.

And also think about how easy it is for a developer to create templates and block patterns by generating their code directly in the Site editor. And the integration with the Block Bindings API opens the door to endless possibilities for integration with external data sources.

Twenty Twenty-Five provides other good examples of usage of block patterns. For example, you can build advanced layouts simply putting together existing patterns into other patterns.

When you browse patterns in the Site editor, you can see several landing page layouts in the Pages pattern category.

Twenty Twenty-Five Pages patterns
Twenty Twenty-Five Pages patterns

Those patterns are pre-built layouts and are ready for you to use in your pages. When you create a new page, the editor displays an overlay where you can pick a block pattern. You may want to start with a Landing page pattern and customize it based on your needs.

Choose a pattern for a new page
Choose a pattern for a new page

You can also change the default page template and use the one that fits best with your project.

Choose a template for your page
Choose a template for your page

Now let’s dive into the code of the Landing page for Book pattern. Head to the patterns folder of Twenty Twenty-Five and open page-landing-book.php. You should see the following code:








It’s just a collection of block patterns. This should demonstrate how easy it is to build complex layouts for both developers and users. Developers can create complex template parts and block patterns simply nesting pre-built patterns in other patterns with just few clicks. Building a landing page has never been so easy.



Source link
RELATED ARTICLES
Continue to the category

LEAVE A REPLY

Please enter your comment!
Please enter your name here


Most Popular

Recent Comments