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!
Post Revisions:
- 5 August, 2010 @ 4:51 [Current Revision] by michael castilla
- 12 April, 2008 @ 11:52 by Ryan Imel
Posted April 12, 2008
Lewis said:
Nice, Much more appealing to use and I will actually read it now
Keep up the good work.
on April 12, 2008 at 12:01 pm
Luke said:
Perfect. Will be using this as I code WordPress alot. Looks really nice as well. Thanks!
on April 12, 2008 at 12:05 pm
Joshua Goodwin said:
Snazzy. You should put this on the WordPress codex to replace the current yuckier one.
on April 12, 2008 at 12:05 pm
zinni said:
What a great resource, thanks for taking the time to make it!
on April 12, 2008 at 2:32 pm
Michael Cromarty said:
Looks much better Mike
Nice idea.
on April 12, 2008 at 4:53 pm
Brady Valentino said:
I’ve never used the hierarchy diagram before, but looking at your’s it’s way better than the one that the WordPress dev team came up with.
on April 12, 2008 at 8:37 pm
CincauHangus said:
very simple and nice! one question though.. is there a category-6.php file or category-6.php is specific to that cat-id=6?
on April 13, 2008 at 2:10 pm
Jimmy G said:
Nice one Mike – handy to have around
Looks very “Help Sheet” like may I add?
Keep up the good work.
on April 13, 2008 at 7:47 pm
Doug said:
Definitely a visual improvement over the original, which was always useful. But like the original, this one still doesn’t include the Attachment page hierarchy.
Personally, I think all those “if doesn’t exist” lines are distracting, but I guess the diagram would be confusing to newcomers without them.
Good work overall!
on April 14, 2008 at 11:14 am
Cobus Bester said:
Nice one! I’m printing this and keeping it close by for reference as I code.
Thank you for taking the time to create a helpful resource!
Keep rocking
on April 21, 2008 at 6:31 am
Benji said:
What about the attachment template? some are missing but really helpful.
on May 1, 2008 at 1:33 pm
Omkar said:
Is this same for WordPress 2.5 also??? Thanks.
on May 9, 2008 at 6:33 am
Omar Dolaimy said:
Thanks
.. This helps alot!
on March 26, 2009 at 12:44 pm