Having figured out how to use the [tag]wordpress theme[/tag] editor to modify the theme of my blog, I arrived at a different idea on how to make the look and feel of my blog my own. I was going to design my own layout and look and feel, find a pre-existing theme that has most of the same characteristics, and then customize that theme after deploying.

I spent a few days designing my blog layout. Having just gone through that exercise for my [tag]MySpace[/tag] page, which I had since shut down, I decided to use that look here. It was a pretty good one, and had most of the characteristics that I wanted – clean layout, few colors with a dominance of black (which fits in with the color scheme of my website). I also liked some aspects of the boxed content layout so prevalent on MySpace. So that got me to a basic look for my blog.

I then proceeded to search for a theme that was close enough to what I wanted. The colors didn’t really matter in this. What mattered were the characteristics of the theme:

• 3-column layout
• Horizontal list of pages in the site (automatically generated and not hard-coded)
• Archive Calendar
• Categories list and Recent Posts list
• Search box
• Clean, boxy layout

I didn’t find any themes that had all of these, but I did find one that was close enough. I applied the theme and proceeded to go to town on the stylesheet and sidebars in the theme editor. The original theme didn’t have a [tag]page banner[/tag], but that was just simple HTML in the header.php file. Soon enough I was closing in on my vision for my blog.

Interesting sidebar: In editing the files for the theme, I found that some of the files contained hidden links to an adult website. Turns out that this was how the theme designer was making money from the creation of this theme. Everytime a page on a blog that used his theme would be launched, it would hit the adult website, earning his account money. Sneaky. Something to watch for when you download and apply a theme.

To customize the stylesheet, I simply loaded a page from my blog and looked at the source code. Sure enough, most of the content was suitably tagged with classes or ID’s. This made it very easy to navigate the existing stylesheet and make the necessary changes. Once I got the hang of the overall style structure, I was able to add my own classes to the stylesheet, and use it where necessary.

Creating the [tag]horizontal list[/tag] of pages at the top was the most challenging aspect of this process. This is because the macro that returns the links returns it as an unordered list. This restricts what you can do with it with regards to layout, and also forces you to deal with the differences between IE and Firefox (the two browsers I test against). A valuable resource for trying to format lists that helped me immensely is “[tag]CSS Design[/tag]: Taming Lists” by Mark Newhouse.

Anyway, a few more tweaks and I was closing in on my design. However, there were still some things missing. The theme I downloaded did not have the “Recent Posts” section in it. So I had to search for Wordpress macros. And since I was there, I decided to look and see what other useful macros I could find. I found that documentation for the macros was a little uneven. Some are well-documented, while others are missing key pieces of information. So after a while I gave up. Thankfully, the recent posts macro is pretty easy to use and well-documented. Once I had that, I was good to go.

Next up – adding some cool widgets to my blog.
[tags]Tech, Web 2.0, Blog customization, Blog skinning, blog layout[/tags]