WordPress

Creating a WordPress Theme (Part 2): Introduction

In this second post from our series about WordPress theme creation, we’re going to give you an introduction on how the themes are structured. First I’ll show briefly how to install WordPress and how the folders were structured. Later we’ll continue to an overview and further explanation about the necessary and additional files of a theme. I’ll also show some functions used by WordPress to structure the web pages.

Introduction

A WordPress theme consists basically of PHP and CSS files that, together with WordPress itself, define how your site will look and work. But before we start working on our theme, let’s see how we install WordPress. You’ll need the following software:

For more information on how to set up a server for local development, see: Setting up a PHP development environment for Windows.

Now that your server is up and running, download WordPress 2.9.2 (latest version so far). The installation is pretty simple and is know as the 5-Minute Installation. This is from the WordPress website:

  1. Download and unzip the WordPress package, if you haven’t already.
  2. Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.
  3. Rename wp-config-sample.php file to wp-config.php.
  4. Open wp-config.php in your favorite text editor and fill in your database details as explained in Editing wp-config.php to generate and use your secret key password.
  5. Place the WordPress files in the desired location on your web server.
  6. Run the WordPress installation script by accessing wp-admin/install.php in your favorite web browser.

Now that we have our blog installed, we can start working on our theme.

Directory Structure

Besides the system root, WordPress consists of tree subfolders:

  • wp-admin
  • wp-content
  • wp-includes

The most important subfolder for us is the wp-content. In this folder we can find the plugins (wp-content/plugins/) and, of course, the themes (wp-content/themes/). In the themes folder we will find all files related to our theme. Most of the files are templates that use standard WordPress functions to connect to each other and display the blog the way we want. Let’s explore further how the theme folder is structured.

The mandatory files for a theme are:

  • style.css
  • index.php

And the basic files, that usually are used (but are not mandatory) to split the theme code are:

  • header.php
  • sidebar.php
  • footer.php
  • comments.php
  • comments-popup.php

Let me explain each of the files:

style.css

In this file, besides style information for our theme, we must add all information about our theme because WordPress will use the information from this file to display our theme in the Dashboard (WordPress admin area). The information must be added like comments in the beginning of the file. Here is an example:

/*
Theme Name: Theme Name
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number--optional
.
General comments/License Statement if any.
.
*/

index.php

It’s the main template of the theme. It must be present in order to provide your own themes.

header.php

Header template. Here we can add the blog title/logo, menu, etc.

sidebar.php

Sidebar template. Can be widgetized or not.

footer.php

Footer template.

The 3 previously mentioned templates can be included in any other template, like index.php, using the following code:

get_header(); // add the header
get_sidebar(); // add the sidebar
get_footer(); // add the footer

comments.php

Comments template. If the file doesn’t exists in the theme’s folder, WordPress will use the comments.php from the “default” theme. In order to add the comments inside other template you can use:


comments_template(); // add the comments

comments-popup.php

Comments popup template. It’s not mandatory because usually it’s not enabled. If the file doesn’t exists in the theme’s folder, WordPress will use the comments-popup.php from the “default” theme.

Additional Files

There are additional files that are used as templates for different queries. For example, when you select a Category WordPress will search for the category.php template, if this template is not available, it will use arquive.php. In case it’s not available, then the file to be used is index.php.

Besides the templates, there are also specific functions that can be added to you theme through the file functions.php.

You can create as much additional templates as you want. They can be used when you create a new Page, you just need to select it. Here is a list of additional files that are used frequently:

  • functions.php
  • single.php
  • page.php
  • category.php
  • tag.php
  • author.php
  • date.php
  • arquive.php
  • arquives.php
  • links.php
  • searchform.php
  • search.php
  • 404.php

And the following explanation about each of them:

functions.php

This is a very important file for your theme because it allows us to add advanced features. It will be automatically loaded by WordPress in the admin area and in the external, allowing you to add specific functions for your theme. You could add here a function to load your latest tweets for example, or you can add a menu option in the Dashboard through this file.

single.php

Template used by WordPress to display a post individually. If this file doesn’t exists, index.php will be used instead.

page.php

Template used by WordPress to display a page individually. If this file doesn’t exists, index.php will be used instead.

category.php

Template used when a category is queried.

tag.php

Template used when a tag is queried.

author.php

Template used when an author is queried.

date.php

Template used when a date is queried.

archive.php

Template used when one of the previous files (category.php, tag.php, author.php or date.php) is not available.

archives.php

Template used when the Archive Index is shown. In case it’s not available, the page.php will be used.

links.php

Template used when the links list is queried. In case it’s not available, the page.php will be used.

searchform.php

Search form template. When you want to add it, you just have to use:


get_search_form(); // add searchform.php

search.php

Search results template.

404.php

404 Error template. Used when an article or page wasn’t found by WordPress.

Conclusion

This is pretty much everything I wanted to show this time. This is pretty much the Introduction for the WordPress themesm with the basic structure that we will be using in the next posts. We’ll start with the development of our theme, using the design created in Part 1. Besides the files I explained in this article, we’ll also add other files like images and scripts. Thanks for the visit!

Other Posts from the Series
Creating a WordPress Theme (Part 1): Photoshop