Using Template Parts

Learn how to use template parts with a block theme in this short tutorial–discover what they are, how they work, and finally, learn how to modify, remove, and replace a template art.

Learning outcomes

1. Describe what template parts are and explain how they work
2. Edit a template part
3. Remove, edit, and add template parts to a template

Comprehension questions

1. What are template parts?
2. How are template parts used across a website?
3. Can you embed a template part inside a template part? Why or why not?
4. Where are the two places you can modify a template part?

Transcript

If you visit a well designed website, you’ll notice that one of its strengths is in 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, web designers use a feature known as 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 remove and add a template part to a template.

First, what are template parts? Template parts are a point and click, no code way to create, edit and use the same headers, footers and other template parts across a website, automatically applying them to any post or page template that has been set up to use that template part. Template parts allow you to design a header and footer once and give you a singular place to make future changes, such as if you add a new page, want to change the colors with a company rebrand, or completely overhaul the look and feel of your website.

Find your template parts: first head to your WordPress dashboard. Please note that this feature is only available with WordPress block themes, not classic themes. From your dashboard, hover your mouse over “Appearance”, then click “Editor”. From here, click on “Template Parts”. You will be taken to a list of a theme’s existing template parts. Some block themes provide more or fewer options but almost all come prepackaged with a header and footer like you see here in the Twenty Twenty-Three theme. On this screen, you have the option to edit an existing template part by clicking the name of the template part then the pencil icon next to it.

Let’s start by editing a header. Most headers provide, at minimum, the site title and navigation menus to make it easy to find things. From here, I can use the site editor to modify my header template. I’m going to add a site logo and site tagline to this header template part. Once I save it, this change will be applied to every template that uses this header.

Let’s see this in action. Click the icon in the top left hand corner then use the arrows to navigate back to templates. Each template that uses this template part has been updated to include the new logo and site tagline from the index page to the 404 page. I only had to design this template part once. A word of caution: While you can edit the template parts in their specific template parts section, it’s important to know that you also have the ability to edit a template part in any regular template. The changes you make to a template part in the template section will also be made across other templates that use this theme. For example, imagine that I want to add a cover block to just the header of my homepage.

If you look at my list view, you’ll notice by the indented blocks that I am working within the header template part, not on this individual template, which means that the cover I add here will also be applied to every other template that uses this header template part. You can see it here on this 404 page. To avoid this mistake, always use your list view to ensure that you are not working within any purple highlighted text.

Template parts that might be used elsewhere on other templates have a double diamond shape next to them and are indicated by the color purple. What if you want a different header on say your homepage but you would like the rest of the website to have a standard header? In this case, you would want to make a new template part.

First I’ll navigate back to the template parts dashboard. From here, I can click the plus sign to create a new header. I name it “header front page”. Select the header template part and then create. This will not automatically take me to my new header so I need to open up my menu again by clicking the top left hand icon and selecting the template part. I’m now ready to create my new header. In fact, it’s possible to put a template part inside of another template part like you see here. Designing this way would allow me to change my logo, site title, site tagline, and navigation links in one template part: the header, and have that change automatically also affect this new template part for my front page. It’s one way that you can design twice but only edit once. This can save you time in the future so you don’t have to update both header template parts if something changes. This step is optional, however, and if you find it confusing, feel free to simply design a second template part here.

Now let’s add this new template part to my homepage. I’ll navigate back to templates. I’ll select my homepage and the pencil icon to start editing this template. First, let’s remove the old template part to make room for the new one. Using my list view, I locate my header template part. I select the three dots next to it and select Remove header. I would like to add my new front page header template part above my content. So I use the List View again to select the three dots next to the top block in my list view and select “Insert Before”. From here, I can either use the plus signs to access the inserter or type slash header or slash template parts. I then select template parts block. I select the blue Choose button. I then select the new template part that I created earlier. And voila.

My new template header part has been added just to this front page. Because my other theme templates are using the header template –not the header front page template–it will only appear on my home page. Take a look. You can use this process to create, edit and use other template parts such as for your footers or general other template parts such as if you wanted to create a sidebar area. Remember, the goal is to design once and edit once and have all of your changes automatically apply elsewhere. It’s a time saver.

Please visit learn.wordpress.org to learn more about site editing. Happy designing!