The anatomy of a WordPress theme

With all the WordPress theme frameworks that arose over the past few years, you’d almost forget what a normal WordPress theme looks like. Almost, because Yoast has got your back and we’re about to remind you! Check out our anatomy of a WordPress theme infographic:

Anatomy of a WordPress theme - Infographic

For reference, here is the copy in the infographic:

Anatomy of a WordPress theme

The cheatsheet for how your blog works

WordPress themes are made up of a folder of template files, each of which controls a specific piece of your theme. Parts of your site that remain static no matter what page you’re on are controlled by header, sidebar and footer files. You can hack these files so they detect what page you are on and serve different content accordingly, such as display different navigation on posts than on pages; however it is most common for these sections to look the same throughout the site.

  • header.php
    Global file that displays headers and navigation. Also contains HTML code.
  • The Loop
    The display of contents of the main area of your site are controlled by individual WordPress theme template files using what’s called “the loop”.
  • sidebar.php
    Sidebar display is controlled in this file. Multiple sidebars can be set up in functions.php, and contents of sidebar widgets are set up from the WordPress wp-admin panel.
  • footer.php
    Contains instructions for global footer and closes HTML tags.

index.php – home

The index file controls what the homepage of your WordPress theme looks like. By default it is a loop that queries and then displays the most recent blog posts, with a link in the bottom to view previous posts.

Alternately, you can specify in wp-admin -> settings -> reading to have the home page be a page you created yourself in WordPress. In that case, you specify a different page/URL for the regular blog posts to appear on, and that page is generated by index.php.

single.php – individual posts

The display of individual posts in your WordPress theme is controlled by a little file called single.php. It contains a loop that queries just one post and displays it.

You can specify if you want sidebars (and which you want), if you want it to look different than the other pages on the site.

page.php – individual pages

Page.php controls what pages look like. You can choose to eliminate sidebars or other elements, add other unique elements for pages alone.

WordPress also allows you to create different page templates within your WordPress theme for different types of pages. To create a page template, simply copy page.php, rename it to whatever you want, then add this code to the top:

<?php
/*
Template Name: YourPageNameHere
*/
?>

archive.php, category.php, tag.php – archives

You can control the look and feel of different archives using template files also. If there is no archive file, the archives will look like index.php; however you can create an archive.php to override that. If you create a file called category.php, it will override archive.php for categories only. If you create a tag.php, you can override it for tag archives only.

The Loop

The loop is perhaps the most powerful part of your WordPress theme. It starts with a query (which determines which posts or pages to grab), and ends with a PHP “endwhile” statement. Everything in between is up to you. You can specify the output of titles, post content, metadata, custom fields and commenting all within the loop and each element is output for each post or page until the query is done. You can set up multiple loops and queries on a single page; for example: on a single.php you could have the loop showing the entire content of a single post, with a loop outputting just titles and thumbnails for related posts below it.

  • Query post or page
  • Start Loop
  • the_title (outputs the title of the post)
  • the_excerpt (outputs the post excerpt)
  • the_content (outputs the full post content)
  • the_category (outputs the post categories)
  • the_author (outputs the post author)
  • the_date (outputs the post date)
  • other tags (there is a variety of other tags you can use in the loop)
  • endwhile;
  • Exit the loop

Background files of a WordPress theme

In order for a WordPress theme to work, it needs a few essential background files. These files can be modified to your needs and can quite powerfully affect the custom look and functionality of your site.

comments.php

This controls the output of comments, which can be included in the loop if you desire comments on your theme. Comments.php can be overriden by plugins such as Disqus, which then take over comment functionality on your blog.

functions.php

Functions.php allows you to put your own custom PHP code in order to modify core elements of your theme. It is often used to specify multiple sidebars, change the number of characters in the excerpt or add custom admin panel options for wp-admin.

style.css

This is the main CSS stylesheet for your theme. It also contains text at the top which tells WordPress what the name of your WordPress theme is, who the author is and what the URL of your site is.

Tags:


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

