Anatomy of a Theme

Description Description

In this module you’ll learn about the different files that make up a theme and how they work together to display your website.


After completing this lesson, you will be able to:

  • Recognize the fact that many files are needed to make a theme.
  • Explain how various blocks are used in a WordPress theme.

Top ↑

Prerequisite Skills Prerequisite Skills

You will be better equipped to work through this lesson if you have experience in and familiarity with:

  • Basic knowledge of installing and activating WordPress themes
  • Basic knowledge of HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites., CSS, and PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML.

Top ↑

Assets Assets

Top ↑

Screening Questions Screening Questions

  • Are you familiar with installing and activating themes via the WordPress Dashboard?
  • Will you have a locally or remotely hosted sandbox WordPress site to use during class?
  • Do you have a text editor to view PHP, HTML, CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site., and other files?

Top ↑

Teacher Notes Teacher Notes

  • While there may be “wrong” ways to put together a theme, there is no one “right” way. These examples are very simplistic and not meant to serve as comprehensive guides. There are other, completely valid ways of structuring themes.

Top ↑

Hands-on Walkthrough Hands-on Walkthrough

How a Page is Constructed How a Page is Constructed

WordPress is built to be flexible and builds the pages you see on the screen in blocks. A very common arrangement of these blocks includes the header.php, sidebar.php, index.php, and footer.php files and looks like this:

WordPress Basic Page Structure

These files (and their corresponding blocks) can be moved around, replaced with other files, have additional files added, or can be removed entirely.

For example, an alternative way to arrange the blocks would be.


So how does WordPress do this? It starts with the URL. Your web browser knows that when you type in you’re really asking to go to All web browsers have default files they look for at a web address, and in the case of a WordPress site that default will be the index.php file.

So now that WordPress has located the index.php file, this is what the code in the world’s simplest index.php file looks like:

if ( have_posts() ) : while ( have_posts() ) : the_post();
get_footer(); ?>

Notice that it calls the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. (header.php), then it calls the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. (sidebar.php), then it runs the loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. and grabs the content, and finally adds the footer (footer.php).

Many themes include much more than these bare minimum files, such as additional stylesheets and JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. files. With larger themes it’s a good idea to keep files organized using folders. The recommended folder structure in this case should include:

  • /css/ – additional CSS files, such as mobile.css, that the theme uses; NOTE that the style.css file must remain in the main theme folder
  • /js/ – JavaScript files
  • /img/ – for images that are embedded in the theme such as icons (different than Media Gallery images found in the uploads folder)
  • /language/ – for translation files

So an example of the files and folder that might be found in a very simple theme could look like:
A Theme's Files and Folders Tree Chart

  • index.php
  • style.css
  • /css/
    • mobile.css
    • print.css
  • /img/
    • facebook.png
    • twitter.png
  • /js/
    • lightbox.js
    • slider.js

Top ↑

The Files Needed to Make a Theme The Files Needed to Make a Theme

There are only two basic files required to make a WordPress theme:

  • index.php
    Creates the blog.
  • style.css
    Includes styling information for the site.

However, most themes include:

  • header.php
    Generates a page’s first elements such as a header image and top level menu.
  • footer.php
    Generates a page’e final elements such as widgets and menus.
  • sidebar.php
    Generates a page’s sidebar usually including widgetized areas.
  • functions.php
    Adds features and functions to your site. Works like a WordPress pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the Plugin Directory or can be cost-based plugin from a third-party.
  • screenshot.png
    Graphic thumbnail image representing the theme.

And should also include:

  • single.php
    Generates a blog post.
  • page.php
    Generates a static page.
  • archive.php
    Generates a page displaying posts by date published.
  • category.php
    Generates a page displaying posts by categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging..
  • tag.php
    Generates a page displaying posts by tab.
  • comments.php
    Generates a page displaying posts by comments.

And don’t forget:

  • 404.php
    Generates a page when a page or post does not exist.
  • search.php
    Generates a page displaying search results.
  • front-page.php
    Used in Settings > Reading to set a static page or the blog as the home page.

That’s a lot of PHP files! So how does WordPress know which file to use? That’s where the WordPress Template Hierarchy comes in.

Top ↑

Exercises Exercises

  1. Use pseudo-code (an informal high-level description) to outline the files needed to implement the basic structure of a WordPress page that would include a sidebar on the right
  2. Install the Twenty Thirteen theme and examine its files and folder structure

Top ↑

Quiz Quiz

Which files make up the structure of a basic WordPress page?

  1. header.php, sidebar.php, index.php, footer.php
  2. header.php, sidebar.php, function.php,footer.php
  3. homepage.php, header.php, index.php, footer.php

Answer: 1. header.php, sidebar.php, index.php, footer.php

Which files are required for a WordPress theme?

  1. blog.php, page.php style.css
  2. index.php and style.css
  3. header.php and footer.php

Answer: 2. index.php and style.css

Top ↑

Additional Resources Additional Resources

Using Themes @ Codex

Last updated: