Templates

Template parts

Welcome to this lesson where we explore how to create and add template parts to your theme.

With this lesson, you will:

  • describe template parts and how they work,
  • define template part areas. and
  • add template parts to your theme.

What are template parts and how do they work?

Template parts such as headers and footers are small reusable content sections that can be added to the templates of your choice within your theme. Template parts are saved within your themes parts folder and we load template parts using the template part block.

For example, within the Twenty Twenty-Four theme we have the 404 template and we can take a look at the template part block here for the header. We have the slug property that is the name of the template part file, in this case header and then next is area and that designates where the template part will appear in the page layout and then we have tag name and that creates the wrapper container element and in this case it would be the header tag.

What are template part areas?

Template part areas are a way to organize similar template parts.

Here as an example we’re looking at the 2024 theme and we’re in the site editor looking at the pages template. We see when we go into settings here on the right, if we go into the template tab then we see that the header and footer areas are being applied to pages.

We also see on the left within overview we’ve got a view of the contents of each of these template parts. The use of areas is one significant difference which distinguishes them from patterns since they don’t have the area property.

Add template parts to your theme

One of the ways to add template parts is to go into Manage all template parts and then click add new template part. Give your template part a name and choose its area then click create.

Let’s create a new template part for our theme getting started.

We’ll name it header and assign the area header and click create and then we’ll insert some content. We’ll just search for the site title block and insert that. Then we’ll save our changes to the database and the next thing is we need to create our new template part file and copy our code over into that file.

In the Code Editor here, we copy and then go into the parts folder, create the new header file and paste our code.

Register a template part

The next thing is to register our template part.

This is done in theme.json and for illustration purposes I’m showing you how it’s done in the Twenty Twenty-Four theme. We’ll just copy that over into our own theme. Just to save a little bit of time here we’ll just paste it in our theme.json file.

We’ll go over just under styles and paste it there and now we need that closing array bracket and a comma and then we have to delete that extra comma. Save those changes and now we can add our template part block in our template.

So again we’ll refer to the Twenty Twenty-Four theme, take a look at the 404 template and we’ll just copy that code over into our own theme into our 404 template. Now you would need to repeat this exact process for the footer.

Keep in mind going forward to make your workflow a little easier now that you have your files in place you can just install the create block theme plugin and then choose the save changes option.

Next steps

To learn more about template parts you can refer to the theme handbook available to you on WordPress.org.

This is a preview lesson

Register or sign in to take this lesson.

Suggestions

Found a typo, grammar error or outdated screenshot? Contact us.