Using block-based template parts in a classic WordPress theme

Learn in this tutorial how to use a block template in a classic WordPress theme.

With WordPress 6.1 support has arrived so that classic themes can also make use of block-based template parts (which until now were only compatible with block themes).

I understand that taking the step to create/customize block themes can be a bit of a challenge if you already have your workflow perfectly optimized for classic themes.

But there are many enhancements in the latest versions of WordPress that you can take advantage of with a classic theme. That’s why I’ve dedicated several tutorials to how to customize the theme.json file and this tutorial goes in the same direction.

Let’s see how.

Steps to use a block-based template parts in a classic WordPress theme

1. Add the snippet to support block-based template parts in a classic WordPress theme

Add the following snippet to the functions.php file:

In the code you use the after_setup_theme hook and the add_theme_support function to support block-based template parts in a classic WordPress theme.

Once added, you’ll see a new section appear in the “Appearance” menu called “Template Parts”. You’ll see that there aren’t any yet, so let’s move on to the next item.

2. Creates a block-based template part

The nice thing about all elements created with blocks is that you can make them with the WordPress block editor.

For this tutorial we are going to use the example of creating a header. You can create any structure you want but I recommend that you use a group block that encompasses all blocks and a row element inside. It could look something like this:

When you already have the design you want, copy the code (selecting all) and paste it into a file called header.html inside the /parts/ folder you created in the root of the classic theme.

3. Show the block based template part

Once you have supported and created the template part you just need to display it. In this tutorial we are using the header as an example, so let’s see how you can replace the “classic header” with the “block header”.

Depending on the theme you are using it will be a bit different, let’s see two examples.

3A. With a Genesis child theme

In the case of a Genesis child theme (e.g. Genesis Sample) what you have to do is “unhook” the header and navigation and “hook” the template part into the header.

To do this add the following snippet to the functions.php file:

3B. With a Twenty Twenty style theme

For example in Twenty Twenty-One what you have to do is to substitute:

That is, instead of calling the template part of PHP with get_template_part you use block_template_part to display the block-based template part.

4. Modify the block-based template part (optional)

Once you have the new block-based header, you can go to the “Template Parts” section and modify it if necessary.

From import classic menus:

To changing any part of the design:

And this is just an example, you can get exactly the same but for the footer.

Conclusions

If you want to start using block-based template parts in a classic WordPress theme now you know how to achieve this.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