Sometimes, it’s the unexpected features that make WordPress so powerful. Those little things you didn’t know you needed can have a big impact.
WordPress 6.1 introduced one of these hidden gems: the ability to use block templates within a classic theme.
It takes the capabilities of block themes and extends them to their classic counterparts. The vast majority of the market is still classic themes. Therefore, it makes sense to update them on the latest tools.
Let’s explore what this feature does and why you might want to use it. Next, we’ll show how you can apply it to your website.
What is a Block Template Part?
WordPress 5.9 introduced Full Site Editing capabilities. When combined with a block theme, the feature allows users to edit different templates in the backend.
Template blocks represent any area of a website that you want to manage within the WordPress Site Editor. Examples include site header and footer. But they could also include niche areas.
In theory, a block template can be as wide or as narrow as you like. This allows web designers to define only the theme features they want to edit. At its best, this provides convenience to site owners while protecting the layout from any major disasters.
Unlike the custom templates long used in classic themes, block template parts will be saved as HTML files. They also consist of block markup, rather than PHP.
Classic themes have traditionally used the WordPress Customizer to edit individual fields. The feature works pretty well but lacks the advanced capabilities of the Site Editor. Now, there is a way for these themes to transcend those boundaries.
Adding Block Template Section to Classic Theme
Adding a block template to a classic WordPress theme is a relatively simple 4-step process. Here is an example of how to set things up.
Step 1: Allow Blocking Template Parts in Your Theme
The first step is to allow your theme to use block template parts. This can be achieved by adding a code snippet to your theme functions.php file:
Code snippet courtesy of Learn WordPress.
Note that if your theme functions.php the file already has an application that adds theme support for other items, you would just have to paste it add_theme_support( 'block-template-parts' ); within the current function.
Step 2: Design Your Template in the Block Editor
After that, it’s time to fire up the WordPress block editor. The easiest way to do this step is to create a new page – we’ll call us “Test Block Part”. It can be deleted once our block template is up and running.
Within this page, we have created a simple two column layout. It includes the contact information of our fictional clients and links to their social media profiles. Everything here uses standard blocks included with WordPress core.
The idea is to allow our clients to make changes to this information as needed – but without touching the rest of the site layout.
Step 3: Copy and Paste Block Markup into an HTML File
Now that we’ve built our layout, it’s time to copy and paste the block markup into an HTML file.
There are a few options for copying the block markup:
- Select the blocks you want to copy within the Block Editor and insert
CTRL + C(orCOMMAND + Con a Mac) to copy the markup, OR; - Enter the WordPress Code Editor for your page by clicking on the Choices button within the Block Editor, then copy the relevant markup;
Next, open the code or text editing app of your choice and paste the block markup into a new file. Our markup looks like this:
Save the file as an HTML document into the /parts your theme’s directory (create the folder if it doesn’t already exist). Note that you don’t need anything else in the file other than the block markup.
For example, we’ll call our file footer-contact-info.html. Note the file name, as we will need it in the last step.
Step 4: Add the Block Section Template to Your Theme
Now that we’ve created our block template, we’ll need to add it to the PHP template in our classic theme.
WordPress has a built-in function called block_template_part() that we can use to call our block templates into the theme. It uses the HTML file name (minus the “.html” extension) to locate the template. Here’s what our code looks like:
We can add this function wherever we want to display the block template part. In this case, we will put it on our footer.php example.
All that’s left is to upload our updated theme files to the server. Once that’s done, we’ll refresh the page and find our block template to proudly display at the bottom of the site.
Edit Your Block Template Anytime
Whenever we need to make a change, our custom block templates are just a few clicks away. To find the template, visit Appearance > Template Partsthen click on the template name (footer-contact-info).
Changes can be made via the Block Editor – just like any WordPress page or post. Save your changes and they will appear on the front page of the website.
*Note: Some early implementations of this feature had a bug that caused part of a block template to be uneditable within WordPress. When a theme.json file with the theme temporarily solves the issue.
Bringing Classic WordPress Themes into the Block Age
The ability to use block template parts is a step forward in the classic WordPress theme. Theme developers can stick with the power and flexibility offered by PHP-based themes while adding block template support when needed.
It’s also a way to open up specific features to back-end editing without having to switch to a block theme. The process is easy to implement and much less labor intensive than starting from scratch. The result is savings in time and money.
In addition, it gives us a way to move beyond the Customizer. That feature will likely be phased out over time, so the ability to block switching to template parts helps us start the migration.
Best of all, there are many potential use cases for this functionality. It might be just what you need to add a layer of convenience to your next WordPress project.
