Using Template Parts

The template part block is an advanced block introduced in WordPress 5.9 that can be used with a block theme or a theme that supports template editing. This block is best used to edit areas like your site header and site footer.

Learning outcomes

1. Define the purpose of a template part.
2. Add an existing template part to your site.
3. Edit an existing template part.
4. Create a new template part.

Comprehension questions

1. Which parts of your site are appropriate to use a template part?
2. What happens if you make changes to an existing template part and save?

Transcript

0:00
Are you interested in personalizing a header or footer that can be used throughout your entire site? Have you ever wanted to edit a header or footer beyond what the customizer allowed, but didn’t want to make changes to the theme’s code? In this workshop, we’ll explore how template parts block fits into the array of Full Site Editing features and gives you flexibility in designing your own header and footer.

0:26
The template part block is an advanced block and it’s used to organize and display your site structure. For context, this block is best used to create areas like your header, footer, and sidebar. Once you have created a template part, you can use it, reuse it or edit it. When you change blocks inside a template part. The editor will update the blocks on every block template that includes that template part. If you change a template part in one place, it will change everywhere it has been used.

1:00
For this workshop, I’ll be making changes in a local test site called my travel blog. I’ll be using the 2022 block theme and running WordPress version 5.9. Feel free to pause this video if you want to try it out on your own.

1:16
First, we’ll need to access template parts. One way to do this is through the editor. Make your way to dashboard, Appearance, Editor, Click on the W in the top left. And then template parts. You’ll find any existing template parts listed on this page. You can either edit an existing template part by clicking on the template part you want to personalize. Or you can add a new template part to your site by clicking the Add New button in the top right corner.

1:51
Let’s start by editing an existing template part. I’m going to click on Header. This brings me to the template part focus mode. This is a dedicated mode that only shows the selected template part. From here, I can edit the header by customizing existing blocks, adding new blocks or removing existing blocks. For instance, I’m going to upload a site logo of my initials to the existing site logo block. I could also click on the existing navigation menu and delete it. And then I could click on the plus sign to insert a block and bring the navigation menu right back in. You’ll notice that that familiar experience from the editor applies to template parts now like your header too. I’m going to hit save in the top right corner and it will alert me that changes are being applied to this specific header template part. That means that any place that the particular template part appears throughout my site will also be updated with these changes. Great.

2:57
Now let’s add a new template part to our site. We’ll access the template editor focus mode the same way as we did to edit an existing template part. From your dashboard, Navigate to Appearance, Editor. Click on the W in the top left corner and then Select Template parts. However, this time we’re going to click the Add New button in the top right corner. Since there’s a new template part, we’ll have to select the type we want to create: either general, header or footer. If you select General, it’s not tied to any particular area. Unlike a header being at the top of your site and a footer being at the bottom.

3:35
I’m going to select header. And now I’m going to give it a name and call it my travel blog header. Once the name is entered, and the area is selected, you can click the Create button. Now I can create a header from scratch, I’m going to click on the plus sign to access the block inserter and type in cover so that I can add in a cover image. I have a picture from my travels in Montana already uploaded to my Media Library. So I’m going to select that. Wonderful. I want to change this color overlap how it’s a little bit greyed out. So I’m going to click on the cover image and open Settings. Let’s scroll down to color and reduce the opacity to zero. Now I want to add the site logo into my header. So I’m going to go back to the inserter, type site logo and click on that block to add it. I now have created a brand new header. I’m going to hit save so that I can reuse this template part throughout my site.

4:41
You might be wondering how to add a template part into an existing template. Let’s explore that now using the editor. I’m going to access the editor from the dashboard by clicking on appearance and then editor. I am currently editing my site’s homepage which is indicated by where it says home in the top middle of the screen. My homepage with the 2022 theme already comes pre-loaded with a header that has a cover image of a bird, a site logo, site title, and navigation menu. I have the option to simply make edits to this header similarly to how we did it with the template focus mode. However, I want to show how to add a header into the editor.

5:23
Let’s get rid of this existing header first by opening up List View, hovering over header dark small, clicking the three vertical dots to access options, and then clicking on Remove template part. Now I’m going to go to the toggle block inserter which has that plus sign to add a template part. I can do this a few ways by adding the template part block or the header block. I’m going to select the template part block. It will automatically insert this block at the bottom of the page.

5:54
I then have the option to choose an existing template part or to create a new template part. But this time, I’ll be able to edit it right from within the editor. I’m going to select “Choose existing.” Any available template parts will then be available to choose. There are the pre-loaded headers from my theme, but also the header we created earlier called my travel blog. I’m going to click on my travel blog header to add that into the homepage template. And for my last step, I’m going to open up list view. Click and drag the header up to the top of the template page. And now let’s preview. You can now add that template part header to any templates throughout your entire site.