wordpress: modifying themes

Theme Architecture

To recap, a theme is a collection of files that live in a folder at wp-content/themes on the web server. Each file in a theme serves a purpose, and must be named in a specific way in order to be called correctly by WordPress. A "valid" theme must have at least these three ingredients:

  • A stylesheet file named style.css
  • At least one PHP file called index.php
  • One thumbnail file called screenshot.png or screenshot.jpg

A CSS block at the top of the style sheet must include the theme name, version, author name, and possibly other information. If this block is missing, WordPress won't recognize the theme as valid for display in the Dashboard.

Theme Name:     My Awesome Theme
Theme URI:      http: //example.com/
Description:    Child of the Twenty Eleven theme 
Author:         Your Name Here
Author URI:     http: //example.com/about/
Template:       twentyeleven
Version:        0.1.0

See the Codex for more about the CSS header.

How Does a Theme Work?

If you want to modify a theme, you need to know which templates to edit. And to know that, you need to know a bit about how WordPress determines which templates to invoke for a given page request.

Think of a web page as consisting of a set of blocks, some of which are the same from page to page, others of which are different. For example, most sites will have the same masthead/banner and footer and probably sidebar on every single page. But the guts of the page will of course be different - the homepage will show summaries of the latest posts, article pages will show just one post, and category views will show summaries of recent entries filed in that particular category.

The files in a theme correspond to these pieces of functionality. Intuitively, you'll find files called header.php, footer.php, and sidebar.php. When a page is requested, WordPress looks at the URL of the page being viewed and determines what kind of page is being viewed. Is this the homepage? Is this an article page?

From this, WordPress can decide which templates will be needed to construct the page. For example, if a single article page is being requested, WordPress knows it will need to assemble the header, footer, sidebar, and the template that handles display of single articles, which is intuitively named single.php.

Template Assemble
When a page is requested, WordPress determines which template files it will need to assemble the page. This lets common pieces of functionality be re-used throughout a site.

But how did WordPress know to use these four templates? The system starts by determining which template is the core of the current page. The core is determined via the WordPress template hierarchy (described next), but for now we'll go with the example above, where single.php is the core. If you take a look at the code inside of single.php, you'll probably see PHP function calls that look like this:

In other words, the core template "pulls in" the other template files it needs to complete the whole page. That's a fairly simple example, and most themes contain many more templates than these four, but the basic concept is always the same.