How to convert any web template into a WordPress theme

Among blogging applications, WordPress probably has the largest number of great-looking themes to use. Still, there are hundreds of free and even open source web templates not yet converted to work with WordPress. Knowing how to make this themes work with WordPress broadens your choice of design to use for your blog.

Converting a web template is fairly easy if you take the time to learn how to do it. I wrote this guide for someone like me a few months back — eager to use a great looking web design and yet not knowing how to start converting it to work with WordPress. If you want to view a video tutorial on how I turned this open source web design into this WordPress theme, click here for the blog post.

Turning a web template into a WordPress theme: a video tutorial

Knowing how to turn any web template into a WordPress theme broadens your choice of designs to use for your blog. I created this video tutorial for someone like me a few months back: eager to attempt turning a great looking open source web template into a WordPress theme but not knowing how to start. If you want to read a tutorial based on the screencast, click here.

For the screencast, I turned this open source web template into this WordPress theme. The video tutorial ends with the creation of the different WordPress theme files. The part when I activated the theme, tweaked it, and fixed errors wasn’t captured as I ran out of virtual memory. I just included notes on the tweaking after the screencast below.

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.