Creating my own WordPress theme, but not from scratch

I’ve just finished initial work on turning an open source web design into a WordPress theme. I had set out last week to attempt creating my own WordPress theme and offer it for download to anyone who might be interested in using it.

I browsed through the designs submitted to the Open Source Web Design site for inspiration and when I found Plain 1.0, done by James Koster, I decided to just use it and port it to WordPress. Plain 1.0 is a great-looking minimalist design that makes use of a lot of white space. It was XHTML compliant before I started working on it.

I’m no geek but that’s what’s great about open source, you can build on what others are doing. I found turning a ready-made design into a WordPress theme surprisingly easy, with the help of the extensive documentation in the WordPress codex. I also went through some of the open source WordPress themes I loved and used pieces of code from it for the design.

For instance, I used K2‘s code used to generate the web pages’ title because it places the blog article’s title before the site name, which is good for search engines ranking. I also used K2’s archives page for this theme’s archives. This means the theme has built-in support for Extended Live Archives as well as ready-to-deploy Ultimate Tag Warrior tag cloud archive. I still have to look into the CSS for Extended Live Archives as the default one looks ugly in the theme.

I also included into the template, links for saving the articles into, YahooMyWeb, Spurl and Furl. While this can be done through WordPress plugins, I think doing it through the template files is better.

The theme has built-in support for Gravatars, Related Posts (but I’m thinking of using Related Entries 2.0 instead) and Ultimate Tag Warrior. I’m still trying to implement Matt’s Asides and segregate it from regular posts so that you can style your asides separately and even present a different ad format for asides and regular posts. I will go over K2’s theloop.php file and study whether I can rip it apart and use it for the theme.

I’m also still trying to integrate FAlbum, a plugin that integrates your Flickr photos into your WordPress site. If I am able to successfully do that, the theme will have built-in support for FAlbum.

The theme will have built-in support for displaying Google AdSense or any other ad only in the first post in the index page, floating within the content area. Google AdSense’s heatmap says this is the optimal position.

I’ll zip the files up as soon as I clean it up and after this month ends since I already have a bandwidth warning from my web host. There are still orphan files like theloop.php. I wanted to follow K2 and have the WordPress loop in a single file for easy editing but I’m a moron when it comes to formulating conditional statements and I couldn’t make the loop behave differently for single pages and the main index. For instance, I wanted the social bookmarks link to appear only in single posts but since I wasn’t able to do this with a conditional statement in the loop, I just ripped it apart and placed the loop in single.php.

I’ll offer the files for download over the weekend, including the PSD of my sketch you see up there in the main page so that you can easily replace it with your photo. I used one of the Photoshop tutorials on how to render a scotch tape for it.

I’m still tweaking the theme, any suggestions? Would you be interested in using it?

Support this blog and independent reporting on Cebu

7 responses

  1. Nice work, i’ve done the same with one of the dreamweaver templates, i’ve changed it a bit and removed some but it’s really a port for wordpress, see what you think!

  2. Are you still working on this theme? When will it be released?

    – MENJ

  3. MENJ,
    Yes, I’ve been distracted by a few pressing tasks but I’ve already done the theme. It’s just a matter of cleaning it up and packaging it for download.

  4. That’s great, looking forward to it! 😀

    – MENJ

  5. Nice done. I have read some information you can create wp themes on photoshop, but how to do it? any links tutorial about this?


  6. Randie Avatar

    Thanks. I enjoyed this article. Would you consider sharing how you integrated FAlbum to your theme in another article?

  7. Hi,
    is there a demo already available. would be intersting to see it, even without the gallery script.
    greets from germany

Leave a Reply

Your email address will not be published. Required fields are marked *