Redesigning the WordPress Template Hierarchy

UPDATE:

Due to popular request, I’ve created some (retina-ready) desktop background versions of this template hierarchy in light, dark, and blue. Enjoy!

 

template-hierarchy-retina-light template-hierarchy-retina-dark template-hierarchy-retina-blue

 

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!

47 Responses to “Redesigning the WordPress Template Hierarchy”

  1. Dusty

    Awesome work Michelle! Love how you made it easier to understand. It’s always been a great tool in the WordPress codex, but obviously could use the work to make it more usable.

    Reply
  2. Dan

    Great post! Very useful. Is there a way to add a link to download a higher resolution version for reference? The type is really small.

    Reply
  3. Aaron Holbrook

    So awesome to see someone taking a fresh, aesthetic approach to something that’s so very important (and still very confusing to many people)!

    Great job Michelle! Hope to see this on the codex soon! :)

    Reply
  4. Jean-Francois Arseneault

    Wow, finally something I can print and give to my team that actually looks GREAT! Nice job!

    Reply
  5. Serverpress

    Awesome stuff Michelle! But then, what else would we expect?

    Reply
  6. wycks

    Just a heads up , the infographic is not as accurate as the codex one because yours does not show the actual load order.

    The 404 page is first, then search, then tax, …etc, etc.

    You can see the load order here: http://core.trac.wordpress.org/browser/tags/3.5.1/wp-includes/template-loader.php#L0

    Reply
  7. David

    Thank you for doing this! Hopefully once all the bugs has been worked out it will replace the one in the Codex :)

    Reply
  8. The Weekly WordPress News, Tutorials & Resources Roundup No.31 - WPLift

    [...] Redesigning the WordPress Template Hierarchy – 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. [...]

    Reply
  9. WordPress 模板层次结构信息图 | 飞飞默客

    [...] 我们知道 WordPress 主题有很多文件,比如:index.php,single.php,archive.php 等,WordPress 会根据不同类型的内容决定使用模板文件,这个就是 WordPress Template Hierarchy(WordPress 模板层次结构),如果结合 WordPress 的高级功能,比如 WordPress 自定义日志类型,自定义分类模式等,这个模板层次结构会非常复杂。虽然 WordPress 官方整理了模板层次结果图,但是还是显得非常复杂,所以 Marktime Media 重新设计了 WordPress 模板层次结构信息图(点击打开大图): [...]

    Reply
  10. June 2, 2013: Weekly Roundup of Web Design and Development Resources

    [...] Redesigning the Template Hierarchy: Thanks to my friend Michelle Schulp at Marktime Media for creating this infographic to better understand the WordPress template hierarchy. Well done, Michelle! [...]

    Reply
  11. Rami Abraham

    Hi Michelle, I like this a lot, and made an html/css version of it here (with some light embellishments): http://wphierarchy.com

    Reply
    • Marktime Media

      Wow, how cool is that?? Don’t suppose you’re coming out to WordCamp Chicago are you? :)

      Reply
      • Rami

        I wish! It was too close to other WordCamps; boss won’t pay for it. Such a great lineup!

        Reply
  12. Faison Zutavern

    I figured this would be in the WordPress codex by now, but I was surprised to still see the old clunky one. Thanks for the great redesign though!

    Reply
  13. Gloria Antonelli

    You rock! I am using your infographic in my slide show Creating Great User Documentation for WordCamp Chicago. It is an excellent example of making info more clear.

    Reply
  14. draco678

    Hi Michelle,
    This is a great diagram! Love it because it takes less time to understand the concept with this diagram as compared to the codex version. But, the title “Redesigning the template hierarchy” is misleading as the template hierarchy remains unchanged. (Refer: http://stackoverflow.com/questions/12196986/changing-wordpress-template-hierarchy). Something similar to “WP Template hierarchy illustrated in a readable format” would have been more precise!

    Reply
  15. WordPress 模板层次结构信息图 - 代码如诗

    [...] WordPress 主题有很多文件,比如:index.php,single.php,archive.php 等,WordPress 会根据不同类型的内容决定使用模板文件,这个就是 WordPress Template Hierarchy(WordPress 模板层次结构),如果结合 WordPress 的高级功能,比如 WordPress 自定义日志类型,自定义分类模式等,这个模板层次结构会非常复杂。虽然 WordPress 官方整理了模板层次结果图,但是还是显得非常复杂,所以 Marktime Media 重新设计了 WordPress 模板层次结构信息图(点击打开大图): [...]

    Reply
  16. Understanding the WordPress Template Hierarchy - Press Up

    […] Marktime Media’s Graphical Version: These are a bit large and unwieldy for many contexts, but they’re really thorough and rather nice-looking to boot. If you’re a real WordPress nerd you could even use them as your desktop background. […]

    Reply
  17. Ladies Learning Code Workshop | Kory Mathewson

    […] which template file, or php file is used when the user visits a certain page. Learn more about the Template Hierarchy on this sweet data visualization by Michelle Schulp. This infographic will help us determine which file to edit when we want to […]

    Reply
  18. RedEly

    Really cool tool. Thanks Michelle!

    Reply
  19. Owen

    OMG, thanks a lot for this. I was creating pretty good static html sites but was having the roughest time trying to translate it over to wordpress. This post definitely saved me a lot of headaches. Almost 1 week of searching, thanks a lot for this post.

    Reply
  20. WordPress: gerarchia dei template files | Epysoft

    […] Immagine originale su Marktimemedia […]

    Reply
  21. WordPress Harrisburg Meetup: An Introduction to the WordPress Template Hierarchy |Rami Abraham

    […] Oh! And if you’re looking for print-quality or desktop background images of the template hierarchy, make sure to check out Michelle Schulp’s work here. […]

    Reply
  22. WordCamp Miami 2014: a Touchy-Feely Retrospective |Rami Abraham

    […] weekend were with Michelle, hands down. I was introduced to Michelle last year when she created her template hierarchy design. We’ve conversed in Cyberspace since then and have seen each other at conferences as well, […]

    Reply
  23. google plus app for ipad

    My developer is trying to convince me to move to .net from PHP.

    I have always disliked the idea because of the expenses.
    But he’s tryiong none the less. I’ve been using WordPress
    on a number of websites for about a year and am nervous about switching to another platform.
    I have heard very good things about blogengine.net. Is there a way I can import all my wordpress posts
    into it? Any kind of help would be really appreciated!

    Reply
  24. residential foundation contractors

    Have you ever considered about adding a little bit more than just your articles?

    I mean, what you say is fundamental and all. But imagine if you added some great
    images or videos to give your posts more, “pop”!
    Your content is excellent but with images and video clips,
    this website could undeniably be one of the very best in its field.
    Wonderful blog!

    Reply
  25. Jerilyn

    Greetings! Very helpful advice within this post! It is the little changes
    that produce the largest changes. Many thanks for sharing!

    Reply
  26. trash dumpsters rentals in austin

    Hi! Do you use Twitter? I’d like to follow you if that would be okay.
    I’m undoubtedly enjoying your blog and look forward to new updates.

    Reply
  27. Lorna

    Self-mutilation has been a problem that has existed for a long
    time. These other mechanisms include the use
    and abuse of drugs and alcohol, sexual addictions as well as other relationship addictions, and common eating
    disorders. Smart boards are slowly replacing blackboards in the schools.

    Reply
  28. polished concrete floors cost Tampa Florida

    It’s appropriate time to make some plans for the long run and it is time to be happy.

    I have read this post and if I could I wish to suggest you few fascinating issues or advice.
    Maybe you could write next articles referring to this article.
    I want to learn even more things approximately it!

    Reply
  29. aspersoriums

    It’s hard to come by well-informed people in this particular topic, however, you seem
    like you know what you’re talking about! Thanks

    Reply
  30. free wordpress themes vertical menu

    Whats up very cool website!! Man .. Beautiful ..
    Wonderful .. I will bookmark your website and take the feeds additionally?
    I’m satisfied to search out numerous useful
    info here in the publish, we want work out more techniques in this regard, thanks for sharing.
    . . . . .

    Reply
  31. Cheryl

    One of the main misconceptions about glass is that it is rather dull with practically no privacy. With all the new advances in technology- that is simply just
    not the case anymore.

    Over the years, glass manufacturers have come up with various types of glass like double glazed windows and patterned glass.

    You can use glass doors for your bathroom, patio and other places at your house to give
    your home an ultramodern or elegant look and feel.

    So you do not have to worry about the glass being dull or plain. Purchasing glass that has etched designs of nature like flowers and trees or
    any other categories based on your personal taste is possible nowadays.
    So finding the right kind of glass to blend with other furnishings in a particular
    room is indeed possible. There is no shortage of choices
    in terms of glass design. 

    Another benefit of glass is in terms of insulation. Glass is not a good
    conductor of heat. During our hot summer season, with all the advances in energy efficiency with glass, glass will not absorb
    heat, making the room hotter. During a winter or autumn period, glass will not cause much
    heat loss. 

    So you and your family might enjoy a more cooling effect during
    summer and a warmer effect during winter or autumn. You also save money in terms of
    utility bills. Since there is less heat loss,
    you can turn down the heating system to a lower temperature, which results in less
    energy consumption. During summer, there would not be any
    necessity to lower the temperature. 

    Another benefit of using glass doors and windows is that it just makes your home brighter and more cheerful
    feeling. With our famous sunny days, there might be no necessity to switch on lights to light up a particular
    place since there is sufficient natural light.

    Reply
  32. Nina

    LinkedIn has a great feature that connects with your existing email accounts and allows
    you to invite anyone you have interacted with
    to your network. This means that you might reach people you interacted with
    once or twice, or people that you haven’t spoken with
    in a while. This is a powerful tool, but are you using it effectively in your marketing?

    LinkedIn as a Data Collector
    Look at all the ways you can collect data from people.
    The easiest metric to track for most is their email addresses, so ask people
    and promote their use. Create mailers or offer contests via email
    registration. Remember, each email you collect is another potential LinkedIn profile waiting to be connected to.
    Also, you might convince someone to join LinkedIn when they receive an invite
    from you, which means more customers to interact with.
    Easy Ways to Connect on LinkedIn
    So, what are some easy ways to connect with users and get them to want to network with
    you? Many companies have started suing LinkedIn as a
    corporate blog to promote brand awareness. These blogs might not even have
    anything to do with the products being sold, but they might tie in with corporate culture or offer up some helpful knowledge or
    technique. This is called generating substance, and if you want people
    to see a value in your postings, you need to provide that
    substance, otherwise they simply won’t care.
    The nice thing about this is you don’t have to be a multi-faceted
    business guru to provide content. Maybe you promote an interesting link of the day,
    or maybe you repost a news story about something company-related (please
    give credit if you do this.). It could even be a humorous blurb or story, or even a
    business-appropriate joke to keep your network’s
    attention. The only constant is that the postings stay constant.
    If you start it, then maintain it to help build that brand awareness.
    Remember, people won’t actively look for you if they
    don’t know you exist.
    One great way that some companies have started building
    a loyalty network is through promoting their employees.

    Some companies will offer a spotlight on their employees, showing off the projects they have done or discussing their high points.

    This not only helps to ensure your employees feel valued,
    but it also helps to paint your company as more human, which is something you want
    when trying to get people to connect with you.
    Pitfalls and Things to Avoid With LinkedIn
     
    Most of what has been discussed here has been the positives
    of using LinkedIn for your promotions, but there
    are some pitfalls you may want to avoid.
    Again, not all marketing works for all niches and some can be turned off
    more easily than others.
    For starters, when advertising with a graphic, consider the context that your audience will view it in. LinkedIn is business
    to business networking. Is your picture one that would be
    considered safe for a business networking platform? Yes, attractive, nearly-naked
    people tend to get clicks, but are those the kind of ads people at major corporations are going to be more than likely
    be turned off due to lack of professionalism? Consider your content in your pictures before posting and make sure your graphics are a good
    match to your audience and marketing message.
    Second, watch your language. While on the surface, this could be
    taken as do not swear, on a deeper level, you have to consider what a company will filter for and what they will allow.

    Some words tend to trigger web filters pretty easily, so be careful about your verbiage.
    Also, look at the message your words send. Are you trying to be edgy,
    dynamic, endearing? Do your words properly convey the message
    you want people to see? Sometimes people get so wrapped up in sending out a strong message that they fail to consider if it
    is the right one.
    Third, don’t verbally tie yourself to a region or company if you can help it.
    While you may want to highlight a company on a landing page
    or maybe you are geared towards a certain region of the world, you
    don’t want to inadvertently exclude potential customers because they think your ads don’t immediately apply to them.
    Remember, you can focus your ads in terms of companies and locations ahead of time, so listing out
    that info in the actual ad might prove redundant.
    Fourth, don’t slack on your content. It can be easy to start with a big push, but the number one
    thing that kills an audience’s interest is inconsistency.

    Don’t slouch on your posts. Make sure you dedicate a certain period of time each day
    to providing some form of content. If you can’t or think you might have problems with this, hire someone to do it for you or spend a day or two generating multiple posts so that you can just plug and play.
    However you do it, just be sure to keep doing it.
    You are setting an expectation of service as accompany
    when you post, and to do so inconsistently will send a bad message abour
    what your company considers professional.
    Fifth, be careful on rebranding. Some smaller companies
    take the philosophy of experimentation a bit too far and keep trying to reinvent themselves every
    month or quarter, but the truth of it is that many companies form bonds
    over the long term with clients, and just because you announce a name change or a new logo, that doesn’t mean that your clientele is paying attention. To build your brand,
    you need consistency, so stick to a logo or name and try to avoid being so edgy that you can’t make up your mind about your name.
    Remember, you’re a business, not a rock star.
    LinkedIn Final Thoughts
     
    LinkedIn is a wonderful tool for reaching people in the business world.

    Reply
  33. http://myapple.pl/members/xskazaxdebora-175722

    Bulks from the advertisers are primarily private property owners, letting managers
    and property agents. An HVAC repair clients are most often started by the technician who
    may have learned the trade through previous employment.
    If you’re still at a loss, you’ll be able to contact the consumer care team either by email, live chat,
    or phone during standard west coast business hours.

    Reply
  34. Finanse po godzinach

    Business cards are pretty much one of the standard commercial printing products that
    practically every business and professional avails of. Nevertheless,
    the reality proved that Apple is wrong. In most cases building and starting a business means taking many risks, which is exactly why many
    people don’t go into business.

    Reply
  35. cheap hotels in Los Angeles near airport

    ” “Perceptive Analytics’ engagement appeared to be viewed as top-quality expected principally recommended to their practical experience around with success creating very similar plans
    as well as comprehensiveness of your suggested solution,” HOLD reported around it has the offer critique launching it has the variety of Perceptive Analytics’s offer in this job. Izzeldin Abuelaish: the Palestinian Martin Luther King. The Light – Show West is scheduled for October 23-24, 2013; at Kentia Hall, Los Angeles Convention Center (California, USA).

    Reply
  36. WordPress Template Hierarchy, How WP Selects Template File

    […] credits marktimemedia.com | View full Template […]

    Reply
  37. moviestarplanet hack no jailbreak

    According to estimates that moviestarplanet hack in the
    last double entendre. GrokionThe best feature of mobile gaming industry does not have to first set out
    with a focus on it. Its ability to play games.
    Nowadays, there is one of the mobile game development venture.

    Reply
  38. plants vs. zombies 2 cheats iphone

    It’s not that hard as long as you possibly can in order.
    Downloading the application being developed in 2009 by Finnish video game talkOnline gaming is the reason why gamification has become possible to hit
    and a free app store and installed this game soon. As smart phones and
    the same time. Different from the respective Anthem is played with a BangThe South Korean giant LG,
    recently investing heavily in 3.

    Reply
  39. kitchen remodel permit san jose

    Have you ever considered about adding a little bit more than just your articles?

    I mean, what you say is important and everything.
    But just imagine if you added some great visuals or video clips to give your posts more, “pop”!

    Your content is excellent but with images and clips, this blog could definitely be one of the most beneficial in its niche.
    Good blog!

    Reply

Leave a Reply