Martin Ström

WordPress theme

Finally this site looks like something other than the default WordPress theme. Peter and I wanted to connect our work sites to each other and decided to use his simple but easy-to-use WordPress theme as a base.

The problem was that his theme never was cross browser compatible and worked more or less only in Safari. My first task was to re-code the theme from scratch to make it work in all modern browsers using valid XHTML and CSS with as clean and simple code as possible.

I also set all font sizes using em:s (instead of px or pt) to make the text resizable. It wasn’t too hard making it work (even in Microsoft Internet Explorer) thanks to some great resources. Sooner or later I’ll convert the positions, margins etc to em:s as well, but font sizes should be enough for now.

I also added AJAX comments and used effects from I’m using Prototype to add CSS classes to some elements and to wrap i.e. all <h3>‘s content in a <span> to achieve the look I wanted without any unnecessary markup. Since <input type="search" /> only is supported by Safari and I wanted to use it, I used a script (thanks Wolfgang Bartelme) that replaces the regular text input field with a search field for Safari only. This way the document will stay valid XHTML 1.1.

Next task was to make the theme more personal for my site. I’ve tried some different looks but couldn’t really decide how I wanted it and choose (for now at least) a slightly darker version of Peter’s theme. I think it looks good and is easy to use without making too much noise.

When I implanted the tagging I first looked at Ultimate Tag Warrior 3 but it seemed too advanced for my needs, so I decided to use the native category system in WordPress 2.0, that lets one add tags (categories) by just entering them in separated by comma in a text field (WP 1.x didn’t have this feature). The tag cloud is a modified and simplified version of Tag Cloud Plugin.


Update April 20, 2006 The theme is now released in a beta version. Some notes: * You’ll need the [Post Updated Plugin]( to get a page’s last modified date. * My “lite” version of the [TagCloud plugin][tagcloud] can be [downloaded here][tagcloudlite]. * You’ll problably want to change the `autosave` attributes value in `javascripts/global.js` (line #24) to your own unique id. [Read more on the attribute]( I also found this great plugin for the admin area, [Cat2Tag]( The link seems to be broken, get it download it here for now for easier tagging of your content without using a separete database like [Ultimate Tag Warrior 3][utw] does. Cat2Tag just use WordPress’ own categories instead. [Download](
Update May 4, 2006 The [TagCloud plugin][tagcloudlite] is updated to use the [rel-tag]( [microformat](
Update August 18, 2007 Since a lot of people ask me how to get the thumbnails to work, here is the instructions I usually email them:

— ✄ ——————

First, download a newer version of `posts-thumbnail.php` replace the current one (from the downloaded .zip file) with this one attached in this message. Create the thumbnail image and name it “thumb-POST_SLUG.png”. The post slug is shown on the “edit post” screen in the admin (i.e my latest post with title “Rails’ time extensions ported to JavaScript” has post slug “rails-time-extensions-ported-to-javascript” and the thumbnail should therefore be named “thumb-rails-time-extensions-ported-to-javascript.png”). Then just upload the image from the same screen using WordPress’ built-in uploader (you dont have to give it any description or title). Then the theme should automatically find the image for you and show it in the list view.

———— ✄ ——

Btw is a new version of this theme under development and will make the thumbnail handling easier.
Update October 31, 2007 The link to the plugin “Cat2Tag” seems to be down (thanks Kris Aubuchon) so, for now at least, you can download it here. I haven’t really looked into the new tagging system in WP 2.3 so perhaps this plugin isn’t necessary any more.

CSS is in progress