Due to popular request, I’ve created some (retina-ready) desktop background versions of this template hierarchy in light, dark, and blue. Enjoy!
You can also download a PDF of our WordCamp Chicago Template Hierarchy Poster here.
And of course, hop on over to Rami Abraham’s wphierarchy.com to see this graphic in action!
As a person with a passion for infographics and simplifying the display of data, I am always looking for ways to make information more clear. The world is filled with an ever-increasing amount of data, but this data is only useful to us if it is usable. A well designed infographic makes even the most complex ideas understandable, but a poorly designed infographic can make simple ideas needlessly confusing. It is this exact usability issue that plagues most infographics today, even within a place I seem to be spending an ever-increasing amount of my time: the WordPress Codex.
One of the most crucial pieces in understanding how to develop WordPress themes is the WordPress Template Hierarchy, the way that WordPress decides how to lay out the content based on what sort of content is being served. The Template Hierarchy, in combination with other cool functionality like Custom Post Types and Custom Taxonomies, is what really enables WordPress to have great granular content management, and create custom visual solutions for increasingly specific types of content. (for the non-geeks reading this: just trust me, it’s neat!) However, while the information compiled on the Template Hierarchy is great, the visualization of it can hinder its use due to its inability to be quickly scanned and understood. So, I decided to take it on as a personal project!
This isn’t the first time the Template Hierarchy has been revisited. The great folks at WordCamp Minneapolis put together a whimsical Template Hierarchy poster for their attendees (I have one!) that makes a great addition to any WordPress professional’s bulletin board, but the design focuses more on fun than functionality, targeting an audience that already has a deeper understanding of how it works.
My priorities in redesigning the WordPress Template Hierarchy to make it more useful as a quick visual reference were:
- Better quick scan left-to-right readability
- Ease distinguishing primary templates, secondary templates, and templates with a variable from the content types
- Cohesion with the WordPress brand, including colors and aesthetics
Let me know what you think! Feel free to use it, pass it on, and leave some feedback!