This is a post about the technicalities of blogging so may not be of interest to all readers.

Last week I had a nice e-mail from RobReally asking how I produce the Featured Post banner on this site. It’s actually quite simple to do if you know a little PHP and a little bit about WordPress.

There are two bits of information that made this work:

1. First you have to identify your featured posts. I do this by having a post category called “Features.”
2. Secondly you need a thumbnail or image to go with each post. Newer versions of wordpress have a post thumbnail capability built in, but I didn’t want to use that as I wanted to pull in thumbnails from outside the WordPress ecosystem. I added a Custom Field called “Thumbnail” to each post in the “Features” category. This Custom Field just contains the URL of the image I want to use as a thumbnail.

The key behind it is the WordPress Loop – this is the bit of code that generates the list of posts on your blog. The loop is very flexible and can do everything we need to for this banner. For our purposes we only need a very minimal loop that I’ve added at the end by the header.php file in my theme’s folder.

<?php if ( is_front_page() ) { ?>
<div class="full-bar">
  <h2>Featured Posts</h2>
  <div class="stories-wide">
    <?php
    $wpQuery = new WP_Query('category_name=features&showposts=6');
    while ($wpQuery->have_posts()) : $wpQuery->the_post();
    ?>

      <div class="sideStory">
      <img class="sideStoryImage" src="<?php
      echo get_post_meta($post->ID,"Thumbnail",true) ;?>" />
      <div class="sideStoryText">
        <a href="<?php the_permalink() ?>" rel="bookmark"
        title="Permanent Link to <?php the_title_attribute(); ?>">
          <?php the_title(); ?>
        </a>
      </div>
      </div>

    <?php endwhile; ?>
  </div>
</div>
<?php } ?>

The bracket between lines 1 and 24 just makes sure that this appears on the front page of the site only. Line 6 is the real power. This creates a new blog loop just consisting of the 6 latest posts from the features category. Then in lines 7-21 we loop over those posts displaying a thumbnail (lines 11 and 12) and a link to the post (lines 14 to 17).

The rest of the formatting is achieved with CSS. The details of this will depend on your WordPress theme. The CSS I use is the following:

div.full-bar {
 border-radius: 0.7em; -moz-border-radius: 0.7em;
   -webkit-border-radius: 0.7em;
 overflow: auto;
 margin-bottom: 10px;
}

div.full-bar h2 {
 color: #C71418;
 font-weight: bold;
 margin: 2px;
}

div.stories-wide {
 overflow: auto;
 height: 155px;
 padding-left: 10px;
 padding-right: 0px;
 margin-left: auto;
 margin-right:auto;
}

div.stories-wide div.sideStory { margin: 2px; }

div.sideStory {
 position: relative;
 float: left;
 width: 150px;
 height: 150px;
 margin: 1px;
}

img.sideStoryImage {
 width: 150px;
 height: 150px;
}

div.sideStoryText {
 padding: 3px;
 background: url('../images/pale.png');
 position: absolute;
 bottom: 0px;
}

div.sideStoryText a {
 color: white;
}

As I said, most of that will change depending on your theme. The trick with the layout I use is to use absolute positioning of the sideStoryText div over the image and to use a transparent background (images/pale.png) to make the text readable.