WPCandy

If you’ve ever developed a WordPress theme, you’re (hopefully) familiar with the Template Hierarchy and how the WordPress template files fit together like a puzzle.

With WordPress, you have pages that display the content you put on those pages. To style the content on these pages, we use different files in a WordPress theme (duh). But which files are assigned to which pages? That’s where the Template Hierarchy comes in. Depending on what templates are available in the theme, different files will be assigned to certain pages.

“WordPress looks for template files with specific names in the current Theme’s directory and uses the first matching template file listed under the appropriate query section below.” - WordPress Codex

Anyways, there’s no better way to understand the WordPress Template Hierarchy than to see it visually. If you’ve ever gone over to the Template Hierarchy page of the WordPress Codex and scrolled down a bit, you will notice a Template Hierarchy visual which basically explains how the template hierarchy works.

No offense, but this visual isn’t the most appealing. Sure, it gets the message across, somewhat clearly, but a little bit of eye candy wouldn’t hurt, right? So I’ve made a little something for you guys.

Now, I can’t take credit for coming up with the actual structure of the diagram, I simply redesigned the existing one, in hopes of more people using it and learning from it. So with that said, if you’re learning to develop WordPress themes, make sure you know how the WordPress Template Hierarchy functions!