the-deuce.jpg

Inside the New Blog Herald Design

The New Blog Herald DesignYesterday marked the long-awaited launch of the new Blog Herald. Along with a new set of clothes, the Herald received a complete re-write of the WordPress back end that controls the content presentation. If you can’t dig the spartan design, then maybe the geek in you can dig on how I extended WordPress to precisely control things like post display, WordPress pages, and even feed lists. Without further ado, let’s take a little tour of the new Blog Herald!

A word (or two) on the look

The color and elemental balance of the new Blog Herald is not striking enough to really elicit “ooohs” and “ahhhs” from everbody at first glance, but I think the true beauty of the design lies in its functionality. Then again, we’re talking about a news site, and I don’t really get that wow factor when I visit the New York Times site, either. The truth is, though, that the Times’ design is amazing because it handles all that content so beautifully, and it also offers readers tons of avenues for exploration. I’m sure that no two people use the site the same way, and I think that’s remarkable for a design of any magnitude.

I had hoped to bring a similar dynamic quality to the Blog Herald, and as a result, I sculpted a three-column front page layout that offers readers all the different types of content in one quick glance. Essentially, the new Blog Herald has three main “sections” (for those of you who like to think of this sort of thing in newspaper terms):

  • News articles
  • Feature articles – in-depth news and/or commentary from a BlogHerald staff member
  • Blog Network Information and Blogger Jobs

On most monitors, this information is immediately accessible at first glance. Therefore, regular readers ought to be able to distinguish new content from that which they’ve already read in the blink of an eye. On top of that, the new design is structured so that ALL the new content gets pushed to the top of the content presentation area, so you can be absolutely certain that the stuff you see first is the newest, freshest info from the Blog Herald.

Oh, and the footer…Basically, the footer serves as the hub for additional site information, but it’s main purpose is simply to define the design. Also, I thought the inclusion of a Flickr stream was a nice touch, because not only is it dynamic, but it also offers you a new way to “get lost” while browsing. It’s got that element of surprise, because you never know what you’re going to stumble upon after the clickthrough!

Post display – separating features from regular news

Note: for those of you familiar with WordPress template code, this section will make a lot of sense. For the rest of you, I think you’ll probably still be able to understand and appreciate what’s going on here…I hope, anyway :)

Because of the way content needed to be displayed on the home page, I was not able to use existing template code (take K2, for instance) to dictate the layout. As a result, I wrote a completely customized theloop.php file to handle the content presentation for all pages of the site.

The first challenge was to separate the most recent featured post from the rest of the news items. To do so, I constructed a special database query whose sole purpose was to identify the ID of the most recent feature post. It looks like this:

<?php
   $my_query = new WP_Query("category_name=Featured&showposts=1");
   while ($my_query->have_posts()) : 
      $my_query->the_post();
      $do_not_duplicate = $post->ID;
   endwhile;
?>

Next, I wanted to display the recent news items with the exception of the feature post, which I wanted to style differently and place in a separate location. Basically, all I had to do was loop through the posts conditionally, leaving out only the post whose ID matched that of the most recent featured post. The code looks like this:

<?php
   if (have_posts()) {
      while (have_posts() && ($post_count < $front_page)) :
         the_post();
         if ($post->ID == $do_not_duplicate)
            continue;
         update_post_caches($posts);
?>
         <!–– display code goes here ––>
<?php
      endwhile;
   } // end if
?>

The $post_count and $front_page variables in the above snippet were used to determine how many posts would be displayed in the leftmost column of the home page. In an attempt to balance the home page, I chose to only display the three most recent news items with text in that area of the page. Using this code actually stops the default query in its tracks, essentially pausing it while it’s in action. This is key because we’ll leverage it later to display the rest of the recent news items.

The featured post and why it’s uber cool

Stylistically, the next element that needs to be presented is the featured post at the top of the second column. Fortunately, I’ve already run a query (now stored under the variable $my_query) to identify the latest featured post, so all I have to do now is extract the post and display it however I want:

<?php
   while ($my_query->have_posts()) :
      $my_query->the_post();
      $current_post = $post->ID;
      $feature_picture = get_post_meta($current_post, "Feature Picture", true);
?>
      <!–– display code goes here ––>
<?php
   endwhile;
?>

Everything in the above code looks kosher until you notice the $feature_picture variable, which requires an additional explanation. In order to properly balance the home page, I felt as though it was necessary to have a picture smack dab in the middle to separate and identify the different areas and types of content. One thing I didn’t want to do, however, was affect the featured post itself in any way. I didn’t want authors to be restricted to including pictures in the posts with special class styles, and I didn’t want to affect the_excerpt() whenever featured posts appear in the archives or in searches.

In order to solve this problem, I incorporated the use of two custom fields – one to handle the picture, and the other to handle the teaser text that intices you to read the featured post. Custom fields in WordPress are things that carry a serious wow factor, and they make you realize just how powerful and extensible WordPress can be in the right hands. Seriously, your boundaries are almost limitless. Very cool.

Custom fields in WordPress

Now, whenever Blog Herald authors want to write a featured post, all they have to do is fill in two custom fields using pre-defined keys (Feature Picture and Feature Caption). For the picture, they do a simple <img> reference, and for the caption…all they have to do is write a little paragraph. Once they’re done, the custom WordPress loop magically publishes the content to the homepage in a professional, organized fashion.

Publishing the rest of those recent posts…

We’ve already published the three posts in column one, but now we still need to publish the remaining 12 latest entries (or at least their titles) underneath the featured article in column two. Earlier, we “paused” the default WordPress loop while it was in action, so at this point, all we have to do is call it back up in order to complete its iterations. Here’s how we do it:

