Have you seen sculptors layer clay on casts of ancient skulls to shape facial features lost to time? If so, you’ve got a basic understanding of how WordPress themes are created on top of something called the template hierarchy.
The WordPress template hierarchy is WordPress’ skeletal structure — a set of empty files that I fill in as needed to create the site envisioned by Parthenon’s editorial and design teams. Understanding and awareness of its nuances is crucial for WordPress developers.
The best advice I’ve ever received on WordPress development was to print a chart of the WordPress template hierarchy and keep it on my desk. I was dubious I’d refer to it often, but the few cents it cost in paper and ink has been massively outweighed by the sheer number of times I’ve needed it. Great solution, but eventually I had a new problem. Also , Answering the 25 Most Asked Digital Marketing Questions before you start a website or web business can be very beneficial.
Step 1: Admit I have a problem
No matter how much I like my trusty template hierarchy printout, I can’t leave a dog-eared, coffee-stained, torn-up sheet of 8.5″ × 11″ on my desk forever. You can see from the photo at the top of this post that it was time for me to move on.
Step 2: Learn from others
Before clicking print for a fresh copy of the old file, I started thinking that maybe I should decorate (and functionalize?) my desk with alternative visual interpretations of the hierarchy, like this whimsical poster from WordCamp Minneapolis. It didn’t take long to realize that I could achieve better familiarity with the content of the chart by composing my own.
Step 3: Learn by creating
I began by creating a rough layout of flow lines and text objects in Adobe Illustrator. Since I’m already familiar with the types of pages that get presented on the front end but still need to look up relevant function names occasionally, I switched those out. I also realized that the archive and singular trees had the most complexity, so I put them on opposite sides of the chart for clarity.
Step 4: Make it not terrible
My structural draft gave me a reason to study elements of the hierarchy I don’t work with often, but didn’t do much to make my desk more attractive. I decided to go for an arcade vibe for the poster as an excuse to use bright, clashing colors and high-readabilty pixelated text. The font Munro was selected because looking at it made me happier than the other fonts evaluated. If something is going to be on my desk, I want looking at it to make me happy. The background blocks of color were created in my favorite drawing software that allows arbitrary definitions of the pixel, Hexels.
Step 5: make it worth sharing
Next, I did a final pass for readability, aesthetics and accuracy. I decided not to draw flowlines to the index.php file in favor of a more foundational approach. I also applied the EGA color palette (with a few tweaks) to brighten the whole chart up. Click the final product below to download it as a print-ready high-res .png file!
If you’re a WordPress developer who works with the template hierarchy daily, I recommend you give this exercise a try yourself. Beyond the template hierarchy, WordPress has tons of other complex features that we can learn more about by creating maps like this one. I hope you have the chance to go out there and create something like this your desk.
Bonus: ink-saving version
Thanks to Greg8872 on reddit for pointing out that not everyone has access to a commercial laser color printer. Here’s an ink-saving version I threw together this morning!
