Edit & understand WordPress templates

Last update on: July 1, 2020

In this installment of our “Customize WordPress Themes Like a Pro” series of articles, we will edit the WordPress templates to customize any WordPress theme to your liking. You will learn what the difference between WordPress templates and WordPress themes is, what different templates there are and how to find out which template you need to edit in order to make a change.

The corresponding video further down in the article shows you 2 examples of how you can use the templates to customize the look of the blog page.

Table of contents of the article series:

What are WordPress templates or WordPress template files?

Many beginners as well as experienced WordPress users like to confuse WordPress templates with WordPress themes or use the two terms as synonyms. On the one hand, the term “themes” is not immediately familiar to every beginner, on the other hand, the word “template” is misleading, which is translated into German as a template. The assumption that both templates and themes must be templates is correct. However, there is a crucial difference between themes and templates.

What is the difference between WordPress themes and WordPress templates?

Put simply, WordPress themes are design templates for the entire website and WordPress templates are design templates for individual website elements or subpages. The WordPress template files are PHP files that make up the WordPress themes. A good starting point to familiarize yourself with the WordPress template files is the official theme manual.

The fact that the term template is used in different contexts in WordPress further adds to the confusion. A distinction is made between the following templates:

Page template – The page templates are layout templates that only determine the appearance of the “pages”. In the next post in this series of articles, we will take a closer look at these types of templates.

Example of page template: page-kontakt.php

Post templates – The post templates are still relatively new in WordPress (since version 4.8). This can be used to influence the appearance of “articles” in a similar way to “pages”. These are also part of the next article.

Post template example: post-fullwidth.php

PostType Templates – Of course, what works with posts and pages also works with other user-defined content types (post types).

Post Type Template example: portfolio.php

template tags – Template tags are snippets of code that ask WordPress to either fetch content from the database or load other theme files.

Template tag example: get_footer()

Template Partial – The WordPress themes usually also contain templates for parts of a website. The so-called template partials are therefore components of other templates, such as page templates. This can e.g. For example, the sidebar can only be changed in one place and does not have to be adjusted on every subpage that contains a sidebar.

Example of template partials: sidebar.php

Sample WordPress template

Let’s add one more example here, hopefully making the difference between the different template types clearer. If I e.g. For example, if I open the page.php file and enter the get_header() function in this file, I tell WordPress that the header.php file should be entered here. In this small example, the page.php file page template, the function get_header() a Template tag and the file header.php a Template Partial.

template hierarchy

Depending on which content is requested by the user, WordPress uses the template hierarchy to decide which template should be used for the display.

WordPress Template Hierarchy (Source: https://developer.wordpress.org/themes/basics/template-hierarchy/)

Example: How WordPress uses the template hierarchy to display content?

The template “singular.php” is used e.g. B. used when the single view of a post is to be displayed and the template “single.php” is not available in the active WordPress theme. However, the “singular.php” file is also used to display a (sub)page if the respective WordPress theme does not contain the “page.php” file.

If the template “singular.php” is not available in the theme either, the “index.php” file is used for the display. This is also the reason why every WordPress theme must consist of at least 2 files: index.php and style.css.

And because I think that a topic is best explained using examples, here is a slide from my WordPress training course that shows the use of the various templates using 3 subpages as an example.

Sample WordPress template files

This is really just an example, since the home page z. For example, the template home.php or the contact page could also use the template page-24.php, where the number 24 would then stand for the page ID.

How to find out which WordPress template you need to edit?

Especially with larger themes it can be difficult to find the right template that needs to be edited. The Show Current Template plugin always shows you the template that the currently viewed page is using.

Caution!

When you copy the template files into your child theme folder, it is important that the folder structure in the child theme matches the folder structure in the parent theme.

You can also find out how to correctly transfer the folder structure to your child theme in the following video.

Edit WordPress templates using the example of the blog page

By loading the video, you accept YouTube’s privacy policy.
Learn more

load video

Always unblock YouTube

Edit WordPress templates using 2 examples and presentation of the WordPress template hierarchy.

After a brief introduction to the world of templates, also using the template hierarchy, I will show you two examples of how to edit WordPress templates in this video tutorial:

Example 1: Display only an excerpt of the posts (excerpt) or the complete post content on the blog page

Would you like to display the content on your Blog Page differently? In the video, I use the Twentyseventeen Theme to show you how you can display the posts with complete content or just a short excerpt.

Example 2: Show thumbnails of posts on the blog page

Is your theme not showing the thumbnails on the blog page? No problem, with a little copy/paste into the right template you can display the thumbnails in any theme.

Conclusion

Even though this post is aimed at advanced WordPress users, it’s amazing how easy it is to customize any WordPress theme once you dig a little with the template files. So if your favorite WordPress theme doesn’t offer a certain setting and you can spend some time and patience, it’s worth taking a look at the templates. At least before you hire an expensive WordPress developer to customize your website.

Outlook on part 6

In the next article we will look at page templates in detail. This allows different page layouts to be implemented, e.g. B. a layout over the full width or hiding certain template partials such as the header, which also gives you a new design for the subpage.

Article recommendation: Customize WordPress Theme Part 6: Create WordPress Page Template

GO TO ARTICLE