<?php
   if (have_posts()) {
      while (have_posts() && ($post_count < $front_page)) :
         the_post();
         if ($post->ID == $do_not_duplicate)
            continue;
         update_post_caches($posts);
?>
         <!–– display code for remaining posts goes here ––>
<?php
      endwhile;
   } // end if
?>

In addition to loops, I implemented a healthy dose of conditionals to dictate the post styling and output on different pages. For instance, you’ll notice that single posts have content areas that are wider than those on the home page of the site. Also, if you look at a search results page, you’ll see that I’ve used excerpts from the posts in favor of posting only titles or the entries in their entirety.

Bells, whistles, and an explanation of the goodies

To round out the new Blog Herald’s functionality, it was necessary to implement some top-notch WordPress plugins. Naturally, we’ll start at the top…

  • The feeds from Blog Network Watch and Blogger Jobs in the rightmost column are handled with a slightly modified version of the outstanding Feed List plugin from Bill Rawlinson.
  • The Flickr stream in the footer runs on the outstanding FlickrRSS plugin from Dave Kellam, whose website always features an intensely satisfying design, no matter how spartan it may be.
  • The recent comments section of the footer is handled by Brian’s Latest Comments, a plugin that was in use on the original Blog Herald (although I modified it slightly to work here).
  • Last, we have the Gravatar plugin, which allows for the inclusion of personalized ID pictures inside comments. You know those sites where you see people’s ugly mugs next to their comments? Yeah, those are gravatars. I still need to get mine…

The bottom line

Love it or hate it, the new Blog Herald is the equivalent of moving into a new office. Unlike the old office space, this one is category 4 hurricane-proof, and those who work there love how simple, flexible, and robust their work environment has become.

All I hope is that I’ve created something that will allow the Blog Herald team to further establish itself and facilitate its move towards becoming a top-notch online publication.

Take the Next Step!

  1. Share this on Twitter:
  2. Share this on Facebook:
  3. Submit it to StumbleUpon
  4. Bookmark it on Delicious

15 comments… read them below or add one

Brian Clark June 20, 2006

Dammit, I want a re-design! :)

Reply

Hugo Reyes May 18, 2011

I love it. I really like how you have made it so customized and all your own. Wordpress is great for making things so customizable. You did a very good job.

Reply

Ryan June 20, 2006

Great work! Nice to see others using WordPress like this. I think WordPress makes a fantastic CMS. I did the same thing with the custom fields on my masugadesign.com site. The middle column of the main page uses a custom query to pull a random “page” from the DB that is listed as “portfolio”, and then only if a certain custom field key is present. Then it pulls only the 3 different custom fields for that post to display – the splash image, feature text, and custom title (which is optional) for that portfolio piece. But if you view the same “page” in the Portfolio section, “the loop” ignores all of thoses fields and shows the full, normal portfolio page for the item.

I knew WordPress was powerful, but things really get blown wide open when you make use of custom queries, custom fields, and other plugins too numerous to name.

Reply

Devin June 20, 2006

Looks pretty slick! I find it to be a lot of information, no doubt. I definitely like the Featured post item, I’ve considered doing the same for my own theme at some point.

Quick questions: why did you decide to create a new key instead of using the ‘Post Excerpt’? Was it necessary and I missed something?

Also, why not use some colors to help seperate out the content? I just see a sea of black and blue text. Also, I look at the ads mixed in there and it all seems to flow together too much(making it hard for me to browse). Any possibility of using background colors in some areas to help seperate things?

Anyway, I’m always picky and figured I’d pick away. It’s certainly a functional theme. Well done. :-)

Reply

Mike June 20, 2006

Dude ! Can you put all this into a ” How I Kicked Ass And Took Names ” ebook…I’m buying an autographed copy !

Reply

Dennis Bullock June 20, 2006

Great information Chris. I have always wanted to use the custom fields function but could just never figure it out and how I could use it on the site. This is great stuff. Thanks….

Reply

Chris P. June 21, 2006

Devin,

I could have used the_excerpt(), but it would have cause the picture to show up in search results pages. On top of that, it wouldn’t have been formatted how I like, so that would have been a problem.

Also, the_excerpt() pulls the first few lines of text as well, and it would have basically been impossible to get the featured item to appear as it does now. Why? Because right now it’s:

Picture
Title
Teaser

Using the_excerpt() would have forced me to go:

Picture
Teaser
Title

Also, using a custom field for the teaser allows the authors to write unique copy that is not taken directly from the post itself. Perhaps they can summarize (more succintly) the entire article as a result.

Reply

Johan June 21, 2006

Great design! Really cool to see how versatile WordPress can be!

The only thing I don’t like so much is the web 2.0 styled shiny search bar at the top of the page, I think it doesn’t go very well with the rest of the design. But well, who is talking, I could never ever create such a kick-ass design…

Reply

shirazi June 22, 2006

Nice job done there.

Reply

Aaron Brazell June 22, 2006

Always the best, Chris. :)

Reply

Abhinav November 7, 2006

Simply, awesome work Chris.

The Design, the planning, everything seems really thoughtful.

Best of luck to Blog Herald :)

Reply

wites March 22, 2007

how did you manage to limit the post? i know it has something to do with these two. “$post_count” “$front_page”. but i couldn’t figure it out.

Reply

เสื้อ ผ้าแฟชั่น March 10, 2010

Great work! Nice Looks pretty slick! I find it to be a lot of information

Reply

Hugo Reyes August 24, 2010

Definitely like seeing how people change stuff up with word press. This looks really good and was very informative. Can’t wait to see what I can do with my site.

Reply

John rigger March 22, 2011

WordPress really is awesome. I love how much you can do to your site. The availability of so many themes is wonderful. On top of the themes you can customize each theme which is great. You can truly make a site all your own. Good stuff!

Reply

Hoot and/or Holler

Previous post:

Next post: