My WordPress Theme is now officially out of Beta and in version 1.0. It is called Collaborate and can be seen in full flavour here or downloaded here.

I have split this wrap up into two parts. One about you and one about me, sounds fair right! This first one will be all about what YOU can learn from me and my experience developing my first theme.

First of all: It’s not as difficult as it looks!

The above statement should obviously be seen in the right context. If you are comfortable with WordPress’ template system and have modified or even build your own template files from scratch, then it shouldn’t be a problem. If you have never done anything to your template files and just downloaded and installed them, then you might be better off trying to modify a few templates and learn the codex before creating your own theme. You don’t have to know a lot of PHP, but if you want some specific functionality it does help with some prior knowledge of this language.

The Process

Requirements

The first thing I would have liked to know about before hand was the requirements that WordPress have set out for themes. WordPress simply won’t accept your theme if you don’t meet these. It gives a good foundation to start with to make sure you take everything into account before starting to plan your theme.

Planning

Probably the most important thing; plan everything before you start. You need to have a checklist for everything that needs to be in your theme. You don’t know where your theme is going to be used, so make sure it can handle everything: Nested lists, parent child categories/pages etc. As long as you are aware of it and inform the users of it it’s not a big problem. You save user a lot of time downloading and installing your theme if you just tell them up front.

Design Wireframes/Mockups

This goes hand in hand with the planning stage. Have your checklist besides you while you design your mocks so you can check it off when ever you have included an element in the design. One thing I didn’t include in my mockups was the list of categories and tags on every single post page. It was a design decision to leave them out, but then I saw that WordPress requires them to be there and I had to find a spot for them at a point were I considered the theme done. You want as few of these surprises as possible, otherwise your theme quickly starts to look cluttered. Think about how many ‘different’ pages you want, do you want a different home page and how do you want to display your single post pages and archives, the more uniform all these pages are the easier for you.

The Checklist

Ideally every single element that WordPress uses should be included in your checklist but most importantly are content elements: The elements that authors are likely to use from within the post editor. This includes <ul><li><h1>-<h6><ol><em><a>.

Other important elements include sidebar items, page lists, categories, archive pages and search results. This is a sample of the html page WordPress uses in their theme previewer, if you look through the HTML and use these elements as your checklist you should be covered.

Widgets

Widgets sound like an awful technical term. But it isn’t as complicated as it might appear. As long as you design your theme having in mind that the whole side bar is an unordered list and every single list item is a separate sidebar widget. Every widget is optimized to work with this markup. So just imagine your markup like this and you will be fine (see next paragraph for how to make you theme accept widgets).

<ul id="sidebar">

<li id=”about”>

<h2>About</h2>

<p>This is my blog.</p>

</li>

<li id=”links”>

<h2>Links</h2>

<ul>

<li><a href=”http://example.com”>Example</a></li&gt;

</ul>

</li>

</ul>

Widgetizing Your Theme

If you follow the above example you literally only need to add four lines of code to your templates and your theme is automatically widget ready. First if you haven’t already, create an empty php file in your theme directory and call it functions.php. It should have the following two lines at the top:

<?php

if ( function_exists(‘register_sidebar’) )

register_sidebar();

?>

Then go back to your sidebar and add the following two lines so your sidebar now looks like this:

<ul id=”sidebar”>

<?php if ( !function_exists(‘dynamic_sidebar’)

|| !dynamic_sidebar() ) : ?>

<li id=”about”>

<h2>About</h2>

<p>This is my blog.</p>

</li>

<li id=”links”>

<h2>Links</h2>

<ul>

<li><a href=”http://example.com”>Example</a></li&gt;

</ul>

</li>

</ul>

That’s it your sidebar will accept widgets. You can do more advanced stuff with this markup, you can even add a second sidebar like I have done in my theme or change the markup structure through your functions.php file. Look through this article for more info or take a look at my functions.php file.

/Kasper – on Twitter and Delicious