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.
So, let's get right into this!
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.
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.
For the rest of this part of the tutorial, we will be focusing on the index.php file.
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
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 for this theme is very simple. To create a copyright notice, add in the following code.
<p>Copyright © <?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.