Template overview

Welcome to this lesson on the purpose, structure and loading of templates.

What is the purpose and structure of a template?

Templates are created to give pages some structure. They dictate the layout and they can pull in different sections, like a header, main, and footer. If I were to inspect this code, I could see how the browser rendered the code in the front end by pulling in the code for the header, main section, and footer.

Here we are looking at the 404 template within the default theme Twenty Twenty-Four.

You can see how for this block theme, block markup is being used to pull in the header, main section, and footer. You can also see that patterns are being used to pull in code from the pattern files located within the patterns folder.

Now bear in mind with a block theme, you cannot put straight up HTML. That Hello World code is going to create an error, and you see it here when I go into the site editor and go to the 404 template.

With the Hello World code removed, another thing I wanted to point out is within the Site Editor, when we go into the code editor, the code for the pattern is actually pulled in here. See how you don’t see the pattern mentioned here at all? Bear that in mind as you’re building out your templates.

What is the sequence templates are loaded by WordPress?

There’s a template loading order and at the bottom is the themes templates. Next, if there’s an active child theme, those templates take precedence. Now finally at the top, we’ll find that user customizations saved within the database have the highest priority.

With theme starter files in place, let’s create a template from scratch. If you aren’t familiar with theme starter files, I recommend you take a look at the beginner WordPress developer module for theme development.

Create a template from scratch

Let’s build out our own 404 template, but let’s first take a look at how the 404 template was created within the Twenty Twenty-Four theme.

Within the main section, we see here that a pattern was called and its name is hidden 404. Let’s go into the patterns folder. We’ll find the hidden 404 file and note it’s PHP and not HTML. If we take a look at that file, we see here another pattern is called and it’s named hidden search. So a pattern within a pattern.

With the Twenty Twenty-Four 404 template, we’re going to save ourselves some time and use it to create our own 404 template within our own theme with the theme starter files in place. I’ve already created the PHP files. I’ve made sure to replace the slug with getting started the name of the folder, otherwise known as the root directory for the theme.

Go through and replace twentytwentyfour with the name of your root directory. Mine is gettingstarted.

Once you have your two patterns in place, then you can create your 404 template. This is it here in Twenty Twenty-Four and this is the one I created. I will be adding the header and footer to this template within a future lesson.

Next steps

If you would like to learn more about templates, you can refer to the theme handbook available on WordPress.org.

In the next couple of lessons, we’ll be going over template hierarchy and template parts.