I’ve finished Brighthouse-WP, my WordPress port of the Brighthouse theme for Typo. Brighthouse is a simple two-column theme that reminds me of the design of the Signal v. Noise blog. Brighthouse was designed by web interface designer Richard White for the Typo blogging platform.
I spotted the theme when I checked out the features of SlimTimer, an online service that allows you to keep track of the time you spend on tasks. When I saw Richard’s blog, I immediately knew that it was a design that I wanted to implement here. It was a good thing that Richard packaged his theme for download.
I downloaded the theme, converted it to work with WordPress and made a few changes such as increasing font size and placing the search box on the sidebar instead of the header. It took me several days but I was finally able to validate the theme. It wasn’t that hard as the original theme was XHTML valid, I invalidated it when I started chopping it up into different template files.
I created the theme using the pieces of WordPress code I collected in this post: blog titles optimized for search engines, social bookmarking links after the post, better “more” link etc. I’ve found a few great snippets of code that should be added to that post.
You can see the theme at work in the Cybercafe Sandbox, a WordPress installation for my experiments on the blogging script and its plugins, themes and hacks.
Download / Features
You can download the theme here. The link leads to my Box.net account. Click on the arrow beside brighthouse-wp and choose zip folder. Unzip the brighthouse-wp folder and upload it to your blog’s theme folder.
The theme works out of the box with FAlbum, an excellent WordPress plugin that integrates your Flickr photos into your blog. The archives page also works with the Extended Live Archive plugin and the Ultimate Tag Warrior tags page. If you have these two plugins, just replace the archives.php file with archives-elaUTW.php.
Optimized for ads
I’ve enclosed the blog content with Google AdSense section targeting codes. AdSense recommends this so that it can serve more relevant ads for your blog. If you want to place a banner ad after the blog header, just enclose your banner ad code with:
<div id="bannerad"> PLACE BANNER AD CODE HERE </div> and paste the code at the end of the header.php file. If you want to know how to float your ad box within the content, an effective place for ads, check my post here.
I want to add tooltips to the theme. I previously used Dustin Diaz’s Sweet Titles but I disabled it due to a conflict with Lightbox-JS, the script I use for image loading in this site. But a comment in this blog points to a solution to this conflict. Once I go over the solution, I’ll integrate Sweet Titles in Brighthouse-WP.
I also want to add gravatars to the comments. I haven’t gotten around to trying to add the code. I’ve used gravatars in previous designs of this blog.
Please leave your comments and suggestions on the theme here. I’ve moderated comments because of the daily barrage of spam with links to size enhancement for a certain organ.