Transcript
Introduction
In this lesson, we will look closer at using template parts. By the end of this tutorial, you’ll be able to describe what template parts are and how they work, edit a template part, and replace it on a template. If you visit a well-designed website, you’ll notice that one of its strengths is its consistency. Its headers, footers, and sidebars often have the same or similar content to make it easy for viewers to find the information they are looking for, no matter where they are on a website.
To get this effect, do web designers have to build their headers, footers, and sidebars from scratch on every website page? The short answer is no. With WordPress block themes, you will use a feature known as template parts.
What are template parts?
Firstly, what are template parts? Template parts are groups of blocks you can use to create repeated parts of your template, like the header, footer, and sidebar. Let’s see this in action when you’re on your WordPress dashboard. Make your way to Appearance and then click on Editor. This will take us to the Site Editor, and then we’ll open up one of our templates, in this case, the blog home template.
We create and modify our header and footer template parts within a template. Some block themes provide more or fewer options, but almost all come pre-packaged with the header and footer as you see here as part of the Twenty Twenty-Four theme. WordPress has made it even simpler by providing header and footer patterns that are ready to be used and modified. So when you click on the three vertical dots of the header template part and select Replace header, you will first notice the existing template parts. These are template parts that I’ve already created. Then, below that, we will find header template part patterns. You can select any of these patterns that come with your theme. As mentioned, some themes might provide more, some less. This works exactly the same for footers.
Editing a template part
Let’s start by editing a header template part. When you click on Edit in the blog toolbar, you can work on your header template part in editing mode without any other distractions. Firstly, let’s open our List View. Then, I’ll go ahead and add my site logo to my header template part. Once I select the Site Logo block, I can upload an image from my media library or computer.
Next, I’ll select the Site Title block and add the site title for this website. Then, I will save my header template part and return to my blog home template. Just a reminder: Template parts are synced and will be updated everywhere they have been used. You will notice that the color purple indicates when a pattern is synced. Let’s see this in practice in one of our other templates. So when we open our page template, for example, we’ll see the header is exactly the same. Or when we open up our 404 template, we’ll see that the changes have also applied here because template parts are synced.
What if you wanted a different header on your home page, for example, but you would like the rest of your website to have a standard header? In this case, you would want to create a new header template part or replace the header with a pattern and add it to your blog home or front page template. I will modify my blog home template as I’ve selected my posts page as my home page display. So I’ll make sure I select my header, click on the three vertical dots, and then select Replace header. Now, you can replace your home page header using a pattern or an existing template part. I will replace the header with an existing header template part, which I’ve already created and called Banner Header. Now, my home page will have its own unique header. Once I’ve saved it, we can view our other templates to double-check that they still have the standard header in place.
Creating a template part from scratch
Lastly, let’s talk about creating a template part from scratch. Make your way to Patterns and then scroll down to template parts. You can view all your existing headers, footers, and general template parts here. To create a new template part, click the plus icon next to patterns and select Create template part. From here, you can select a general template part that is not tied to any particular area, a header template part, or a footer template part. In this case, we are going to create a footer template part.
Firstly, we need to name it appropriately. In this case, a Four-column footer, and then we can click Create. This will take us into focus mode again; from here, we can start building from scratch. I will take a shortcut and grab a pattern from the Patterns Directory. Make your way to wordpress.org, click on Extend, and select Patterns. From here, you can select from thousands of patterns. I will select Community Contributions, click on Footers, and then you can search for the right pattern. Once you find a pattern that appeals to you, you can copy the pattern, return to your website and paste. Now you can start modifying it to meet your needs. Once updated, we can return to the patterns area, and you will notice that your new footer is part of your existing template parts. You can add it to any template. When you select Manage all template parts, you can rename and delete custom template parts or clear the customizations of template parts provided by your theme. I trust you now feel comfortable editing your templates and creating a header and footer for your site.
Practical
Go to WordPress Playground and complete the following activities to test your knowledge:
- Replace the current header of the Blog Home template with any header template part pattern that comes with the theme.
- Replace the current footer of the Blog Home template with a new footer template pattern that comes with the theme.