Making sense of WordPress templates

One of the most misunderstood aspects of working with WordPress is the important role that templates play. 

Often confused and mistaken for a theme, knowing what templates are, how they are used in every WordPress site, and how they can be customized will give you a significant advantage when developing, growing, and managing a WordPress site.  

First, what are themes?

As you may know, every WordPress site has an active theme that provides the art direction (look and feel) of the site. Many themes also include special functionality. 

For example, a theme that caters to non-profits may have membership, calendar, and donation features built in. 

WordPress uses two very different types of themes. More about that in a minute. 

What are templates & how do they differ from patterns?

Every theme comes with a set of templates, which is the code that serves up (displays) every kind of page you see for a WordPress site.  

For example, there is one template that outputs every blog post you see on a site. There’s another template that outputs the blog archive, and still another template that outputs regular pages. 

The important point is that for any kind of page you see - be it a blog post, blog archive, regular page, or others - there is one (and only one template that is responsible for generating that page. 

You might confuse templates with patterns - but don’t. They are not the same. Patterns are pre-fabbed designs that can be inserted into any type of page and then modified to suit the needs of a site developer (the person - or persons - who create the site.  

Many themes have a collection of patterns that can be used to either start an entire page or parts of a page such as a call to action, banner, gallery, and other parts. Patterns are also found in the block inserter (see the Patterns tab) or in a dedicated section of the Site Editor. Patterns can also be found through third-party sources. 

It is simple to create your own Patterns from scratch, no matter which theme you are using, and have them available for use on any page or post. 

What are the types of WordPress themes?

While their purpose is the same, WordPress has two very different types of themes. 

Beginning in December 2018, WordPress introduced a new way to develop a site that uses blocks to create every aspect of the site. 

Blocks are visual representations of HTML. For example, paragraphs, headings, images, and buttons each have their own block. 

However, only a Block Theme uses blocks to build every aspect of a website not just page or post content. Headers, footers and other repeating elements of a site use blocks.

The other type of theme - the Classic Theme - uses blocks only when creating a Page or Post.

Let’s examine each type of theme more closely, as their differences are significant when it comes to understanding templates.

Block Themes

In Block Themes, templates are made up of a collection of blocks. How the blocks are organized determines how a page is structured. 

Every template in a block theme uses a special type of HTML used just for WordPress sites. This makes it possible for site developers to modify - even create - a template without knowing the underlying source code.

For example, this is what it looks like.

<!-- wp:group {"layout":{"type":"constrained"}} →
<div class="wp-block-group">

A Block Theme uses the Site Editor, which is not found in a Classic Theme. The Site Editor is located in the Appearance section of the WP Admin.

Templates can be added to or modified without the knowledge of any code through the Site Editor.

There are currently about 500 Block Themes, any one of which can be downloaded for free from the WP Themes Directory. 

Classic Themes

Working with and modifying templates for a Classic Theme is much harder. It requires, at minimum,  knowledge of PHP and specifically how it is used in WordPress.  

Therefore, the only way to make changes to templates in a Classic Theme is by adding to or editing code. 

Since there is no Site Editor you may find yourself using the Customizer in the Appearance section to make changes. However, that’s hardly an equivalent experience.

Here’s what some typical code for a Classic Theme might look like:

<?php if ( $enable_skip_link ) { ?>
<a class="skip-link screen-reader-text" href="<?php echo esc_url($skip_link_url ); ?>"><?php echo esc_html__( 'Skip to content', 'hello-elementor' ); ?></a>
<?php } ?>

What each template does

Understanding any template’s purpose is key to learning how to work with WordPress beyond the most basic level. 

Regardless of the type, most WordPress themes have many templates in common.  

The following is a breakdown of templates used in typical Block and Classic Themes.  You will see differences with some of these templates depending on a particular theme. This is a source of confusion when trying to make sense of templates and how they work. 

The index file is the only template that is mandatory for every WordPress theme. 

Block Theme Templates

The above are the base four templates. You are very likely to see all of these in any theme. Note that the template and file names may also differ in a given theme, but their purpose remains the same .

Here are two automatic templates that are used by default when a search results page or 404 error page are needed. 

A theme may also come with these templates which are optional and very specific in nature. 

These templates are not necessary to build any type of site that does not include them.

The above is not a complete list of all the templates you may find in a theme. For instance, you may find a category.html template that will serve up blog hosts in an archive for just a single category. 

For a complete listing of the templates used in your WP Admin go to Appearance > Site Editor then choose Templates. Then choose Manage All Templates found in the left sidebar.

Classic Theme templates

As mentioned, templates in a Classic Theme serve the exact same purpose as those in a Block Theme. The difference is that these templates use PHP and can not be modified without the knowledge of how WordPress uses PHP. 

File names are essentially the same as you find in Block Themes with the significant difference being the file extension. For example, index.html is index.php and likewise, single.html is single.php.

To see which templates are available in a Classic Theme you need to see the file names themselves. We’ll get to that when we see where to find the template files. 

How do templates do their work?

When a site visitor calls up a page it’s the corresponding template that gets called into action early in the process of downloading that page. Suppose a visitor selects a link that refers to a blog post. 

The single.html (or however the equivalent file is named in a given theme) responds by asking the database to return to the site visitor's user agent (browser) all the assets (text content) that belong to that post. 

The template will also deliver all relevant (dependent) files of that post to the visitor. This means all CSS, JavaScript, image files and template parts that make up that post will be downloaded as well. 

Think of the template as the assembler of every page much like putting the pieces of a puzzle together. 

 How do template parts fit into the picture?

As long as we’re talking about puzzles, templates typically contain code that refers to other pieces, namely those that are repetitive, like headers and footers for every page.

Because WordPress is modular and developers don’t like to repeat their code, most templates are made up of several files - just like a puzzle. Since headers and footers are common to any kind of page, they have their own files, which template files refer to. 

How they operate is the same no matter what type of theme you are using.

Where do you find template files?

That depends upon which type of theme you are using, Block or Classic.

In both cases, the files are located in their matching theme folder. That is where all similarity ends.

In a Block Theme, the theme’s folder contains templates and parts sub-folders, where the HTML files are located.

In a Classic Theme, the template and template part files are not stored in subfolders. The PHP files are located in the root of the theme folder. 

What is the purpose of the template hierarchy?

This is a method WordPress uses to choose the correct template to display a page or post. In essence, WordPress looks for the most specific template that should be used to display a page or post. 

Here’s an example of how this works.

1. A visitor accesses a blog archive page that displays a specific category for each post. The specific template file being used is probably category.html.
2. Suppose, for whatever reason that file is not present. WordPress will use a more general template such as archive.html. The result will display all the posts of a blog (not just a specific category).
3. Finally, suppose neither of these template files are present? Index.html steps in and displays the generic block archive or some other page depending on how the site is set up.

How to discover what template is being used

For Block Themes, that’s easy. In the right sidebar of any Page or Post Editor there is an item labeled “Template.” Next to that is the name of the template being used. 

For example, in the blog archive page you may see the wood “Blog Home” as the template being used. 

Or a page may have “Page” as the template name. In all cases, you can select a template name and switch to a different template or even create a new one. 

Classic themes have no such way to discover what template is being used for a specific page. 

How to customize a template

With both types of themes, templates can always be customized with code. But as noted, a Block Theme is the only kind of theme where templates can be modified and created from scratch without code. 

In a Classic theme, a functions.php file is used to alter any template, among other things. In addition, a child theme is used to create new template files that will not be disturbed when the dependent parent theme is updated.

Summing up

Every type of page you’ll see on a WordPress site is “put together” by one template. This holds true no matter what type of page is downloaded to a user. 

A regular page, blog post, blog archive, category archive, search results and 404 error pages all have their own template that builds a page each time one is downloaded to a visitor. 

The purpose of any WordPress template remains the same no matter what type of theme is used.

 However, the ease with which WordPress templates are created or modified is dramatically different. Block Theme templates do not require code knowledge, while the opposite is true with a Classic Theme.  

Resources

• Templates
• Template Hierarchy
• Template Editor
• Template Part Block
• Block Patterns
• Comparing Patterns, Template Parts, and Synced Patterns (Reusable Blocks)