I’ve been pecking away converting my old website template for davidseah.com for several months. The actual development work was done on the server live using the Theme Test Drive plugin. This allows an administrator (me) to see one template while the rest of the world sees another one. Yesterday I finally got it to the point where I thought I could switch it over.

The cool thing about this approach was that it allowed me to live with the template for a while. While it doesn’t look very different from the old template (based on the venerable Twenty Ten theme), it’s using the quick and dirty typography and layout code I was playing with last October.

So why even bother with a theme update when it looks the same? I’d like to use the same theme to replace the process journal themes (which is the one you’re looking at on this blog post) and customize the headers. While I could hack in this support into Twenty Ten, I find there’s a lot of cruft in there that I’d have to undo. And the default typographic hierarchy has always kind of sucked in Twenty Ten. Starting clean seemed like the way to go, and it’s a good education in WordPress theme creation.

Here’s what it looked like before:

The proportions are a little bit off all over the place. While the top part of the header feels pretty good, everything below it is a little weird because it’s based on Twenty Ten’s default typography, adjusted to make a little more sense to me hierarchically. However, Twenty Ten wasn’t designed with a tight typographic grid, and it’s been a struggle to adjust it properly.

Here’s the new theme, unofficially designated as “Seah Main 2012”:

The new theme is actually a tiny bit narrower, but uses more spacious margins. The typographic grid is tighter, and I’m being mindful of the repetition of spaces and alignment with the rest of the layout.

I’ve added a sidebar division to help separate it from the main content area. It feels a little dated, but it works well enough. I’ve given it a slightly blue cast, which also is reflected in the page background. The blue cast just makes it feel a little less dirty than a pure gray.

In addition to the spacing, I’m also using the web version of Proxima Nova Condensed (licensed from FontSpring), as this is the same font I use on a lot of my form designs. I’m not sure I like it for the meta text (“posted on…”, etc) as it seems overly narrow, so I may revert that back to Verdana.

Setting up the base typographic grid and widths was pretty easy, incidentally, because of the PHP-based CSS rules. Here’s the typography.css.php and layout.css.php files, with the pertinent variables highlighted:

While I was concerned about PHP being involved with the CSS files. This imposes additional server load, theoretically speaking. However, since I’m using caching on my WordPress install, the output of each page load is not going through the PHP interpreter (or at least, it’s not doing everything each time). I’m also using a PHP accelerator, which caches frequently-used PHP code bits, so for most visitors speed shouldn’t be a problem. I do incur the speed penalty when I look at a page, because caching is disabled for administrators.

Side by Side Comparison

The following are some low-resolution (250 pixels wide) that show the general changes in layout. While you can’t really see the detail, you can get a qualitative sense of how the layout is a bit tighter.

On the left is the old theme, and on the right is the new theme. This is the home page.

At the bottom, I’ve gotten rid of the old category links, replacing them with a simple copyright footer.

This is the productivity tools page. I’ve added a new template for productivity-related pages with tools on them. They list the other productivity-related elements in the sidebar, which might help people browse other tools.

This is the Emergent Task Planner page, which pretty much looks like the other productivity tool pages.

Next Steps

With this theme in place, I can start considering the next phase: customizing it for each process blog, and also building in some slideshow support. With a cleaner codebase of my own design, I’m hopeful that I can get the website customized with new features to support the ongoing mission. Woo hoo!