When I first installed WordPress about 10 months ago I had no clue how to build a theme for it. Instead I mucked around with the default Kubrick theme and came up with something that looked fairly ugly. No images, shades of blue and gray, messy CSS.

With the release of WordPress 2.5 (and the experience I gained from the SHARP Network site) I decided it was time for a newer, hopefully better look.

Compare the old design:

With the new design (you can browse to coreygilmore.com to see it also):

I'm definitely not a designer so if anyone has any feedback I'd be glad to hear it.

Goals

One of the biggest issues with my original installation was that I'd hacked the Kubrick theme and all of my plugins and theme files were interspersed throughout the WordPress installation directory. Using a trick I learned from Alex and Eric at CrowdFavorite I've separated my files from the WordPress core, moved them into SVN and am now pulling the latest version of WordPress from SVN as well.

My new directory structure looks something like this:

.
|-- fix_symlinks.php
|-- images
|-- plugins
|-- themes
|-- uploads
|-- wp
`-- wp-config.php

Now all of coreygilmore.com is managed by WordPress so I can easily create new pages from within a CMS. Previously only the blog subdirectory was. In Apache my docroot is the wp directory (which is an svn:externals), and everything else is symlinked accordingly. fix_symlinks.php is a script I use to manage all of my symlinks; it will create, update, remove and prune stale symlinks in the appropriate places, which lets me easily keep development and production sites in sync. It's also intelligent enough to use fsutil/junction on Windows and ln on linux.

I rewrote my all of my plugin and theme functions, and encapsulated them in classes. Everything is invoked as a static method which as close to namespacing as you can get with PHP 5. A pleasant side effect of that is that it eliminates the need for global variables.

Snags

My biggest concern was the integrity of my existing links. A few Apache Redirect directives took care of almost everything:

Redirect permanent /blog/wp-content http://coreygilmore.com/wp-content
Redirect permanent /blog/wp-admin http://coreygilmore.com/wp-admin
Redirect permanent /blog/feed http://coreygilmore.com/feed
Redirect permanent /blog/comments/feed http://coreygilmore.com/comments/feed

Unfortunately I wasn't able to use an Apache directive to redirect / to /blog/ without breaking WordPress' preview functionality, but the Page Redirect plugin by Dave Stewart did the trick.

Concerns

I always wince when I pop open Firebug and see that the page is 400kb, and one of my goals was to keep my page size down and receive an A or B from YSlow. Much of your grade is based upon the number of external files (CSS, JS, images) and the appropriate use of headers and ETags. Once I'm satisfied with the design I'll use CSS sprites to consolidate my images and work out a deployment routine to publish minified (not packed) and combined CSS and JS.

Page size is another issue. I'd love to be able to defer loading advertisements until after the page has fully loaded, and only load one copy of the script. A shining example of this is show_ads.js from Google's Adsense. It's ~20kb/7kb compressed/uncompressed. You can have up to three ad-units per page which is a wasted 14kb and 2 extra HTTP requests.

Now that I have a more maintainable site I'm going to begin working on some WP plugins to make my life a bit easier. Look for a Projects section soon :)

Posted on Wednesday, April 2nd, 2008 at 8:02 pm | Filed under Development, Personal
You can follow any responses to this entry through the Comments feed.
Post a Comment | Trackback URL | Permalink URL