Hi, welcome to this lesson on template parts for WordPress themes.
With this lesson you will describe template parts and how they work, define template part
areas and add template parts to your theme.
So let's dive in.
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 2024 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.
Let's now take a look at adding 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.
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 2024 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 2024 theme, take a look at the 404 template and we'll just
copy that code over into our own theme into our 404 template.
So now you would need to repeat this exact process for the footer.
Now 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.
To learn more about template parts you can refer to the theme handbook available to you
on WordPress.org.