WordPress Template Hierarchy Diagram


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!

35 thoughts on “WordPress Template Hierarchy Diagram

  1. Pingback: Die Wordpress Template Hierarchie

  2. Pingback: élet és könyvtár » Blog Archive » Vasárnap reggeli WordPress és dizájn linkek

  3. 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!

  4. Pingback: WordPress Weekly News, 15-2008: security and much more

  5. Pingback: Ultime dal fronte WordPress 16-2008: Sicurezza ed altro

  6. 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 :)

  7. Pingback: WP Template Hierarchie « awakening

  8. Pingback: links for 2008-04-26

  9. Pingback: NETTUTS - Web development tutorials and links - Best of the Web - April

  10. Pingback: Best of Avril 2008 : le meilleur des liens et ressources

  11. Pingback: » Cheat Sheet: WordPress Template Hierarchie » BlogPimp

  12. Pingback: Jerarquía de Plantillas en imágenes | Ayuda WordPress

  13. Pingback: Skylog » Blog Archive » links for 2008-05-03

  14. Pingback: WP Template Hierarchy diagram

  15. Pingback: Resources for the uninspired or busy Web DesignerSoIt’s « Web Design for the Civil Defense Bar

  16. Pingback: 5 Ideas para hacer temas ágiles en WordPress | Dupermag

  17. Pingback: Wordpress Template Hierarchy Diagram ht… « wordpressmaster tutorial

  18. 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?

  19. 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.

  20. Pingback: Pretty WordPress Template Hierarchy Diagram

Comments are closed.