How Do WordPress Themes Work?
If you’ve ever wanted to modify a WordPress theme, or create your own, you first have to understand how themes work.
In the early internet days of simple HTML web pages, things were much simpler. If you were looking at a page called home.html, and you want to modify it, all you had to do was open the home.html file and make whatever changes you want.
WordPress is an incredibly powerful and flexible tool for creating a website, but there’s a bit of a trade-off when it comes to complexity. A WordPress theme isn’t anywhere near as straightforward as plain HTML.
A page on a WordPress website isn’t static; it’s dynamic. It’s created on the fly every time it’s visited, built from bits and pieces pulled from separate files and from your blog’s database.
So when you want to make changes to your WordPress website, how do you know which file to make changes to when each page is made up of so many files and bits of data?
While this can vary from theme to theme, a basic understanding of how WordPress themes work will take you a long way towards understanding what files you have to modify.
Here’s a simple overview of how themes work for beginners. With this knowledge under your belt, you can more easily understand how your themes work, how to modify them, and even how to create your own.
How WordPress builds your blog dynamically
Before getting into how WordPress themes work, we’ll need to go over how WordPress works as a whole:
- All of your blog’s unique information (including your site name, your blog posts, and every single comment) is stored in a MySQL database.
- That information is retrieved from the database using the programming language PHP.
- Then, the retrieved information is displayed via your theme’s template files, using HTML and CSS.
WordPress theme template files are written in PHP and HTML, and end in the file extension .php.
HTML is the coding language that structures every single web page on the internet, and CSS is the styling language that makes it look nice. (Generally, the bulk of your CSS styling information is stored in separate files, ending in .css.)
How theme template files work
To complicate things a bit more, each theme template file isn’t directly equivalent to the content on a single blog page.
A single page on your blog is usually put together using several template files. In most themes, the header, footer, and sidebar are stored in separate PHP files (aptly named header.php, footer.php, and sidebar.php).
Other template files will include (or “call”) those template files to assemble them into a single page.
The WordPress loop
The main content of a page or blog post is displayed using what’s called The Loop, a PHP query that retrieves the page content from your database.
The Loop is the main process of WordPress. You can read the gritty details about it in the official codex: The Loop in Action.
A template file for every need
The way WordPress is designed, there are TONS of possible template files that can be included in themes. Using different template files, you can display different pages in different ways: for example, your author archive pages might have a very different layout than your blog posts.
But you don’t have to use all those different possible template files.
The only template file that’s required to create a functioning WordPress theme is index.php. As long as you have that template file, your theme will work.
Other than index.php, you can pick and choose whatever other template files you’d like to create for your theme.
The WordPress template hierarchy
With all these possible template files, and the ability to pick and choose which ones to include in your theme, how does WordPress know which files to use for which pages?
The answer lies in the filenames, and in the WordPress template hierarchy.
WordPress is designed so that it will look for specific template filenames to display certain pages on your blog. If it doesn’t find any such filename in the theme, it will fall back to a more general template file, all the way back to index.php. If no other template files are found, it will just use index.php to display every page on your site. (That’s why index.php is required for every WordPress theme.)
For example…
Say a visitor to your blog reads a post by a guest author, and clicks on that author’s name to read more posts by them. This takes them to the author archive page for your guest author.
In order to create the author archive page, WordPress will first check and see if you have a file to display a special template just for that author, named author-guestname.php or author-id.php (where “guestname” would be the author’s username, or “id” would equal their unique ID number).
If it doesn’t find a file with that name, it will next look for a general author archive template, named author.php. This file would be used to display all author archives on your site, not just that individual author’s.
If your theme doesn’t have an author.php file, WordPress will next look for a file name archive.php. This file would be used to display all your archives, including archives for specific tags or categories (unless there are more specific templates for those, like tag.php or category.php).
Finally, if none of those template files exist in your theme, WordPress will use the index.php template file to display the author archive page.
(All these queries that WordPress performs to build each page is why caching really helps to speed up your site.)
How to figure out what template file you’re looking at
If you want to make modifications to your theme template files, you’ll have to figure out which template file is being used to display the page you’re viewing.
With most themes, you can easily do this with a template hierarchy flowchart.
In the flowchart, you start at the left with the type of page you want to display. Then, follow the flowchart and stop at the template file that exists in your theme. That’s the file that will be used to display that page.
You can take a look at your theme’s files:
- From the WordPress dashboard, under Appearance > Editor. Your theme template files will be listed on the right, under the heading “Templates.”
- Using your web host’s file manager from your control panel.
- Using FTP software.
The third option is the best and safest way to make any changes to your site files.
Be sure to backup your website and make copies of the original template files before making any changes. And consider creating a child theme instead of modifying the original theme, so that you won’t lose your customizations when your theme updates.
Now you’re ready to roll!
Now that you understand how template files work, you’re well on your way to becoming a WordPress pro! With a basic understanding of how themes work, you can more easily modify your themes, and create new templates – or even your own unique theme.
But if you want an easier way to tweak CSS on the fly without messing with code, check out this tutorial.
