Welcome to this lesson on templates for theme development.
With this lesson, you will describe the purpose and structure of a template,
list the sequence templates are loaded by WordPress,
and with theme starter files in place, create a template from scratch.
So let's dive in. 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.
Now 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 2024.
And you can see how for this block theme, block markup is being used
to pull in the header, main section, and footer.
And 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.
So 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.
Here 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?
So just 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.
Let's build out our own 404 template.
But let's first take a look at how the 404 template was created within the 2024 theme.
So within the main section, we see here that a pattern was called
and its name is hidden 404.
So let's go into the patterns folder.
We'll find the hidden 404 file.
Note it's PHP and not HTML.
So 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.
So now with the 2024 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.
So 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.
So you go through and you replace 2024 with the name of your root directory.
Mine is getting started.
So once you have your two patterns in place,
then you can create your 404 template.
So this is it here in 2024 and this is the one I created.
Now I will be adding the header and footer to this template within a future lesson.
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.