yoast SEO

The anatomy of a WordPress theme

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

Our SEO for WordPress eBook guides you through every aspect of Search Engine Optimization »

SEO for WordPress Info

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.


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 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.


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.

112 Responses to The anatomy of a WordPress theme

  1. Greg Magnus
    By 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.

  2. Elaine
    By 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!

  3. Mick Gordon
    By Mick Gordon on 4 February, 2011

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

  4. Sborez
    By 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.

  5. Raj Sharma
    By 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

  6. Rosemary
    By Rosemary on 31 January, 2011


    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.

  7. Jacob Carvidge
    By Jacob Carvidge on 31 January, 2011

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

  8. Konstantin
    By 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 :)

  9. Nick Burman
    By Nick Burman on 27 January, 2011

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

  10. Lucian
    By Lucian on 23 January, 2011

    Probably the best infographic for this year.

  11. Eric Strate
    By 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 ;)

  12. Tom Ireland
    By 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.

  13. Javi Moreno
    By 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.

  14. Denise
    By Denise on 18 January, 2011

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

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

    Finally! Great for visual learners. Thank you!

  16. Jared
    By Jared on 17 January, 2011

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

  17. Allen Resha
    By 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!

  18. Pushpendra Pal
    By 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

  19. Ronald Smith
    By Ronald Smith on 14 January, 2011

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

  20. Robert Dreher
    By Robert Dreher on 14 January, 2011

    Dank je. Duidelijk en praktisch.

  21. Pam Wright
    By Pam Wright on 14 January, 2011

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

  22. Marc Saxe
    By Marc Saxe on 13 January, 2011

    Great graphic Joost. Nobody’s done it better:


  23. Jeff Lambert
    By Jeff Lambert on 13 January, 2011


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

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


  24. Diana
    By 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.

  25. Ray Hiltz
    By 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.

  26. Lam Nguyen
    By 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.

  27. Wang Jinyu
    By Wang Jinyu on 13 January, 2011

    Very informative reference, bookmarked it at first impression.

  28. Look
    By Look on 13 January, 2011

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

  29. Lily Sun
    By Lily Sun on 13 January, 2011

    Comic Sans really?!?

  30. Steve Thoeny
    By Steve Thoeny on 13 January, 2011

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

  31. Yatin Mulay
    By 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.

  32. Jibun
    By Jibun on 13 January, 2011

    Hey nice and brief informations for newbie in WordPress designing like me.
    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?

  33. Ricardo
    By Ricardo on 12 January, 2011

    Thank you. Excellent post :)

  34. Doug
    By 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?

  35. Tommy Linsley
    By Tommy Linsley on 12 January, 2011

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

  36. Steve
    By Steve on 12 January, 2011

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

  37. CodeZ
    By CodeZ on 12 January, 2011

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

  38. Sparrow
    By Sparrow on 12 January, 2011

    Thanks, very helpful overview

  39. SenseiMattKlein
    By 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.

  40. Peter L Masters
    By Peter L Masters on 12 January, 2011

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

  41. Natalya Murphy
    By 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.

  42. Arun Pal Singh
    By 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

  43. Jack ng
    By Jack ng on 12 January, 2011

    Wowo thank you for the great share:)

  44. Rob McCance
    By Rob McCance on 12 January, 2011

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

  45. Ankit Saini
    By Ankit Saini on 11 January, 2011

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

  46. Craig Bak
    By 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

  47. DinoThemes
    By 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++

  48. Geoff
    By 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!

  49. Theo
    By Theo on 11 January, 2011

    This is really useful stuff, thanks!

  50. uxyogi
    By uxyogi on 11 January, 2011

    It helped me a lot :)

  51. Rev. Voodoo
    By 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!

  52. PR i Marketing Agencija
    By PR i Marketing Agencija on 11 January, 2011

    Nice Infographic :)

  53. Stefano
    By 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.


  54. Jeff
    By Jeff on 11 January, 2011

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

  55. Aaron
    By 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.

  56. Fredrik
    By Fredrik on 11 January, 2011

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

  57. Graham
    By Graham on 11 January, 2011

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

  58. Dennis van den Broek
    By 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!

  59. Rick Ong
    By Rick Ong on 11 January, 2011

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

  60. Adam Leyton
    By 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.

  61. Shane Jones
    By Shane Jones on 11 January, 2011

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

  62. Trevor Turk
    By 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

  63. Martin Duggan
    By 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.

  64. Vlad
    By 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.

  65. Bjorn van der Neut
    By 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 ;-)

  66. Tommy Linsley
    By 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.

  67. Gerry Hoch
    By Gerry Hoch on 11 January, 2011

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


  68. Karen Bennett
    By 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.

  69. Ken Jansen
    By Ken Jansen on 11 January, 2011

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

  70. Fulmega
    By 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.


  71. Landon Zirkelbach
    By Landon Zirkelbach on 10 January, 2011

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

  72. joe ekine
    By joe ekine on 10 January, 2011

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

    • Koko
      By Koko on 13 January, 2011

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

  73. John Housholder
    By John Housholder on 10 January, 2011

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

  74. Douwe Schaaf
    By Douwe Schaaf on 10 January, 2011

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

  75. Nick Plekhanov
    By Nick Plekhanov on 10 January, 2011

    This is really useful. Thanks a lot man.

  76. Gert Ooms
    By Gert Ooms on 10 January, 2011

    Very usefull …

  77. Nathan
    By Nathan on 10 January, 2011

    Comics Sans for the illustrations? REALLY?!

  78. Tami
    By Tami on 10 January, 2011

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

  79. Ondrej
    By 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!

  80. Krystian
    By Krystian on 10 January, 2011

    Great illustrations. Simple and full of content.

  81. Joseph
    By Joseph on 10 January, 2011

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

  82. Andor
    By Andor on 10 January, 2011

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

Check out our must read articles about Analytics