“All The Word That's Fit To Press.”
A WP Engine

WordPress Theme Template Hierarchy Chart

Although WordPress wasn’t built with native theme capability out of the gate it was obvious over time that a templating system just made sense.

And an entire industry was born, seemingly overnight (and it keeps getting better and better).

Well, in an effort to increase the usefulness for anyone interested in building designs for WordPress, Michelle from Marktime Media redesigned to make it easier to read and much more aesthetically pleasing. An interesting take, for sure:

Template Hierarchy - Click for Larger View

Template Hierarchy – Click for Larger View

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.

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!

I’m glad she made a go at it. Thanks Dusty for the tip! Her priorities were as follows with this project:

  • 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

What do you think of this implementation? Have any thoughts?

More WordPress News From Torque:
  • http://edwardcaissie.com Edward Caissie

    I know a lot of work went into the latest version of the Template Hierarchy found on the WordPress Codex (which followed the original graphical look) but I agree this one does provide a more aesthetically pleasing look and potentially easier left-to-right scanning as well.

    Has this “info-graphic” been (at least) referenced as an external source on the WordPress Codex page?

  • http://www.wptavern.com Jeffro

    Which do you prefer, this new one or the revised original via Chip Bennett?


  • http://beyn.org/ Barış Ünver

    Best one I’ve ever seen.

  • http://marktimemedia.com Michelle

    I like the super-detailed one that Chip did to include all the extra information. I thought about trying to include all that but decided to keep it simple.

    I’ve got a couple tweaks I have to do to this one (most notably fixing the $taxonomy-$term one to be accurate) plus create a print-ready PDF, so I’ll put it on the original entry when it’s done (and send over a replacement image for this article)

    • http://www.chipbennett.net/ Chip Bennett

      As for actual content: as far as I can tell, the two are exactly the same. The main differences are that you’ve added pretty colors, and straightened out the diagonal lines, for legibility.

      In the one I did, I tried to keep it simple: the darker the color, the farther down the fallback – or, said more clearly: the lighter the color, the more specific the template file. White represents the template context, and black represents each of the base template files. The varying shades of gray in-between represent more (or less) specific template files. But, the grayscale isn’t perfect.

      Pretty colors are pretty. :) I would love this one more, if there were some legend indicating what each color represents.

      And as far as I’m concerned: anything that helps teach more developers (and users) how the template hierarchy works is a very good thing. So, thanks for this!

      • http://marktimemedia.com Michelle

        Pretty much exactly this! I’ll be sure to include an actual legend in a final version. Are there specific “names” for the specific levels of templates? Basically I just think of them in my head as “primary” “secondary” and “with a specific variable” but I’m sure there are real names people call them. And of course, I never would have been able to make this one if you hadn’t done 90% of the work turning it into something visual in the first place!!

  • http://www.enthuse.me/kalee Kalee

    It does look a lot nicer than Chip’s version. A bit more summarized as well, probably easier for new designers to follow and a couple fixes.

  • http://circlecube.com Evan Mullins

    Very nice! Thanks for making this.

  • http://rami.nu Rami Abraham

    I *love* this visualization, so much so that I spent a night absolute positioning divs to make an html/css version of Michelle’s design: http://wphierarchy.com/