WordPress Zen: Gridlock Theme is Back?

Well, knock me down with a feather. I haven’t looked at hyalineskies Gridlock Theme since I began using WordPress back in 2004. Hailed by many as one of the first ‘magazine style’ themes, I cut many a tooth during those months attempting to force Gridlock to bend to my bidding. It was work.

Gridlock was a pretty locked-down theme as far as WordPress Themes are concerned. But, things have chanced since the days of WordPress 2.x and I was curious how Gridlock had grown. Hyalineskies is not longer available, as Eston Bond has moved on to other things. But a decent run-down of its functionality is still up on his site and is still being managed at Github.

Well, it hadn’t grown much… but the documentation is much better this time around. Photoshop PSD files are included so you can change the header & About graphic… a nice feature when you don’t want to start from scratch. Even if you don’t own the “Helvetica Neue Ultra Light” font, there are tips on which fonts are similar… those with Mac’s will already have several installed.

Yet, those issues are relatively minor when faced with possibly still the biggest issue with Gridlock: Lack of a WordPress-uniform menu structure. You are forced to add all your menu items by hand. Although it gives you complete control over your menu structure, those with little PHP and HTML experience will be extremely frustrated… even with the addition of commented instructions in the index.php file.

Gridlock also incorporates sIFR 3 for its fonts. sIFR or “scalable Inman Flash Replacement” is a method to use additional fonts that are not typically installed on web browsers. I don’t know of any other WordPress Themes that use sIFR. But, it is certainly one of the more intriguing aspects of Gridlock.

In order to bring Gridlock into compliance with WordPress users, here are some suggestions to wrangle Gridlock into submission. 🙂 As with most WordPress Theme changes… make a backup and keep it locally in case you really “screw the pooch”.

Add a better Menu

First, we’ll start with cutting some stuff from the header.php file, like the “home” link… comment-out or delete the following lines…

If you aren’t using De.licio.us or Flickr, then you COULD delete those lines as well, but with these components configurable in the Admin Page, we’ll let them be…and leave them ‘blank’ as well.

just above the nav_right class div, enter the WordPress list pages code; wrapped in <ul> fashion…

… so that it ends up looking like this:

Now, we’ll need the appropriate CSS to keep everything in check. I chose to modify the .nav class and associate it with a <ul> tag. It’s not perfect, but I already am familiar with creating horizontal menus using the wp_list_pages code. To do this change Gridlocks’s style.css .nav to ul.nav… delete ALL modifiers and enter in the following css styles:

Now, we’ll need to add the associated <li> tag and some formatting:

Build a Better Footer

If you take a look at footer.php, you’ll think that everything is in order… but it’s not. They’ve commented-out all the footer text… which leaves the bottom of Gridlock a little lacking… as if something is broken. So, we’ll start with better formatting. Modify the footer ID in the style.css file to look like this:

But Wait! There’s more! In the footer.php file, move the wp_footer call to just above the </body> tag, so that it looks like this:

Finally, move the entire <div> that contains the footer ID from outside the commented-out php call, to just above the wp_footer call, so that it looks like this:

Why are we missing the standard WP image styles?

Argh! I noticed that I couldn’t align-left or align-right any images I placed into my posts. Some digging around, and I found those “nearly standard” styles were missing the the Gridlock css file. So, enter these lines:

Is That It?

Yes, but if you are using Next Gen Gallery as your photo gallery plugin, then you’ll run into some problems. In every paragraph you have added a Single Pic, you’ll notice the formatting for that paragraph gets COMPLETELY blown away. NGG has a bug where it does not properly wrap everything in a <p></p>. So, if your parent div or class is missing the child <p> styling… it’ll never look right. I was able to fix this by adding the text & font styling to the main_content ID in Gridlock’s style.css file:

In Conclusion

I love this theme and I may very well keep using it for a while. The only thing holding me back is my concern regarding my patience to massage Gridlock into behaving with the current state of WordPress 2.9+. But, what I have above should get you started… or at least relieve some of your headaches.

If you have any questions, drop me a comment and I’ll try to figure out what’s going wrong.