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]

Now that I have my blog up and running, I wanted to talk a little bit about the experience. If you are anything like me, you want your blog to be an accurate depiction of who you are. It should mirror your tastes, your aesthetics, your ideas. My previous attempts at setting up a blog on blogger didn’t take, as it never felt like my own. This time I decided to host my own. So after setting up my [tag]Wordpress blog[/tag] (which was a breeze thanks to the control panel provided by my host [tag]Go Daddy[/tag]), I set about trying to make it my own.

The first thing to do was to find a theme. Wordpress is really cool in that it provides a very open framework by which to customize the look and feel of your blog via it’s [tag]wordpress theme[/tag]s concept. This is a complete contrast to the experience I had with [tag]MySpace[/tag] (see my previous post, “Extreme Makeover: MySpace Edition“). And the number of themes available out there is enough to cover all tastes. At the minimum, it is enough to get you started.

So I proceeded to troll through the various theme collections that were out there.

The Wordpress dashboard sent me to the Wordpress.org themes page that had links to a few websites that got me started. But nothing I found there quite gelled. Just to get going, I ended up selecting the “[tag]Neo-Sapien[/tag]” theme by Small Potato. It wasn’t exactly what I wanted, but it was cool, and worked for now. The image is a little silence of the lambs, but I put in my own anyway. That was my first go.

But it wasn’t exactly what I wanted. So a few days later, I started messing around with it to see if I could mould it into what I wanted. That’s when I discovered the real power of the [tag]theme editor[/tag] (Your Wordpress dashboard -> Presentation -> Theme Editor). If you know some HTML and CSS, and can understand enough to copy-paste the php macros, the theme editor allows you to modify the files that make up the theme in order to change the appearance of your site. You can make little tweaks, apply the changes and see what the effect is. That gave me quite a few hours of fun. And gave me the germ of an idea about how to make this blog my own.

Look for my next post on this topic, as I talk about how I came up with a theme to my specifications without doing all the work of creating my own theme from scratch.

[tags]Tech, Web 2.0, Blog customization, Blog skinning[/tags]