I recommend that before you begin, you familiarize yourself with the WordPress file structure by analyzing as many WordPress themes as you can (Note: You need to have a basic understanding of HTML and CSS.)

Getting Started

Begin you begin coding up the theme, you must understand that the WP theme is just like any other HTML webpage, except that it is coded with PHP. Even so, you don’t need to be a PHP expert to do up a WP theme. My advice is:

WordPress File Structure

The basic file structure of a WordPress theme is as follows: Other files that you will also find in a WordPress theme are: A simple layout of the theme

Once you have got your HTML webpage ready, you can begin to slice up using the above layout as a guide. To begin, you can either use an existing WordPress theme as a starting point (the WordPress default theme is a good one to start with. You don’t have to code it up from scratch, just amend the necessary stuff will do). Or, if you are adventurous, you can just start coding without one.

Main Index Template (index.php)

I suggest that you begin with Index.php because this is the file that ties all of the other WordPress files together. The first step is to call the header file. This is done by adding

The next essential piece of code you should add to the main index file is to tell WordPress how to behave if there are blog posts. This is accomplished by entering

You will then enter code on how way the page will be structured. This will vary according to how you want your page to look like. For instance, magazine-type look is going to be different than a blog-type one. After entering your code, you will have to add the following lines that will tell WordPress what will happen if there are no posts:

After entering the behavior of the page, you need to call the sidebar and the footer. This is done by adding the following lines of code:

On the whole, it should look like this:

Your HTML code here for displaying individual post. Your HTML code here when there is no post available

Stylesheet (style.css)

The cascading stylesheet includes all the formatting and styles for your WordPress theme. This will provide more flexibility to your theme instead of hardcoding them into each individual file. It is created just like any stylesheet. If you need a refresher, check out the W3 Consortium’s CSS style guide.

Header File (header.php)

The header file is like the beginning of an HTML file. Most of the time, you can just copy and paste from the default theme. The basic code that will be in the header file is as follows:

><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?>

The sidebar is how you want the sidebar to look like. You can have more than one sidebar. However, we are creating a simple WordPress theme, so we will stick with one. People usually like placing widgets on the sidebar, so you should add code to ensure that your WordPress theme supports widgets. You can also have any standard sidebar items that you want without having to use a widget. Sidebar basic are as follows:

The code above will check if the theme supports widget. If yes, it will load all the widget content onto the template. else, nothing will show up on the template. To widgetize your theme, simply add the following code to your functions.php '
  • ', 'after_widget' => '
    • ', 'before_title' => '

    ', 'after_title' => '

    ', )); ?>

    The footer file will close the WordPress theme. You can place anything you want in the footer. You will usually see the copyright information here. The basic code to create the footer file is:

    As I stated before, if you have never created a WordPress theme, but are knowledgeable in CSS and HTML, then check out the structure of existing and various other WordPress themes, and begin creating your own WordPress theme.