112 Responses

  1. AndorBy Andor on 10 January, 2011

    Cool und useful scheme about the basic concept from a WordPress theme. Thanks.

  2. JosephBy Joseph on 10 January, 2011

    Now i’ve got it Really useful and practical illustrations. Thanks

  3. KrystianBy Krystian on 10 January, 2011

    Great illustrations. Simple and full of content.
    Thanks.

  4. OndrejBy Ondrej on 10 January, 2011

    Magnificent! You should get a medal from Automattic. I can’t begin to tell how many hours I wasted trying to Google out what’s shown so simply a beautifully here!

  5. TamiBy Tami on 10 January, 2011

    Will print it out and keep it. Gives the information in an easy to understand manner. Thanks.

  6. NathanBy Nathan on 10 January, 2011

    Comics Sans for the illustrations? REALLY?!

  7. Gert OomsBy Gert Ooms on 10 January, 2011

    Very usefull …

  8. Nick PlekhanovBy Nick Plekhanov on 10 January, 2011

    This is really useful. Thanks a lot man.

  9. Douwe SchaafBy Douwe Schaaf on 10 January, 2011

    This is awesome! Very helpful to explain WP templates to others!

  10. John HousholderBy John Housholder on 10 January, 2011

    Great tool to show the framework. And, I agree with the comic sans comment, LOL!

  11. joe ekineBy joe ekine on 10 January, 2011

    Good start for users who want to convert from drupal to wordpress. (:

    • KokoBy Koko on 13 January, 2011

      Yep nice basic infos – tbh i hate drupal, had to use it a couple of times anyways ~~

  12. Landon ZirkelbachBy Landon Zirkelbach on 10 January, 2011

    Very helpful! Starting my first WordPress site in a week or 2. So this helps greatly.

  13. FulmegaBy Fulmega on 11 January, 2011

    Fantastic article, I posted on my blog. If there is any problem with that, let me know and delete it.

    Greetings

  14. Ken JansenBy Ken Jansen on 11 January, 2011

    Thank you. This is really a nice resource for the non-programmer. I tweeted it. Very helpful. :)

  15. Karen BennettBy Karen Bennett on 11 January, 2011

    Great info. Any chance of getting a PDF of this infographic? Reading the text in a png made my eyes hurt.

  16. Gerry HochBy Gerry Hoch on 11 January, 2011

    This is a great asset to anyone starting out in building sites with WP.

    Thanks!

  17. Tommy LinsleyBy Tommy Linsley on 11 January, 2011

    Yes, I have to agree with Ondrej for an Automattic medal.
    Yoast is to be commended for such an eloquent
    presentation of wordpress anatomy.

  18. Bjorn van der NeutBy Bjorn van der Neut on 11 January, 2011

    Really nice and easy to understand! Only a little strange that its an image…not really seo friendly ;-)

  19. VladBy Vlad on 11 January, 2011

    Always wanted to see what it was like. Wish I’d seen this a week ago when I was trying to augment the theme myself – had to learn it the hard way.

  20. Martin DugganBy Martin Duggan on 11 January, 2011

    fantastic post – thank you very much for this resource. I’m a graphic designer trying to appreciate the mechanics of the WordPress system, so I can design for it better. I will keep this as a cool reference.

  21. Trevor TurkBy Trevor Turk on 11 January, 2011

    FWIW – I made “the simplest possible WordPress theme” in an effort to understand what the bare minimum WordPress theme requires (to get into their theme directory).

    You can see it here: http://wordpress.org/extend/themes/simplest

  22. Shane JonesBy Shane Jones on 11 January, 2011

    Brilliant work here Yoast. Am definately saving this page for reference.!

  23. Adam LeytonBy Adam Leyton on 11 January, 2011

    This is a fantastic resource. Thank you very much!

    As someone else has mentioned, a PDF would be really useful.

  24. Rick OngBy Rick Ong on 11 January, 2011

    Very helpful Joost, wish we had this when I was learning WordPress Themes

  25. Dennis van den BroekBy Dennis van den Broek on 11 January, 2011

    Wat een goede infographic. Goed om met geavanceerde gebruikers te bekijken wat wel en niet kan, of wat wel en niet handig is. Complimenten!

  26. GrahamBy Graham on 11 January, 2011

    Awesome and handy WordPress infographic.
    It would be really cool if there was a printable version :)

  27. FredrikBy Fredrik on 11 January, 2011

    Great stuff! I will most certainly use it when explaining WordPress to clients. Many Thx!

  28. AaronBy Aaron on 11 January, 2011

    Well done. I’ve worked with WordPress for years and this graphic is the best yet I’ve seen to help beginners “see” what WordPress is all about. Much appreciated.

  29. JeffBy Jeff on 11 January, 2011

    Clear outline on WordPress structure, thanks!!! PRINTABLE VERSION PLEASE!

  30. StefanoBy Stefano on 11 January, 2011

    Very well done!
    Can I translate it in italian and post it on WordPressMania.it? Obviously I’ll keep all credits and link to you.

    Stefano

  31. PR i Marketing AgencijaBy PR i Marketing Agencija on 11 January, 2011

    Nice Infographic :)

  32. Rev. VoodooBy Rev. Voodoo on 11 January, 2011

    I’m using your SEO plugin, so I get your updates on my dash…. and I liek to stop in every now and then to see what’s up. That is a very nicely laid out little tidbut you have there. Very easy to look at and follow!

  33. uxyogiBy uxyogi on 11 January, 2011

    Nice!!
    It helped me a lot :)
    Thanks.

  34. TheoBy Theo on 11 January, 2011

    This is really useful stuff, thanks!

  35. GeoffBy Geoff on 11 January, 2011

    great diagram but how cool would it be to make each header clickable with as a link to a sample of the code which is also annotated as clearly!

  36. DinoThemesBy DinoThemes on 11 January, 2011

    Very well put together. This could be used as a visual tool to teach/learn how to create WordPress themes. Kudos++

  37. Craig BakBy Craig Bak on 11 January, 2011

    Thanks man, yiu have made it very easy to describe the workings for those who need to explain it to others!
    Very useful Joost!
    Thanks again

  38. Ankit SainiBy Ankit Saini on 11 January, 2011

    Never Know the secret of wordpress theme Like this way..
    Thanks

  39. Rob McCanceBy Rob McCance on 12 January, 2011

    VERY nice. WP is a little mysterious to old school developers. This is great.

  40. Jack ngBy Jack ng on 12 January, 2011

    Wowo thank you for the great share:)

  41. Arun Pal SinghBy Arun Pal Singh on 12 January, 2011

    Thanks for making it clear. Though ever the years, I have gained knowledge about working of WordPress but it is always great to see it explained in images and words.

    A very nice article

  42. Natalya MurphyBy Natalya Murphy on 12 January, 2011

    This is a wonderful reference. I’ve thought many times about sitting down and trying to figure out how all the pieces fit together, but you’ve done the work for me now. Thank you! I’m sure I’ll be referring back to this page often.

  43. Peter L MastersBy Peter L Masters on 12 January, 2011

    I’m using this and Yoast is very good! I’ve said enough.

  44. SenseiMattKleinBy SenseiMattKlein on 12 January, 2011

    Sometimes it’s easy to forget what is sitting under our websites, that we place such a high importance on. It is easy to take it for granted. But it sure helps to know where to find things if there is a problem. This post is extremely helpful in that regard. Thanks Joost.

  45. SparrowBy Sparrow on 12 January, 2011

    Thanks, very helpful overview

  46. CodeZBy CodeZ on 12 January, 2011

    hello from germany and big thx 4 this great illustration. i like it :-)

  47. SteveBy Steve on 12 January, 2011

    Very Helpful article, just sent it to a few other WP coders I know…Thanks

  48. Tommy LinsleyBy Tommy Linsley on 12 January, 2011

    Some commenters ask for a printable version. Just do screengrab. For example can use firefox extension Fireshot.

  49. DougBy Doug on 12 January, 2011

    This is BEAUTIFUL! Can I use this image on my website to explain to my clients how WordPress works if I leave a link back to the author and Yoast?

  50. RicardoBy Ricardo on 12 January, 2011

    Thank you. Excellent post :)

  51. JibunBy Jibun on 13 January, 2011

    Hey nice and brief informations for newbie in WordPress designing like me.
    Thanks.
    However there is perhaps a little bug with your images title attribute. When hovering on images it shows ‘Anatomy of WordPress theme Yoast’. Maybe that tag wasn’t parse?

  52. Yatin MulayBy Yatin Mulay on 13 January, 2011

    I had to comment due to those AWESOME images. Great illustrative post Joost !

    Do you plan to develop something similar to Thesis OpenHook plugin which could apply universally to all wp themes out there?

    I think many people would be willing to even buy such premium plugin that’d make hacking wordpress themes simpler.

  53. Steve ThoenyBy Steve Thoeny on 13 January, 2011

    I found this so helpful and well done. Outstanding! Thanks.

  54. Lily SunBy Lily Sun on 13 January, 2011

    Comic Sans really?!?

  55. LookBy Look on 13 January, 2011

    A picture worth a 1000 words. Maybe even more. Thank you so much for this!

  56. Wang JinyuBy Wang Jinyu on 13 January, 2011

    Very informative reference, bookmarked it at first impression.

  57. Lam NguyenBy Lam Nguyen on 13 January, 2011

    This is very informative and useful, but the font using is a little hard to read. Anyway, thanks for this work.

  58. Ray HiltzBy Ray Hiltz on 13 January, 2011

    Very helpful. I’ve been working exclusively within themes. So peeling it back to the basics is very helpful.

  59. DianaBy Diana on 13 January, 2011

    Thank for this information. I will bookmark this page to refer back to often, I’m sure.

    Thanks for all your tips.

  60. Jeff LambertBy Jeff Lambert on 13 January, 2011

    Joost,

    This is great and nice that creditloan.com passed it along.

    Any problem with my sharing this on my site with a reference back?

    Cheers

  61. Marc SaxeBy Marc Saxe on 13 January, 2011

    Great graphic Joost. Nobody’s done it better:

    http://www.youtube.com/watch?v=SaV-6qerkqI

  62. Pam WrightBy Pam Wright on 14 January, 2011

    Lovely and clear description – this is really useful, thanks!

  63. Robert DreherBy Robert Dreher on 14 January, 2011

    Dank je. Duidelijk en praktisch.

  64. Ronald SmithBy Ronald Smith on 14 January, 2011

    Excellent anatomy. Great tool for helping to explain wordpress to my clients. Thanks very much for producing this.

  65. Pushpendra PalBy Pushpendra Pal on 15 January, 2011

    Very informative post.
    Tells every thing(Basics) about a wordpress theme design.
    Going to try my own WP Theme .. Thanks

  66. Allen ReshaBy Allen Resha on 15 January, 2011

    I am an avid blogger and use Word Press. This was a very excellent post on the break down of what makes a Word Press theme. As I get more into customization and tweaking on themes, posts like this help me to understand the break down of the theme piece by piece. It was written in a way that even the novice user can understand! Two Thumbs Up!

  67. JaredBy Jared on 17 January, 2011

    Thanks for the explanation. I never really understood the whole “loop” thing until now. I really enjoy your posts!

  68. Damion J.By Damion J. on 18 January, 2011

    Finally! Great for visual learners. Thank you!

  69. DeniseBy Denise on 18 January, 2011

    Love it! First useful info-graphic I’ve seen that smoothly outlines the process.

  70. Javi MorenoBy Javi Moreno on 20 January, 2011

    It has been a long time since I have seen the structure of WordPress explained so well. It is great for any beginner. Thanks.

  71. Tom IrelandBy Tom Ireland on 21 January, 2011

    Like this infographic very much. Nice and simple. Would be useful for future posts and newbies if you did a summarised breakdown of each bit and some examples? Thanks.

  72. Eric StrateBy Eric Strate on 22 January, 2011

    Great layout, that is very informative. I wish we could get an anatomy of how to make a landing page that sells ;)

  73. LucianBy Lucian on 23 January, 2011

    Probably the best infographic for this year.

  74. Nick BurmanBy Nick Burman on 27 January, 2011

    Brilliant. I love infographics, being a graphic designer and thinking graphically! Thanks for this.

  75. KonstantinBy Konstantin on 28 January, 2011

    I think you’re missing the navigation menu and the thumbnails, and custom post types, that might have been a little bit more valuable, since the template hierarchy is already in the Codex. Great graphic btw :)

  76. Jacob CarvidgeBy Jacob Carvidge on 31 January, 2011

    Excellent infographic. It’s posts like this that keep me a subscriber to this blog, Joost.

  77. RosemaryBy Rosemary on 31 January, 2011

    Hi

    Thank you so much for your clear and detailed description above. I had been struggling for ages to understand exactly what each page represented – apart from the obvious of course.

    I also wanted to say thanks for your Google Analytics plugin, I just watched your screencast, which was very easy to follow and I am looking forward to implementing it (the plugin) on my sites. I have also downloaded the SEO plugin which I hope can help clear my information overload on this topic.

  78. Raj SharmaBy Raj Sharma on 31 January, 2011

    We have just redesigned our website and also a Blog/Article template; wherein we are planning to install wordpress for its functionality, I have been looking for an article which would help us find a way to get wordpress on our template, thanks for your contribution on this topic; if possible kindly send us any useful link on this topic. thanks

  79. SborezBy Sborez on 3 February, 2011

    Hello, can i get that jpg file in psd, or pdf to translate into czech language? It is very helpfull for me and i think that it will be for my friends in CZ too. Thanks a lot for your answer. I will post that on my blog and i will introduce you as author.

  80. Mick GordonBy Mick Gordon on 4 February, 2011

    I am just starting to explore creating my own theme and this was a great resource.

  81. ElaineBy Elaine on 8 February, 2011

    You should sell this as a poster. I know I am going to print out a copy for my wall!

  82. Greg MagnusBy Greg Magnus on 9 February, 2011

    Excellent job with the WordPress illustration and the overview of the processes. Thx for taking the time to do it so well.

