In this lesson we will take a closer look 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 a template part 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 very 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 page in their website?
The short answer is no.
With WordPress block themes you will use a feature known as template parts.
Firstly, what are template parts?
Template parts are groups of blocks that you can use to create repeated parts of your template, like the header, footer and the sidebar.
Let's see this in action when you're in 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.
And within a template we create and modify our header and footer template part.
Some block themes provide more or fewer options, but almost all come pre-packaged with the header and footer like you see here as part of the Twenty Twenty-Four theme.
WordPress has made it even more simple 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 notice at the top existing template parts.
And these are template parts that I've already created.
And then below that we will find header template part patterns.
And now of course you will be able to select any of these patterns that come with your theme.
And as mentioned some themes might provide more, some less.
And this works exactly the same for footers.
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. And then I'll go ahead and add my site logo to my header template part.
So once I select the Site Logo block, I can upload an image from my media library or from my 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 update everywhere it has been used.
You will notice that the color purple indicates when a pattern is synced.
Let's go to one of our other templates to see this in practice.
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 say 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 template or your front page template.
I'm going to 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.
And now you can replace your home page header by using a pattern or an existing template part.
I will replace the header with an existing header template part which I've already created called Banner header.
And now my home page will have its own unique header.
And once I've saved, we can view our other templates to double check that they still have the standard header in place.
Lastly, let's talk about creating a template part from scratch.
Make your way to patterns and then scroll down to template parts.
Here you can view all your existing headers, footers and general template parts.
To create a new template part, click on the plus icon next to patterns and then select Create template part.
And from here, you can select a general template part which 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.
So firstly, we need to name it appropriately.
In this case, a Four-column footer and then we can click Create.
And this will take us into focus mode again and from here we can start building from scratch.
I'm going to take a shortcut and actually grab a pattern from the Patterns Directory.
So make your way to wordpress.org, click on Extend and select Patterns.
And 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.
And now you can start modifying it to meet your needs.
And once updated, we can return to the patterns area and you will notice that your new footer is part of your existing template parts and you can add it to any template.
When you select manage all template parts, you will be able to rename and delete custom template parts
or clear the customizations of template parts that were provided by your theme.
I trust you now feel comfortable editing your templates and creating a header and footer for your site.