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.
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:
- Download and unzip the WordPress package, if you haven’t already.
- Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.
- Rename wp-config-sample.php file to wp-config.php.
- 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.
- Place the WordPress files in the desired location on your web server.
- 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.
Besides the system root, WordPress consists of tree subfolders:
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:
And the basic files, that usually are used (but are not mandatory) to split the theme code are:
Let me explain each of the files:
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. . */
It’s the main template of the theme. It must be present in order to provide your own themes.
Header template. Here we can add the blog title/logo, menu, etc.
Sidebar template. Can be widgetized or not.
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 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 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.
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:
And the following explanation about each of them:
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.
Template used by WordPress to display a post individually. If this file doesn’t exists, index.php will be used instead.
Template used by WordPress to display a page individually. If this file doesn’t exists, index.php will be used instead.
Template used when a category is queried.
Template used when a tag is queried.
Template used when an author is queried.
Template used when a date is queried.
Template used when one of the previous files (category.php, tag.php, author.php or date.php) is not available.
Template used when the Archive Index is shown. In case it’s not available, the page.php will be used.
Template used when the links list is queried. In case it’s not available, the page.php will be used.
Search form template. When you want to add it, you just have to use:
get_search_form(); // add searchform.php
Search results template.
404 Error template. Used when an article or page wasn’t found by WordPress.
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