How to Create a WordPress Theme - Part 1

July 5th, 2007 ·

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Creating a WordPress theme is not quite as hard as one might think. Since you are reading this article I assume you are a either a web developer and want to know how to create your own theme or you are running a blog and want some one to create a theme for you. If you belong to the later category this article will help you in knowing what to communicate to your theme designer. In this article I am talking about what you must know before you actually create a theme. In next articles I will go deeper to actually create a fully functional theme step by step.

Before You Begin

Here is the high level plan. Before you start developing your theme, you must decide a few very important things.

Columns

For any WordPress blog, you must decide whether the site will be a 2-column or 3-column. These are the only A single column theme is also possible, but obviously it gives little room to play with the placement of your objects. Whether you choose 2 or 3 columns, you should allow clear readability of your contents for your readers. So moderate amount of space should be available between different segments of your theme.

Color Selection

Color selection is also a decision that affects the looks of your theme widely. Poor selection of colors may result in poor readability, and loss of readers. Not only the main colors are important but colors for your headings and links are also very important. You need to absolutely make sure that colors of your theme are perfectly visible for the audience you are targeting. A lot of people prefer light background colors, but its not necessary. You can be as innovative as you want in this area. However you must care for the readability.

Contents Placement

You need to decide which element should go where. Generally for a 2-column theme, your main contents will stay in one wide column. Rest of the stuff fills your sidebar. The side bar may contain list of categories, a tag cloud, links , ads etc. So plan ahead for the width of the sidebar.

Step 1 - Graphic Design

If you are a graphic designer design the front page of your theme before you go any deeper. Once you are happy with the front page there will be a bunch of pages you need to design. These are :

Single Post Page
Archive Page
Category Page
Search Page
Site Map
About Page
404 Page

The pages need to be consistent enough to give the impression that they are part of the same theme. They may differ with each other slightly as the need arise.

Step 2 - Generating XHTML

This is also one of the most important step. The XHTML you generate for your pages will play important role in search engine optimization. Although it is your content that bring you the audience, but the better planned XHTML may actually help you bringing more audience to your site. You need to care for different browsers while generating your XHTML. Your theme must be perfectly displayed on IE / FF and on Opera as minimum.

Also the both XHTML and CSS generated must be valid. This will give a peace of mind to the user of your theme that you are following standards.

Also it is imperative that you use DIV as a placement and layout tool in XHTML. Using table is not recommended at all for your any thing that is not tabular in nature. So your side bar / main content area header and footer must be positioned using DIV only.

Step 3 - Php Code Generation

Before you start generating php code for your theme, you must have the previous step completed. This will allow you to concentrate only at the task at hand. Practically, its possible to design a WordPress Theme with very files, and theoretically, you can just design your theme in a single file index.php. However it is much better to include at the following files as a minimum. These files will spit out different sections of the page under execution. Here is the list of files that you will need to generate.

index.php
header.php
footer.php
single.php
archive.php
archives.php
category.php
comment.php
search.php
page.php
404.php

The purpose of most of the above files is already clear with name. However here is a little explanation.

index.php : displays the front page. Generally this page will list teasers of most recent posts.
header.php : used to emit header of your theme.
footer.php : used to emit the footer of your theme.
single.php : displays one post in full.
archive.php : displays archive entries from a particular month
archives.php : displays links to archive entries of the life time of the site. This may include list of categories.
comment.php : contains the comment form.
page.php : displays one complete page .. like about page.
search.php : shows the search results.
404.php : displayed when a malformed link is invoked by the user and there is nothing else to show.

In the next article we will start picking an html of a front page and will create associate php files.