WordPress Upgrade, New Design

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 in Development, Personal on April 2nd, 2008 at 08:04pm

Comments (8)  | 

The SHARP Network is Live

I'm horrible about promotion, and this is long overdue. Scientists and Engineers for AmericaA few weeks ago Scientists and Engineers for America launched the Science Health And Related Policies (SHARP) Network, a nonprofit, nonpartisan, community-driven site that shows how elected officials and candidates stand on important scientific issues. Curious how Obama's Plan for Healthy America will work? Take a look at his SHARP Profile. If you've got something to add or correct, sign up and begin editing.

At the same time, SEA's partner, SEA Action Fund - also nonprofit and nonpartisan - launched their blog. One feature is Views from the Experts, which has opinion pieces written by Nobel Laureates and Ph.D's.

Both sites were built using WordPress and MediaWiki and use my favorite JavaScript UI library Ext JS for an enhanced administrative interface. The project provided me with the opportunity to work with the gang at Crowd Favorite, who patiently helped me get up to speed with real WordPress development, worked on the complicated WordPress/MediaWiki integration and provided the new design (among many other things).

Posted in Development, Personal, Technology on March 13th, 2008 at 07:03pm

Add Comment »  | 

Office 2007 SP1 - Outlook Performance Fix

I just received the list of changes for Outlook 2007 that will be in Office 2007 SP1, and there's one in particular that should make everyone happy:

Improved performance in Microsoft Office Outlook 2007 eliminates frustrating delays when opening large mailbox files and frees office workers to focus on important business tasks. The 2007 Office system SP1 makes it easier to open large offline folder files (.ost) and personal folder files (.pst) that are located directly on the user’s machine.

My .ost file is a hair under 2GB and lately the performance issues have been unbearable. Rumor has it that Office 2007 SP1 will be released on Tuesday, December 11th.

Posted in Development, Software, Technology on December 6th, 2007 at 07:12pm

Add Comment »  | 

Ext JS 2.0 Released

Aside from Frontier Airlines, I don't think there has been much I've gushed about more in the past year than Ext JS. I started using it when it was still called yui-ext, and even then it was going above and beyond what any of the other JavaScript libraries were doing. And it looked good. Really good.

What would you rather show a client, Dojo or Ext?

Dojo Toolkit Sample
Dojo

Ext JS Sample
Ext

You like tabs? Sure, who doesn't. Well Ext has scrolling tabs. One of the biggest complaints I've seen has been about the documentation, and the Ext team has listened and produced some great API documentation with an API browser that puts all of the other toolkits to shame. Seriously, if you're trying to sell a sexy UI toolkit, ugly, barebones HTML is not the way to go.

I've been showing Alex some of the ways I'm using Ext and while he likes it, he described it as almost being it's own language. In a way that's true, but I think that Ext 2.0 addresses quite a few of the complaints people had with 1.0 and 1.1. There's more consistency between components, and for the most part everything just makes more sense. Vague, I know, but if there really is less work and head-scratching with 2.0 to produce anything. Creating a Grid is no longer confusing and frustrating, the library of community-contributed extensions and themes is growing and the UI objects are all Components that support plug-ins. It still can extend YUI, Prototype/Scriptaculous, and jQuery, or you can use the native Ext library. In fact, what I really want to see next is a Jobs/Gigs board to make it easier to find Ext developers looking for contract work.

Read the Introduction, the Overview, browse the API and check out the rest of the Ext demos.

Posted in Development, JavaScript, Technology on December 4th, 2007 at 09:12pm

Add Comment »  |