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

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

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?

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/

Newsletter

Sign up to receive email updates and to hear what's going on with our magazine!