This is part of a series of posts on how to create a Wordpress theme. See also: Step 1 and Useful Resources.

Now we have the basic layout (we could have spent a lot of time at this point working on the design), let’s turn it into a very simple Worpdress theme: an index.php file and a stylesheet, style.css.

What to put in each file:

style.css contains all the stylesheet information, I have cut and pasted this over from my original layout (see the code in the heaader). There’s also a few lines put up at the top which are used to describe your theme:

index.php is very similar to my original layout but with some minimal Wordpress code.

Use the Wordpress manual tag reference list, add tags to the HTML. I have used the following:

• <?php bloginfo('name');?> in the title of the page, pulled in from your Wordpress » Options » General settings.
  Why use code when you can just write the title in there? Later on, you may want different pages to have different titles and code can do this for you. Also, if you want to change your blog’s name later on, you can change it via the options page and not muck around in templates. Also, if you want to share your theme with others, you don’t want your blog name turning up everywhere!
• <?php bloginfo('stylesheet_url'); ?> is used for the stylesheet, instead of hard-coding in the location of it. If you share your theme with others, or move your blog, this will change automatically for you.
• <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <h2><?php the_title(); ?></h2>
  <?php the_content(); ?>
  <?php endwhile; else : endif; ?>

  This code tells Wordpress to display the title and content of the posts. It’s a very simple “Wordpress loop”. Wordpress will figure out what to show on different pages of the site as long as you have one of these loops in there. Basically, you can ignore understanding code in the first part of the loop and the last part - just know it needs to be there. The bit in the middle is where you get Wordpress to display your content. For my simple loop it is:

  <h2><?php the_title(); ?></h2>
  <?php the_content(); ?>

  In other words I use two Wordpress tags, the title and the content. There are plenty of other tags on the tag reference list that you can use in here.

Here’s the index.php template:

Download the zipped theme: summer-2007.zip

Install the theme (preferably on a test site since it’s a teaching template): unzip and drop the folder into your wp-content/themes/ folder.

Next step: Expanding out the template to have more functionality (e.g. linking to each post and having comments).