Pretty WordPress Template Hierarchy Diagram

If there has been one graphical element that has seen some changes over the years, it’s the template hierarchy diagram. The original diagram is located on the Codex and while it provides a graphical representation as to how Templates work within WordPress, it’s not pretty. I remember in 2008 when Michael Castilla took the original concept and simply added some style to it. A few years later, Chip Bennett added detailed information to the diagram. Just last month, Michelle created a colorful version of the diagram.

That brings us to the current day where Rami Abraham has taken Michelle’s colorful design and has not only been given its own domain name, but has also made it interactive.

WordPress Template Hierarchy

The core information remains the same but now if you click on any one of the various parts of the diagram, it will take you to the appropriate Codex page. Between the various diagrams and the Codex, there is no way of not knowing what goes on within the WordPress template process.

Which template hierarchy resource do you find the most useful?


7 responses to “Pretty WordPress Template Hierarchy Diagram”

  1. Websense is tagging as “Potentially Damaging Content,” so I’ll have to check it out from a different network, but it sounds awesome and incredibly helpful.

    • That’s interesting. There is nothing wrong with the website. I’ll have to let rami know to see if there is some sort of issue going on

  2. This is great. I often link Chuck’s image directly to developers that I work with, so having a site like this with the links available to the codex is fantastic.

  3. @Brian Krogsgard – Do you mean Chip and not Chuck? I can edit the comment for you if you’d like.

    @Toby Cryns – Yes I have. In fact, I’ve reached out to Josh and it turns out they have just a few of those posters still available. I’m hoping to get one for myself and to pass one along to the WordPress museum section at the new Automattic office building.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: