How Exactly do Themes Work?

The WordPress core is happy to display totally blank pages in the absence of direction from a theme, it’s agnostic, it doesn’t care. It will only display content when specifically instructed to by the active theme. It looks for these instructions in different files within the theme directory (by default, this directory would be /wp-content/themes/yourthemedir/ sometimes refered to as the "theme directory" or "theme root"). Which file is used depends on what kind of page is being requested by the user). Let’s establish some vocab before I wander down this trail:

Template File
A file that tells the core what information to display and where/how/when to display it. Each type of WordPress page has its own template file or template hirerarchy.
Template Hirerarchy
Some types of WordPress pages can be shown by multiple template files. The order of preference among these template files for a particular page type is the template hirerarchy. (For example: a request to view all posts in a particular month is handled by date.php, archive.php, or index.php, in that order of preference. If the "favorite" template file does not exists, it moves on to the next favorite. If more than one exists, the most favorite is the only one used, canceling out the others. You can find a detailed map of these hirerachies in the resources at the end of this tutorial.
Index (type)
In terms of template types, an index page is a generic term for any page that can display more than one entry at a time. This includes the default homepage list of posts, as well as search, categories, tags, author pages, archives, etc. It is the opposite of a singular page.
Singular (type)
Not to be confused with single, a singular page is one that shows only one entry. For example the full post or page content. There is no singular template file by default, but you can test if the current page is singular by using the PHP command is_singular().
Single
The single template refers to a single post, but not a single page (go figure).
Page
The page template refers to a single page, but not a single post. If you’re still foggy on the difference between a post and a page, read this. (Note: I have a tendancy to carelessly use “page” as a generic term for any webpage on the blog. I also use blog to mean the WordPress site, and sidebar to mean widget area (even when it’s not on the side of anything, or a bar. I figured I would clarify this sooner rather than later.)

Example Situations

  • A user visits the homepage → home.php is found → the data is a list of recent posts.
  • A user visits an individual post → single.php is found → the data is the post content.
  • A user visits a category page → category.php is found → the data is a list of posts in that category.
  • A user visits a link page → tag.php is NOT found → archive.php is NOT found → index.php is found (phew) → the data is a list of posts tagged with that tag.

In the last example, the index template is used with the tag data because the more prefered tag template files were not included in the theme.

Note: Not including these files is okay.
As a matter of fact, I generally use the index template to handle categories, tags, authors, and archives, on purpose. Using PHP, you can determine what kind of page the user was looking for and slightly alter the output to match that request.

However, this is a more advanced technique and can get hairy if done poorly. I recommend using a separate template file as much as possible until or unless you are very comfortable with PHP. I only included this tidbit now to illustrate that it’s not a sin to fail to include every single possible template file as long… as you have a plan.

Theme Files

Now that you understand how template files work, here is a list of the most important, standard theme filenames. Again, you don’t need to include them all as long as you’ve planned for the overlap. You should create a folder right now with your theme’s name in lower case, with hyphens for spaces. Then create blank files for the eacho of the template file names listed below and drop them inside that folder. I advise doing this ahead of time and in one go to make sure I don’t forget any of the files I want to use. I will include ALL of the listed templates in the tutorial for tutoring purposes (no because it’s required), accordingly I encourage you to create blanks for all of these files if you’re going to be following along.

Special Theme Files

In addition to the standard template files below, there are three special, nontemplate ones: functions.php, style.css, and rtl.css. These files don’t represent any kind of page request. We will discuss the first two in great length later, but in summary:

  • functions.php is automatically included in every page and is where you put your PHP functions;
  • style.css is the main CSS style sheet where you assign styles to the different HTML elements on your pages;
  • rtl.css contains specific styles additional styles for langauges that read right to left, and is automatically included if the current language is set to one of those. (Don’t worry about this guy until close to the end).

Also note that header.php, footer.php, comments.php, and sidebar.php are templates, but are not called directly like the others, they are called only by other template files.

List of Files
style.css
Style information, also contains the theme’s biographical data.
functions.php
Contains your PHP functions, automatically included.
index.php
The default fallback template for “index type” page requests.
single.php
Template for a singular post.
page.php
Template for a signular page.
search.php
Template for search results.
attachment.php
Template for images or other attached files (see also image.php).
404.php
Template when a nonexistent page is requested.
home.php
The template for the default home page.
If you’ve chosen to use a static front page, this becomes the template for the list of most recent posts.
category.php
Template for the list of entries categorized under a certain category.
tag.php
Template for the list of entries tagged with a certain tag.
author.php
Template for a list of entries by an author.
archive.php
Used for category, authors, or dates (but only if those specific template files are not included).
date.php
Entries from a specific day, month, or year are requested (index type template ).
image.php
Attachment template specifically for attached images.
front-page.php
The template if you have chosen to use a static page as your home page.
rtl.css
CSS style sheet, automatically included if the language is set to read right to left.
header.php
The common header, or top, of your pages.
Call it using the PHP function get_header().
footer.php
The common footer, or bottom, of your pages.
Call it using the PHP function get_footer().
comments.php
The template for the display of comments, included by the core as needed.
sidebar.php
The template for the primary sidebar content.
Call it using the PHP function get_sidebar().
If you’re using more than one sidebar: get_sidebar('the-id') will summon the template file sidebar-the-id.php.
Just replace “the-id” with the name of your sidebar in the PHP function and the filename.

Once you’ve got all these files created, we will get to work on the first template file and learn as we go! If you’re super lazy, you can just download this zip file I made aalready containing all the blank theme files… but do you really want to start cheating already? The next two sections are about the style.css file and the header.php file. These are also convienient places to teach the basics of CSS and HTML respectively, so I’ve blended the topics together rather than having a boring, abstract CSS and HTML section. Two birds with one stone.

3 Thoughts on “Making a WordPress Theme – World’s Most Detailed Tutorial

  1. George Doe on July 13, 2013 at 4:13 am said:

    The end?

Leave a Reply

Your email address will not be published. Required fields are marked *

Post Navigation