Blog » Post

« Gallery Available Proper HTTP Content Negotiation in PHP »

I support web standards, which is why I chose WordPress as my CMS of choice. WordPress declares itself as a “state-of-the-art semantic personal publishing platform with a focus on aesthetics, web standards, and usability.” It’s also written in PHP, which is my programming language of choice when it comes to designing web applications. Overall, after having set up this website, I have found that WordPress (tries) to be W3C compliant in terms of XHTML and common web practices, and is also not that hard to customize. In this post, I will detail the steps that I took in creating a custom theme for WordPress.

Arming Yourself

Now, I assume you have a basic understanding of PHP and HTML (XHTML & CSS preferably). It is also imperative that you get to know WordPress before you starting hacking at it. If you haven’t already, I recommend installing it on an offline server and start using it as you would think you would use it. You’ll soon realize, as I did, how WordPress was meant to be used and will likely adjust how you will want your blog setup. I also recommend setting up a separate development environment so you can play and hack at it without fear of breaking something, as you should have a good copy and a development copy.

Before you starting building a theme, go out and get some inspiration. More then likely you’ve seen some really nice looking blogs and wished you had something like that. Fear not, even you can do it. Best thing to start doing is looking at blogs that you like and writing down the features of it that catch your eye. Your going to need to make a decision soon on whether you want a static width page or a dynamic one, or whether it will have rounded corners or be square/paper-like. Write down what you like best about your favorite sites and try to come up with an idea of how you would like your website to go together. If your lacking inspiration, be sure to check out websites that showcase people’s CSS talents such as CSS Vault, CSS Import, Liquid Designs, and CSS Zen Garden.

Prototyping

OK, most of you will likely be at this point if the title of this post caught your eye. In any case, the first step in designing a custom theme is to prototype one. After many different attempts at starting a website, I found the best way was to boot up Photoshop and draw an example of what the website looks like in my head. You’ll quickly notice that, when you do this, somehow it looked different in your mind. This is apparently quite common with new designers (myself included) .

If your using Photoshop to sketch out your ideas, make sure to use a lot of layers - for everything. They are so handy when your tweaking around the placement of objects, or when you need to quickly add/remove a border or button. They will also come in really handy when your ready to take apart your prototype to get individual images for your site. You can use the layer folder to hold things such as the header, body, sidebar, etc.

Initial Concept of GaryCourt.com

After playing around with some ideas, this is what my initial concept of how GaryCourt.com would look like. As you notice, the idea stayed mostly the same till the end.

OK, so our prototype is not done yet. I highly recommend that the next step of the prototype phase is to actually develop an HTML file that looks like the prototype image we drew. This way, you can identify the problems of your design in terms of transforming it to HTML, and be able to experiment and troubleshoot your template without having to additionally diagnose WordPress issues. Keep in mind where the dynamically generated content will be and make sure your site handles different amount of content in those areas as you will have little control over this.

Your framework should look something like this:

<html>
<head>
  Title, Metadata, Stylesheets, Additional WordPress Stuff
</head>
<body>
  <div class="page">
    <div class="header">
      The look of your header, very little WordPress stuff other then the blog title.
    </div>
    <div class="content">
      This will contain the main WordPress loop. Should be as flexible/large as possible.
    </div>
    <div class="sidebar">
      This will also be mostly dynamically generated. 
      WordPress likes to use unordered lists in the sidebar, so code appropriately:
      <ul>
        <li>
          Title
          <ul>
            <li><a href="">Link</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="footer">
      Similar to header, except at the end of your page :-P 
    </div>
  </div>
</body>
</html>

Hacking

Ok, now to make WordPress do our biding. During this phase you should have the WordPress Codex bookmarked as you should be refering to it frequently for questions regarding the WordPress API.

Start off by copying the default theme to a new folder, naming it whatever you want to call your theme. Next, open style.css and edit the fields in the initial comment header. At the very least Theme Name needs to be changed. Wordpress uses this information for the theme selection (Admin > Presentation) page and needs to be different for every theme. For example, my site’s header is:

/*  
Theme Name: Gary Court
Theme URI: http://garycourt.com/
Description: A Wordpress theme for GaryCourt.com
Version: 1.0
Author: Gary Court
Author URI: http://garycourt.com
 
Copyright 2005 Gary Court - All rights reserved.
 
*/

For my theme, I didn’t need all the files contained in this theme. Your mileage may vary, but for my theme I only needed the following files:

  • 404.php
  • archive.php
  • comments.php
  • footer.php
  • header.php
  • index.php
  • page.php
  • search.php
  • sidebar.php
  • single.php
  • style.css
  • images/

The most important files here are header.php, footer.php, sidebar.php, and index.php. The first three should be obvious enough what they are. Within index.php (and the others as well), you can use the function calls get_header(), get_footer(), and get_sidebar() to auto-import those files. If you prefer having everything in one file, copy the classic theme instead as it uses this method.

Start going, one by one, through each file (start with the four listed above first) and cut your prototype HTML file up into the proper pieces and fit them in. You should be able to look at any given file and, from the context of the file name, figure out how it works. I know I am rushing this, as this is the section where everyone is likely to get hanged up on, but the codex and Google has more then several articles detailing how the internals of WordPress works.

This step will take some time as you play with it and learn how the WordPress Loop works. Eventually you will get a basic blog in your theme. During this step, you should post various posts, pages, and comments to see how your theme handles dynamic data. You will also likely, during development, say to yourself “I wish I could do X, but I can’t find X in the docs.” Well, don’t worry, chances are you can do X with a plugin.

Plugging In

One of the greatest features of WordPress is the ability to use plugins to add and extend your site in ways it wasn’t intended. Plugins for just about anything you can think of can be found at the WordPress Plugins Database, WordPress Codex, or Google. Some plugins may require you to modify your theme in order to add special function calls to the header/sidebar, so make sure you test thoroughly before production.

For example, GaryCourt.com uses the following plugins: (this list may be outdated by the time you read it, but you get an idea)

Include Page
This plugin adds an include_page() function that allows you to insert the contents of Page into your theme. Used for the Home page introduction.
intouch
‘intouch’ allows you to insert a custom build contact form, which on submission will send the information via email. Used for the Contact page.
Jerome’s Keywords
Allows keywords to be associated with each post. These keywords can be used for page meta tags, included in posts for site searching or linked like Technorati tags. Used for tagging posts.
Jerome’s Search
Extends WordPress’ search to include post excerpts and meta values.
Post, Upload and Paste
Adds quicktag, popup window, and “add to post” link for quick uploads during posting. Used for quickly uploading post images.
Related Posts
Returns a list of the related entries based on keyword matches. Used for the “related posts” section of the sidebar.
Spelling Checker
Allows checking of spelling for posts, using the Speller Pages open source project.
WPG2
Embeds Gallery2 within Wordpress to share photos, videos and any other Gallery2 content seamlessly into Wordpress Blog entries.

Send Off

So, hopefully you get an idea on where to start and what I did in order to build the GaryCourt.com theme. Getting WordPress and Gallery 2 to get along is a whole nother story and, unless your patient and persistent, don’t recommend it.

One Response to “Developing a Wordpress Theme”

  1. Problogging » Blog Archive » Marketing your business (err…blog) Says:
    February 20th, 2006 at 7:51 pm

    […] 1) Develop a Kick Ass Wordpress Theme to release. It’s not all that hard to do. Here’s a simple how-to guide. 2) Spend an hour a day marketing your blog. Basically go comment on other blogs, submit your site to directories,hang out in forums,digg articles that are valuable. […]

Leave a Reply

CourtNET