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:
- 21 November, 2010 @ 5:48 [Current Revision] by michael castilla
- 5 August, 2010 @ 4:51 by Ryan Imel
- 12 April, 2008 @ 11:52 by Ryan Imel
Nice, Much more appealing to use and I will actually read it now
Keep up the good work.
Perfect. Will be using this as I code WordPress alot. Looks really nice as well. Thanks!
Snazzy. You should put this on the WordPress codex to replace the current yuckier one.
[...] aufruft und was passiert, wenn das entsprechende Template nicht vorhanden ist, für den gibt es hier bei WPCandy eine übersichtliche Grafik. Das ganze ist eigentlich hier schon bestens beschrieben und es hat [...]
What a great resource, thanks for taking the time to make it!
Looks much better Mike
Nice idea.
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.
[...] első a WPCandy pofás Template Hierarchy ábrája (a WP működési struktúrája gyakorlatilag), amely a [...]
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?
Nice one Mike – handy to have around
Looks very “Help Sheet” like may I add?
Keep up the good work.
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!
[...] a useful diagram that shows the hierarchy of a WordPress [...]
[...] un interessante diagramma che mostra la corrispondenza tra le pagine del blog ed i files del template, molto utile per i [...]
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
[...] arbeitet WordPress eigentlich? Die Grafik von Michael Castilla zeigt ein schöneres, schwarzweiss Diagramm als der eigentliche Grafik auf der Codex Seite von [...]
[...] WordPress Template Hierarchy Diagram A must for would-be WP designers. (tags: WordPress templates hierarchy diagram) [...]
[...] Visit Article [...]
[...] La hiérarchie des templates WordPress en une seule image ! Très pratique ! [...]
What about the attachment template? some are missing but really helpful.
[...] WordPress Template Hierarchy Diagram geschrieben am 02.05.08 um 01:56 Uhr von: BlogPimp [...]
[...] En WP-Candy han elaborado una imagen de ejemplo que ilustra perfectamente la jerarquía de los archivos dentro de una plantilla de WordPress. [...]
[...] WordPress Template Hierarchy Diagram (tags: wordpress) [...]
[...] and how the WordPress template files fit together like a puzzle… Might come in handy Click here to visit >> No Comments, Comment or [...]
Is this same for WordPress 2.5 also??? Thanks.
[...] WP Template Hierarchy Diagram http://wpcandy.com/articles/tutorials/wordpress-template-hierarchy-diagram.html [...]
Thanks
.. This helps alot!
[...] Si quieres saber como funciona la jerarquía de páginas en WordPress, mira este diagrama. [...]
[...] http://wpcandy.com/articles/tutorials/wordpress-template-hierarchy-diagram.html [...]
I get page not found error when I click on the hierarchy image. Where can I get this diagram?
Hey, just wanted to let you folks know that the link has been fixed. Sorry for the downtime!
Hi Michael
A great example of taking information and presenting it in a way which is both interesting and understandable.
Now why couldn’t the Codex guys do that?
Remember, we’re all the codex guys
. Anyone can contribute to it, and it’s a cool way to contribute and share some knowledge too.
Fair comment Ryan.
Great post for people who want to understand the technical structure behind WordPress Templates. I am assuming this is for people that are building their own templates, or aspire to do so.