Using Block Template Parts in Classic Themes


WordPress 6.1 includes a new feature, the ability to register block template parts in classic themes.

This feature allows users to make changes to specific parts of the theme, without affecting the rest of the site layout or design.

Learning outcomes

  1. Why you might want to enable block template parts in a classic theme.
  2. How to enable block template parts in a classic theme.
  3. How to create block template parts for a classic theme.

Comprehension questions

  1. Which theme supports do you need to enable for block template parts in a classic theme?
  2. Can users create new template parts once this is enabled?
  3. What is the name of the directory you need to create to house your block template parts?

Transcript

Hey there, and welcome to Learn WordPress.

In this tutorial, you’re going to learn about a new feature added to WordPress in version 6.1, the ability to include block template parts in your classic themes. 

In this video, we will cover

  • An overview of block template parts
  • How to add block template part support
  • Creating block template parts 
  • Using block template parts in PHP

WordPress Block Template Parts

One of the benefits of WordPress block-based themes is the ability to edit any of the reusable template parts from the Site Editor. With block template parts, users can make changes to specific parts of the theme, without affecting the rest of the site layout or design. 

One of the most common examples of this is the “Proudly powered by WordPress” branding that appears in the footer of most WordPress themes.

In classic themes, in order to edit this, one would need to open the footer.php file, find the relevant section in the code, and either change it or remove it. If you make a mistake, it could lead to an error on your website.

However, switching a site to a block theme means users could also edit the template files, which might not be ideal. While it is possible to lock down templates if users only need to be able to edit specific template parts, it’s a lot more work to implement.

In the WordPress 6.1 release, it is now possible to create block-based template parts for classic themes and allow users the same flexibility as if they were using a block theme.

For the code samples used in this tutorial, visit the Make WordPress Themes blog post titled “Testing and Feedback for using block-based template parts in classic themes”.

Adding Block Template Part Support Support

To make use of this functionality, the first step is to enable block template part support on your classic theme.

In your existing classic theme, open the functions.php file, and use the add_theme_support function to enable ‘block-template-parts’. Be sure to hook this into the after_setup_theme action hook, which is the correct hook to use when enabling theme functionality.

add_action( 'after_setup_theme', 'add_block_template_part_support' );

function add_block_template_part_support() {

    add_theme_support( 'block-template-parts' );

}

Once this is done, a new menu item for Template Parts will appear under the Appearance menu. 

Creating template parts in your classic theme

The next step is to create a directory in the theme directory called parts and create your block template parts. To start, use the example footer template part code from the original blog post.

<!-- wp:group {"layout":{"inherit":true}} -->

<div class="wp-block-group">

<!-- wp:group {"style":{"spacing":{"padding":{"top":"80px","bottom":"30px"}}}} -->

<div class="wp-block-group" style="padding-top:80px;padding-bottom:30px">

<!-- wp:paragraph {"align":"center"} -->

<p class="has-text-align-center">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>

<!-- /wp:paragraph -->

</div>

<!-- /wp:group -->

</div>

<!-- /wp:group -->

Once the file is created, and you refresh the template parts editor, you will see the template part available in the list. WordPress automatically reads any .html files in the parts directory of a theme and makes them available as template parts in the editor.

Using template parts in your classic theme

To use your template part, you include it in any of your classic theme files by using the block_template_part function.

This function has one string variable, the filename of the template part, without the HTML extension. So for your new footer.html template part, you could use 

block_template_part( 'footer' );

To show how this works, here is the footer.php template from the classic theme. 

And this is what the footer looks like on the front end.

By replacing everything in the site-info container with the block-based footer template part, you can see how the footer changes on the front end. 

It’s mostly the same but includes the layout and structure that’s included from the new footer template part, for example, the padding.

Once this hybrid theme is installed on a WordPress site, any user can edit the content of the footer, without affecting the layout or design of the theme. For example, the user could replace the wording with their own content.

You can create as many reusable template parts as you want this way, and simply add them as template part files to the parts directory. With block template parts enabled in your theme, the files will be automatically registered and available for users to edit from the template parts list in the WordPress dashboard.

Happy coding.

Workshop Details


Presenters

Jonathan Bossenger
@psykro

WordPress Developer Educator at Automattic, full-time sponsored member of the training team creating educational content for developers on Learn WordPress. Husband and father of two energetic boys.