The new site design, phase two

Lots to choose from...As I mentioned the other day, the initial launch of this new site design was just phase one — window dressing. Window dressing I happen to like a lot, but still… same old clunky underlying structure. But not anymore.

WordPress has a pretty rudimentary home page structure by default. Everything’s just *SPLAT* right out there on the home page. Sure, you can use the <!--more--> tag to trigger some automagic stuff with “Read more” links, but overall, it’s not too fancy. Which isn’t to say it’s bad. Now, the default page layouts for some other open source CMSes like Drupal or Joomla, on the other hand… yeah, they’re bad. (Or at least they were, the last time I bothered to care.)

So while WordPress out of the box doesn’t do much fancy stuff with the home page layout, it’s extensible enough that a crafty developer (or a well-read tinkerer) can do some pretty nifty stuff with it. And that was my goal with this new redesign: I’ve got hundreds of posts dating back over seven years now, and most are eternally buried in the archives. I’m hopeful this new approach will bring some of that older content to light, with the random articles list on the home page and the related articles list at the end of each article page.

I didn’t do it all alone… I had some help from a nifty article from Smashing Magazine: 10 Exceptional WordPress Hacks. In particular I made use of numbers 5 through 8 on this list… with some modification. Some of my changes were purely to suit my taste, but others were to improve the usability of the features and in at least one case to fix a bug in the provided sample code. It’s probably worth discussing the details here.

5. Display Related Posts Without A Plug-In

I set this up in single.php so it will appear at the end of each of my articles. I experimented a bit with matching both tags and categories, but I found (for reasons I didn’t dig deep enough to explain) that WP_Query() does well with either tags or categories, but not both.

And, most importantly, I found (or actually, SLP did) that this sample as given breaks comments on the page. Some commenters on the original post mentioned this problem too, along with its solution: you need to call wp_reset_query(); at the end, to tell WordPress to go back to working with the original post’s content.

I also modified the example to look at all of the tags associated with the post, not just the first (can’t really figure out why the original version did that), and tweaked the HTML/CSS output to suit my design. Here’s a simplified version of the code I’m running:

