Blog design Blogs Highlights Open source

How to create a WordPress theme: A guide for the design-challenged non-geek

I love minimalist designs with great colors. No, that isn’t accurate, make that: I now love minimalist designs with great colors. I used to love putting everything but the kitchen sink in my blog template, hence my previous fascination with three-column themes-to get more screen space for buttons, listings, banners and what have you.

I’ve gone through a lot of WordPress themes, customizing one after another. I decided to simplify my blog design after buttons and stuff that depended on other services and servers delayed loading of my blog pages. I also thought that the clutter of having all these buttons and stuff was getting in the way of the content, and the AdSense clicks. My current minimalist design proves me right on this one.

When I set out to use a minimalist design, I had planned on choosing one of the hundreds of ready-to-deploy WordPress themes out there but at the back of my mind, I had this plan of eventually creating my own theme. I went through designs submitted to the Open Source Web Design site, hoping to spot a great one and then getting a link to the WordPress port of the template. I did spot a great-looking minimalist design, Plain 1.0 by James Koster, but I couldn’t find a WordPress port. I liked the design so much that I decided to attempt porting it to WordPress myself.

I found turning a CSS-based design into WordPress theme to be easy. I am not a geek and I do not have formal training on CSS, HTML or PHP. What I did was I read up on CSS in sites such as MaxDesign. I also went through the WordPress Codex, reading about template tags and files and while I was porting the theme, I went through the template files of themes like K2 and Phoenixrealm to look at how its coders did things.

Here are the steps I took in turning the Plain 1.0 design template into a WordPress theme.


As I said earlier, I found a design to work on by browsing through open source web templates at OSWD. There are other sites that offer free designs out there. If you feel particularly adventurous, you may want to start from scratch, using as foundation CSS-based layouts offered in sites such as this collection of CSS layouts by Layout Gala.

Back to Plain 1.0, here’s a link to the download page for the template.

As you can see from the zip file, it uses an external CSS stylesheet. If the design you choose uses an external stylesheet, just rename the file into style.css. If it uses an internal stylesheet, just copy everything and save it into an external file. Place the following into the first part of your stylesheet.

/* Theme Name: Name your design Theme URI: your web address Description: Include a short description here Version: Your version number Author: */

After saving the stylesheet, view the HTML file to study how the page is laid out. We’re going to cut the HTML up and reassemble it into template files. Here’s a trimmed version of the Plain 1.0 HTML file, I left only one blog article and one link in the sidebar but if you want to view the whole file, you can either download the zip file or go to its OSWD listing to view the source.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Plain 1.0</title> <link href="css/1.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <center> <div id="menu"> <a href="#top">home</a> <a href="#intro">introduction</a> <a href="#css">css &amp; xhtml</a> <a href="#about">about the author</a> </div> <div id="header"> <h1>plain v1.0</h1> <h2>A simple CSS &amp; XHTML web template focusing on whitespace and its importance </h2> </div> <div id="content"> <img src="images/logo.jpg" alt="Your Logo" class="logo" /> <p class="introduction"> Hello and welcome to Plain version 1.0. This is a simple web site template maximising the use of css and xhtml. Whitespace is used in abundance to really push its importance in web design. Navigate the page via the menu at the top of the page, or the links underneath this paragraph. </p> <div id="sidebar"> <h1>Sub Menu</h1> <div class="submenu"> <a href="#top">Home</a> </div> <h1>Other </h1> <div class="submenu"> <a href="">Stepping Stone</a> </div> <div id="mainbar"> <h1><a name="intro" id="intro"></a>Introduction</h1> <img src="images/backgrounds/menu.jpg" alt="AN EXAMPLE IMAGE" title="AN EXAMPLE IMAGE" class="articleimg" /> <p>Hello and welcome to Plain 1.0. As mentioned earlier this is a fairly simple template, powered entirely by css and xhtml. I am also trying to make as much use of whitespace as possible. Whitespace helps keep the page looking clean and easy on the eye, whilst improving readability also. As with all my templates, a limited number of images have been used, and when they have, they've been to aid the design. This results in an easily customisable template that can be used to an array of different sites. </p> </div> </div> <div id="footer"> This is the footer. Put all your copyright info here.<br /> Page designed by <a href="">6ix Shooter Media</a> </div> </center> </body> </html>

After studying the HTML file of your chosen design, mark points in breaking the code up for placement in the various WordPress theme files. Here’s how I did it with Plain 1.0

I took out this part of the code and saved it as header.php
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Plain 1.0</title> <link href="css/1.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <center> <div id="menu"> <a href="#top">home</a> <a href="#intro">introduction</a> <a href="#css">css &amp; xhtml</a> <a href="#about">about the author</a> </div> <div id="header"> <h1>plain v1.0</h1> <h2>A simple CSS &amp; XHTML web template focusing on whitespace and its importance </h2> </div> <div id="content">

I chose to cut it up to this point because I wanted to just hard-code the next part of the code, which calls the logo and the introduction text, into the main index file. This way, I can choose to display the logo and the introduction text only in the main blog index and not in the article pages. Yes, you can do it with conditional WordPress template tags, but I’m still having problems with this and I need to read up more on the topic.

The first thing to change is the call for the CSS file, so I changed:
<link href="css/1.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />

I then changed the title tags to this:
<title><?php wp_title(''); ?> <?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?></title>

What this does is place the blog post title before your blog name. This format helps you in search engine rankings, SEO experts say.

After that, I added a link to the RSS and Atom feeds and my site’s favorites icon. I copied this part of the code from the K2 header.php file.
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="I entered my Feedburner address here so that readers are sent to it and I can monitor feed traffic" /> <link rel="alternate" type="text/xml" title="RSS .92" href="same here" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="same here" /> <link rel="shortcut icon" href="">

I also copied the function for Matt’s Asides but I haven’t gotten around to using it. I also added, again copied from K2, this :
<?php wp_get_archives('type=monthly&format=link'); ?> <?php wp_head(); ?>

For the menu div, I just replaced the links there with links to pages I wanted to appear in the menu item. You can make WordPress automatically place your pages in the menu but I wanted more control in the things that appear in the top bar. I don’t want all pages I created in WordPress to appear there.

For the header div part, the code that calls the blog title and tagline, I replaced it with:
<div id="header"> <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1> <h2><?php bloginfo('description'); ?></h2> </div>

You can choose to just enter your blog title here and link it to the home page but I wanted to share my theme with others who may be interested in using it that’s why I had to use the template tag for the code above.

Intro and logo

For the introduction and the site logo, I chose to just encode it in the main.php template since I wanted it displayed only in the blog’s main page.

Side bar
I copied this part of the template and saved it as sidebar.php:
<div id="sidebar"> <h1>Sub Menu</h1> <div class="submenu"> <a href="#top">Home</a> </div> </div>

I then replaced its content with the template tags for the recent posts and recent comments. I choose to keep this area of the blog lean. I took out buttons for blog rankings, Technorati and Site Meter and place these in the footer. This is because this file is called before the main content div and delays caused by the slow loading of the external blog services would delay the display of the blog posts.

(Next Part: the rest of the template files)

By Max Limpag

Max is a journalist and blogger based in Cebu City, Philippines. He is co-founder of the journalism start-up InnoPub Media.