On today’s episode, we are going to talk about Word Press Template Hierarchy in themes, right here on Your Website Engineer Podcast, Episode #345. Hello, everybody! Welcome back to another episode of Your Website Engineer Podcast. My name is Dustin Hartzler and today we’re continuing the discussion on more advanced WordPress topics, and today we’ll be diving into the WordPress Template Hierarchy. We’ll talk about that in just a few minutes. The first thing that I want to let you know about is three announcements. It’s kind of a slow week here in the WordPress space, but I do have three announcements that are probably worth mentioning.

So, the first one is an Automattic joins Amazon, GitHub, Mozilla, Reddit, and Twitter in July 12th protest against FCC attack on Net Neutrality. That’s a mouthful. That article is over on wptavern.com. Basically, what’s going to happen here, you’re going to see this a lot today, the day that this podcast releases Wednesday, July 12th, that there are a lot of websites that are putting up banners and doing things on the website to make sure that people are aware of the Net Neutrality issue, which means that people can communicate freely online without being prohibited by internet service providers.

If you go to WordPress.com, sites are going to have a little spinner. It’s going to act like it’s loading. Basically, what’s happening is if the ISPs get involved with this, they can slow down everybody’s web pages to a crawl, or their website’s or their browsers’ speeds to a crawl, or even their network connection. If you want to participate on this on WordPress.com, if you’re listening to this on the release date, there is a widget that you can turn on and it will automatically start working. If you’re at a self-posted site, you can participate in this internet-wide day of action to save Net Neutrality by using the Internet Defense League cat signal plugin or Fight for the Future alert plugin.

Both of those will have a pop-up that will display on your website. That information is very timely, so if you’re listening to this on the release date, you can participate. If not, I guess better luck next year. We’ll talk about it next year. I feel like it’s always on a Wednesday. The show always releases on a Wednesday. I don’t have a lot of opportunity to share. Next year, I’ll try to keep an eye out and see if I can share that information a little bit sooner.

Another piece of announcements that I want to share with you is WP Campus 2017 will be streamed live for free. There’s a link to the show as well. It’s happening this weekend in Buffalo, New York. It’s mainly focused on WordPress for higher education. If you’re interested in streaming these, you can see this and the stream starts on Friday, July 11th at 9:00am, so just in a couple days.

Lastly, another piece of news and you know it’s a slow news day when you’re going to highlight an article on “The Secret Lives of Pets of WordPress”. Basically, there’s a whole blog post of all these pets from – not a high-profile, but people that are involved in the WordPress space. We’ve got dogs, we’ve got cats, and even a fish or two. These are some animals that you might want to check out. That article is over on torquemag.io, and you can find out more by looking in the show notes for Episode 345.

Lastly, before we get into the beat of the show, I want to talk about a plugin, because there are more than 15,000 in the WordPress repository. There’s always a cool plugin I want to share with you each week. This is a new one. I’ve never seen this one before, but it’s called Meks Quick Plugin Disabler. The main purpose of this plugin is to quickly find out if a recent issue you’re having on your website is related to one of your currently active plugins. It’s made for developers or soft-support engineers, even WordPress uses that just want to get in and start doing some troubleshooting.

Sometimes after installing an update to a plugin, your site breaks and strange issues may happen. This plugin gives you a link at the very top. It says, “temporarily disable all active plugins.” It’s a huge saver, especially if you got a ton of plugins and it’s nice that you can deactivate all of them and you can turn them all on without having to remember, “Which ones did I have on and which ones did I have off?” So, that’s Meks Quick. M-E-K-S Quick Plugin Disabler. You can find it on the show notes or in the WordPress repository.

Today, we’re going to dive in and talk about the WordPress Template Hierarchy. We’re going to talk about the what, the why, and the how, and just break this down and talk about it. I want to preface our conversations in the fact that this is a developer-level topic. This is a little bit more advanced that the normal, Your Website Engineer Show. If you are not interested in learning how the themes work or even how to build a theme or things like that, then this is a podcast you can go ahead and skip.

This month, we’re just kind of focusing on advanced topics, and just talking through them and working through them a bit. I do recommend, though, if you ever have an inkling to just want to know how WordPress works a little bit better, this would be a good conversation to just tune in. You might miss some of the topics or some of the ideas might go right over your head, like they do when ICEN and developer talks at work camps. But you might pick up something and might be very, very impactful that you may learn and pick up. Let’s go ahead and dive in.

The WordPress Template Hierarchy is one of the most influential things that a WordPress-themed developer uses. You may need to understand a little bit of this as a user; probably not so much. Plugins need to interact with it a little bit, but generally it’s all about the theme. It’s about that way the visuals in your website work. The Template Hierarchy determines which of the files and the theme is used at a given time. The Hierarchy is a foundation upon what WordPress themers make their art. It’s why the archive page of a certain category looks different than the archive page of this category. It’s why all of the posts by this author have this background, and all the posts by this author have this background.

Let’s go ahead and just dive in and talk a little bit about what it is. The Template Hierarchy is the choice structure WordPress uses to determine the file and your theme that will be used to generate the full, final HTML for a page on your WordPress website. WordPress needs to know how to interact with a theme. It would be possible somebody could write different types of logic in complex PHP for the theme to explain to WordPress how to interact with it. They could have PHP classes matched with WordPress to find interfaces each theme would need to respond to, but it’s complicated. It’s complicated to read, it’s complicated to explain, and it’s complicated to do.