Trackbacks

  1. [...] So you’re going to start a blog in 2011? So
    you want to do some tweaking and housecleaning around your
    WordPress site? With all the WordPress theme frameworks that arose
    over the past few years, you’d almost forget what a
    normal WordPress theme looks like. Almost, because Yoast has got
    your back and we’re about to remind you! Check out our
    anatomy of a WordPress theme infographic…via The anatomy
    of a WordPress theme – Yoast. [...]

  2. [...] Joost de Valk, bekend van zijn WordPress plugins en
    blog yoast.com, heeft een infographic gemaakt over de anatomie van
    een WordPress theme. De infographic legt uit hoe een WordPress
    template is opgebouwd met verschillende PHP template files. Voor
    WordPress gebruikers met een eigen blog die benieuwd waren naar het
    opmaken van verschillende page templates of inzet van een category
    én tag template is dit een mooi overzicht. The anatomy of a
    WordPress theme [...]

  3. [...] The anatomy of a WordPress theme: Joost de Valk from Yoast has posted a fantastic infographic (a very tall and descriptive image) of all the details on how a WordPress theme works. Very interesting for new theme developers, and a good frame of reference for WordPress DIYers looking to find a quick solution to a theme issue. Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic. (No Ratings Yet)  Loading …   Tags: wordpress-theme, yoast Visited 3 times, 3 so far today Tweet [Advertise Here] [...]

  4. [...] various resources available on the internet, but it requires a lot of effort and commitment. This infographic of the anatomy of a WordPress theme should help you get a basic understanding of a themes structure. So, I am waiting to see your [...]