// Get related posts
$tags = wp_get_post_tags($post->ID);
if (!empty($tags)) {
  $tag_list = array();
  foreach ((array)$tags as $tag) {
    $tag_list[] = $tag->term_id;
  $args = array(
    'tag__in' => (array)$tag_list,
    'post__not_in' => (array)$post->ID,
    'showposts' => 5,
    'caller_get_posts' => 1,
    'orderby' => 'date'
  $related_posts = new WP_Query($args);
  if ($related_posts->have_posts()) {
    <h2>Related Posts</h2>
      while ($related_posts->have_posts()) {
          <a href="<?php the_permalink() ?>"
          rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>

My version also uses a special truncation function I wrote to display a short excerpt of each post, not shown here. (And yes, eventually I am going to get syntax highlighting set up.)

6. Automatically Retrieve The First Image From Posts On Your Home Page

This one worked pretty well. I changed the function name to something a little less quirky, and I also added some code to verify that the image actually exists, instead of just looking for an <img src> and assuming everything’s OK. This involved inserting the following block of code into the function immediately before if (empty($first_img)) {:

// Check that file exists
if (!empty($first_img)) {
  // remove http/ https/ ftp
  $src = preg_replace("/^((ht|f)tp(s|):\/\/)/i", "", $first_img);
  // remove domain name from the source url
  $host = $_SERVER["HTTP_HOST"];
  $src = str_replace($host, "", $src);
  $host = str_replace("www.", "", $host);
  $src = str_replace($host, "", $src);
  if (!file_exists(ABSPATH . $src)) {

If some of that code looks familiar, that’s because I copied it straight out of the next item. If I were writing it myself, or bothering to rewrite it, I would swap out that slightly cumbersome-looking three lines of str_replace() with a single preg_replace() — although perhaps the original coder knows something I don’t, like that doing it this way is actually faster. It very well could be; I know regular expressions are significantly slower than straight-up string replacements.

7. Resize Images On The Fly

I’m using this in conjunction with all of the other items here, no big surprise. I left it mostly as-is, although I did make one small change. I know well the dangers of scaling images up — they look like crap, basically. But a little scaling up doesn’t hurt. At least, it’s much less glaring than having a big set of uniform-looking images marred by one image that’s slightly smaller than the rest. That happened to me as I was putting this together, so I tweaked the script to allow images to be enlarged up to 1.5 times their original size. In timthumb.php I changed lines 103-109 to be:

// don't allow new width or height to be more than 50% greater than the original
if( $new_width > $width * 1.5 ) {
  $new_width = $width * 1.5;
if( $new_height > $height * 1.5 ) {
  $new_height = $height * 1.5;

8. Get Your Most Popular Posts Without A Plug-In

There was something about the way this one was written that really bothered me. Maybe it’s just that I have a knee-jerk reaction to seeing SQL code appear directly in a page template. But mostly it was that this didn’t match #5 closely enough. Luckily I discovered along the way that regardless of whether you retrieved post data using WP_Query (which returns an object) or with the $wpdb->get_results() method (which returns an array), you can use the same post functions once you’ve called setup_postdata(). So I kept everything from this example up through that, and then I used my modified version of the output code from #5 and it worked like a charm.

One other thing I’d recommend changing: it’s kind of silly to have the if ($commentcount != 0) conditional in there. Much better to just put WHERE comment_count > 0 in the SQL. I also added a date range to the SQL, to keep the list dynamic. In my case, it’s only looking at the most popular posts over a 3-month range. More active blogs could shorten that time frame. My full query looks like this:

$popular = $wpdb->get_results("SELECT * FROM " . $wpdb->posts .
" WHERE post_date > '" . date('Y-m-d',mktime(0,0,0,date('n')-3,date('j'),date('Y'))) .
"' AND comment_count > 0 ORDER BY comment_count DESC LIMIT 4");

There may have been some other changes I made that were relevant here but I think I covered all of the major ones. The tips on the Smashing Magazine site were invaluable in kick-starting my overhaul of the home page. It was uncanny that I stumbled upon this page today, just as I was getting down to this task anyway. It saved me a ton of time. But it still kept me on my toes, since all of the so-called “hacks” required some additional hacks of my own to get them working, or at least, to get them working the way I wanted!

Sneak peek at a new design

Sneak peekYes, it’s only been about 10 days since my last redesign, but I’m already at it again. I always knew that the current design was little more than a palate cleanser… or a rebound relationship.

Ultimately, what it came down to for me was that I just hadn’t put the kind of care and attention to detail into the design that I really want. With blogs it’s easy to put 99% of your design energy into the header, and then kind of just let the rest of it fall together in the default structure provided by the blog software. In other words, a long, undifferentiated stream of posts on the home page.

Well, I’m trying to give things more structure, as well as making the new design both more functional and more fun. And yes, I’m reusing every design trend from 2007. Is it too soon for the shiny floor effect to seem “retro”? Hopefully the sparkles convey an adequate level of irony. No, they won’t be animated.

Due to the level of attention I’m giving this design, I’m not going to be able to finish it in an evening like most of my past redesigns. But I’m too excited about it to hold back just a teaser (the screenshot detail shown here). Plus maybe this will keep the pressure on me to actually finish it.

Update: “Is this it?” Yes and no. I’ve gone ahead and rolled out the new look and feel with the old page structure. So it looks like the new site design, but it’s not. The changes that remain to be made are mostly on the home page, and involve significant modifications to the WordPress theme templates. It’s another level of tinkering under the hood than the superficial design changes I’ve rolled out up to this point. And I want to take the time to get it right. I’d also like to see if I can really implement Helvetica Neue Condensed Black as my headline font, without having to embed it. So, for now, it looks different but acts the same. More changes to come…

Trying out a new look

I’m trying out another new look for this blog. This design will probably evolve over time, but I am excited about the new direction — most significantly, the new colors, and the custom fonts using @font-face in CSS. The fonts are from a site I just discovered and am very excited about: The League of Moveable Type (no relation to Movable Type, the blogging software).

Of course, Internet Explorer won’t support it, so the fonts degrade to more common, standard, and boring options.

Let me know what you think!

New Coltrane site launched

John Coltrane, Avant Garde Jazz and the Evolution of "My Favorite Things"
I’m pleased to announce the launch of a brand new version of my John Coltrane website.

This is the first step in an ongoing process of splitting my currently mammoth website into distinct, separate websites tailored to specific content areas. Basically, each of the top-level navigation items you see at the top of this page will eventually become its own site.

For now there’s not a lot of new content on the Coltrane site — the big “draw” is the redesign itself. But I’ve added a blog to the site, and eventually I’ll also be adding a multimedia section where I’ll be featuring audio and video clips. Check it out!

This site design was also an opportunity for me to test the effectiveness of my new Room 34 Baseline WordPress theme. Believe it or not, that barebones theme really is the foundation upon which the new Coltrane site is built. So it works!

This site also takes advantage of some cutting-edge web design features: it’s built with HTML 5 and the Blueprint CSS framework, and it uses the emerging @font-face CSS method to render text in a custom font. I am using the free Museo font family throughout the site.

New Name, Same Old Blather

My loyal reader(s) may have noticed that this blog now has a new name: Underdog of Perfection.

For years I’ve referred to my rambling blog on a scattered assortment of topics as “Blather,” which seemed (and still is) a perfectly suitable name. However, in recent months I’ve branched out and created two new, completely separate, and much more conceptually focused blogs: 52 Coffees and Hall of Prog.

In light of this development, it seemed appropriate that I should come up with a name that gives my original, primary blog a stronger identity. The name I have chosen, as mentioned above, is “Underdog of Perfection.”

So, what does “Underdog of Perfection” mean? I’m not totally sure myself. But I’m a recovering perfectionist (yes, it’s like an addiction), and I almost always root for the underdog, so it all just seemed to fit. The blog has a new subtitle as well: “A blog on technology and geek culture by room34.” And so the transition from the all-too-common meatspace moniker of Scott Anderson to my self-applied online pseudonym room34 is complete.

Future posts on this blog will mostly cover the same territory I’ve been pacing around in for the past seven years: technology (with an emphasis on Apple), video games (with an emphasis on Atari and Nintendo), ’80s nostalgia, and a liberal sprinkling of… uh… liberal politics. Enjoy!