That’s the point of the Template Hierarchy. For WordPress to successfully use different themes, but also make it easy to create and modify themes, a simple solution was needed. That’s why the Template Hierarchy was created. Like I said, it is the choice structure that WordPress uses to determine what file will be used to build a WordPress page on you site. If WordPress needs to show posts or any kind of content based by specific author or user on a WordPress site, it has a couple needs. First, it needs to be able to make it easy for somebody making or modifying a theme to customize a page, and it needs to make sure that if no customizations are needed, it’ll have something to use.

To accomplish this, the Template Hierarchy will define different files on a currently active there. If those files exist, they’ll use them, if don’t, they will keep moving on. Let’s talk through a real-world example here. If we’re looking for a template to present all the posts of given author, and let’s make his name “Dustin” just because. It has a numeric ID of three, then WordPress needs to know what file from your current theme to use.

Here’s what it would look like: Is there a file in the folder called “author-dustin.php”? Does that exist? If it does, it will use that file. If not, it’s going to go to “author-3.php”. Does that exist? No? Okay. Move on to the next one. Does “author.php” exist? No? Okay, next. “Archive.php” No? Does “index.php” exist? Yes! It took four nos before getting a yes on that index.php. That’s kind of how it works. WordPress goes in – I’m going to create this page, and for this example, it would be YourWebsiteEngineer.com/author/dustin. That’s the URL structure. Okay, this is the file format that it’s going to look for when it creates that page.

First, it’s going to look at author, dash, the name of the author, then author, dash, the number ID of that author, then author.php, then archive.php, then index.php. The first one is the most specific and it gets down to the most basic or the most generic. That last one was index.php, and if you don’t have index.php, then you don’t actually have a WordPress theme. WordPress theme needs a CSS file, a style that’s CSS, and an index.php. That’s why it’s the last fallback. It looks a little bit different when you’re using a child theme.

A child theme is just an easy way to modify a parent theme so you can create your customizations without being overwritten by the parent themes if they ever get an update or they make changes to their template. The way that it’s going to work for the same example is: First, we’re going to look in the child theme for author-dustin.php. If that’s not there, then go to author-dustin.php in the parent theme. No? Then go to author-3.php in the child theme. No? Go to author-3.php in the parent theme. This is going to move down the line the same way. It’ll check first the child them and then the parent theme, then the child theme, then the parent theme, until it finds a template file that it can use.

Once it gets to that template file – so in this case, maybe it gets to author.php, it’s not going to look any farther. It’s going to start and it’s going to use that template file to generate the HTML for that website. The most important to remember here is the child theme is always checked first. Anything that’s in a child theme will always beat those in a parent theme, especially where the Template Hierarchy is concerned.

So, why should we understand the Template Hierarchy within WordPress? Well, you can’t create a theme without it and it’d be really hard to make modifications to a current theme or build a child theme without knowing how to do this. The best way that I found to learn is to use one of these two plugins. One is called Witch Template and the other one is called Show Current Template. My favorite is Witch Template, and both of these do the same thing. Basically, what you do is you can load a page on your WordPress site and on the front end, you look at the admin bar at the top, and it will show which page template that page is using.

This is super helpful when you want to make modifications and you want to see which page is it using. Is it using the author-3.php? Is it using archive.php? Is it just building from the index.php? It’s really, really helpful, and this is a – either one of these plugins is a really great tool to help you learn and understand, especially if you’re getting into the theme development and you’re spending some time building out the theme and making some modifications and customization. These plugins are critical to your WordPress toolbelt when you’re getting ready to build that theme.

I can spend a lot of time in this podcast episode just talking through all of the different types of pages that are out there. There’s the single.php and the page.php and the archive.php, and then you got author and category and date and tags and attachments. There are tons of these pages out here. I will put an image in the show notes, so you can kind of look through and see exactly how this works. It’s way too complicated to explain via podcast. I tried recording this once and it just didn’t work very well. Just know that most of them follow the same structure as the author. So, in the author case, it was author and then dash, the username.php.

The next way was author, dash, and then the ID of the user. Then, the next one was just author. If you’re talking category, it would be category-podcast.php, then category-3.php, if the podcast was the third category. Then, just category.php, then archive.php and index.php. All of them have a very generic – it’s mostly built into your code into your theme already, and if you need to make them more specific, then that’s the case to do that.

For example, if you go in and look at – I don’t know off the top of my head, there’s differences in yourwebsiteengineer.com, but some of the pages, like the webinar archive page, looks different than the all-podcast page, because I made different templates within the categories of webinars versus podcasts, so that’s something else that you can do. I will, in the show notes, put this visualization of an article so that you can see exactly how works. It’s a little bit cumbersome to figure out initially, but I do recommend just taking a lot at it and then taking a look at which template or Show Current Template.

Put one of those and install it onto your WordPress website and spend some time just clicking around and show what pages are being built. Like, if you go to a single page, what template file is being used? Or, just go to your contact page and what page is being used? I think this will really kind of cement in and just help you start understanding where these template files and where your pages are being generated from.

That’s the advanced topic I wanted to share with you this week, a little bit about the WordPress and theme hierarchy. Again, it’s a complicated topic. We can talk about it a lot, but it just would be way too confusing via audio. Look for the show notes for Episode 345. I’ll have some brief notes and an image so you can see how that whole Template Hierarchy architecture works out. That’s what I want to share with you this week. Take care and we’ll talk again next week. Buh-bye!