Creating a WordPress Theme — Part 1

Last week, we created an HTML/CSS template from a Gimp .xcf file. Today, we will get started with converting it into a WordPress theme. This is sort of a sub-series, because you can follow similar instructions for a different template, but we will be using the one we created last week.

Today, we will just get started with a few basic things to get started with this theme.

For this sub-series, it is recommended that you have WordPress installed locally. Here's how to do it for Windows, and for Macs. For Linux, steps will vary from distro to distro.

So, let's get right into this!

The Files

The first step to do would be to move your template files into a directory in wp-content/themes/. Rename the file "index.html" to "index.php", and make sure that your main stylesheet is called style.css.

style.css

The style.css file will contain some of the basic information about the theme, such as the theme name, author and version.

At the top of style.css, paste in the following code.

/*
 * Theme Name: Gimp Tutorial
 * Theme URI: http://fwebde.com/
 * Description: Wordpress theme for a Gimp tutorial
 * Version: 1.0
 * Author: Eric Bannatyne
 * Author URI: http://fwebde.com/
 */

This is simply a long comment that contains the basic information for your theme. The names of the settings should be self-explanatory. Change them to whatever you want, all they will affect is the name that you have to remember.

index.php

For the rest of this part of the tutorial, we will be focusing on the index.php file.

The Header

One of the parts of the template that has to change the most is the header. This includes the <head> element, plus the visible header of the page.

Firstly, replace everything between <head> and </head> with the following code.

	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
 
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />	
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> 
 
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 
	<?php wp_get_archives('type=monthly&format=link'); ?>
	<?php wp_head(); ?>

This gets the title of the blog, plus some meta information. Then, it links to the stylesheet, plus RSS feeds and the pingback url. After that, it gets the archives, and then calls wp_head(); to get some more header information from WordPress.

Next, we will change the logo into a link to the home page.

Change the contents of <div id="header"> to:

<h1><?php bloginfo('name'); ?></h1>
<div id="logo"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"></a>

This adds the blog's name in between the <h1> tags, plus a link to the blog's home page. When your cursor is hovering over the link, you should see a tooltip with the blog name. This is done with the title attribute.

Navigation

The next part that we will look at today is navigation. Inside of <div class="box" id="nav">, there should be a list of links. Replace that list with the following code.

<ul id="pages">
    <li><a href="<?php bloginfo('url'); ?>">Home</a></li>
    <?php wp_list_pages('depth=1&title_li=') ?>
</ul>

The first list item is a link to the home page. After that, we get the rest of the list, with a depth of 1, and without a title.

The Footer

The footer for this theme is very simple. To create a copyright notice, add in the following code.

<p>Copyright &copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>.</p>

This creates a copyright notice that will change to reflect the current year, with the blog's name automatically added in.

Subscribe to the RSS feed to get updates, and check for the next part of this sub-series, where we will deal with the main content, including using multiple "loops".

As always, if you have any questions, be sure to leave a comment.

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

5 Comments

  1. November 2, 2009

    Hey thanks for this startup, I will be watching this space to learn more about wordpress theme

  2. November 5, 2009

    Hey, nice tutorial. I will give it a try, when I have some extra time. I am looking forward to part 2.

  3. November 5, 2009

    Thanks! The next part should be published by Monday.

  4. May 28, 2011

    Thanks for the tutorial! I am in the process of learning how to do this right now, so every little think helps :)

  5. May 28, 2011

    Thanks for the tutorial! I am in the process of learning how to do this right now, so every little thing helps :)