Finally this site looks like something other than the [default WordPress theme][default 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][peters 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][em1] [great][em2] [resources][em3]. 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 [script.aculo.us][]. I’m using [Prototype][] to add CSS classes to some elements and to wrap i.e. all `

`'s content in a `` to achieve the look I wanted without any unnecessary markup. Since `` only is supported by Safari and I wanted to use it, I used a script (thanks [Wolfgang Bartelme](http://www.bartelme.at)) 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][utw] 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](/martin/tags) is a modified and simplified version of [Tag Cloud Plugin][tagcloud].

Download

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.

[tagcloud]: http://register.intruder.ru/2005/08/30/tag-cloud-plugin/
[tagcloudlite]: /assets/uploads/tag_cloud.php.html "Click here to download"
[peter]: http://konst-teknik.se
[peters theme]: http://konst-teknik.se
[default theme]: http://themes.wordpress.net/wordpress/ "Default WordPress theme 'Kubrick'"
[safari]: http://www.apple.com/safari
[xhtml]: http://validator.w3.org/check?uri=referer
[css]: http://http://jigsaw.w3.org/css-validator/check/referer
[em]: http://www.w3.org/WAI/GL/css2em.htm
[em1]: http://www.alistapart.com/articles/sizematters/
[em2]: http://www.clagnut.com/blog/348/
[em3]: http://css-discuss.incutio.com/?page=UsingEms
[AJAX comments]: http://zeo.unic.net.my/2005/12/25/wordpress-ajax-commenting-revisited/
[script.aculo.us]: http://script.aculo.us/ "Web 2.0 JavaScript"
[prototype]: http://prototype.conio.net/ "Prototype JavaScript Framework"
[utw]: http://www.neato.co.nz/ultimate-tag-warrior/