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. Pingback: WP Template Hierarchie « awakening

  7. Pingback: links for 2008-04-26

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

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

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

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

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

  13. Pingback: WP Template Hierarchy diagram

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

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

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

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

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

  19. Pingback: Pretty WordPress Template Hierarchy Diagram

Leave a Reply

Please note that WPCandy is a moderated community.

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>