Rebuilding Thematic Feature Site with the_post_thumbnail

Anyone who’s stopped by this site more than once in the past year knows that it’s been in a constant state of change as I try out new functions, plugins or other functionality. That said, I’m really hoping to stabilize things on the back end and move most of my scratchpad work to a test blog environment. The current design, which I’m hoping to lock into, is built on the Thematic Feature Site child theme, which was released back in August, IIRC.

Feature Site includes a random content area on the home page, accomplished by defining a set of content files that are pulled into the feature area via a randomized PHP include statement. The relevant original code is found in Feature Site’s functions file, under the function childtheme_pageleader():

<?php } elseif (is_page_template('front-page.php') ) {
/*
Highlight your most important projects with a series of files (2 to start with)
named feature-front-x.php. Where x is a number. Then, these files are randomly
included on the front page. It’s pretty simple stuff.

The important bit is the mt_rand(1,2). Right now it’s randomly including 1 of 2
files. If you had 15 files you’d need to have mt_rand(1,15) in there.
*/
$rand = mt_rand(1, 2);
include "includes/feature-front-$rand.php";
} elseif (is_home()) { ?>

The include files require manually editing both the content and an associated image. While that’s easy enough to do, I wanted to automate this part of the site to display some portfolio highlights of my recent work. Essentially I wanted to display a post excerpt from my “portfolio” category along with a large-size view of the defined post thumbnail (introduced in WP2.9) and links to the project notes, client URL and overall portfolio. As such, I replaced the code above with this:

<?php } elseif (is_page_template('front-page.php') ) { ?>

<div id="feature">

<?php query_posts('showposts=1&cat=3&orderby=rand'); while(have_posts()) :
the_post(); ?>

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to
<?php the_title_attribute(); ?>"><?php the_post_thumbnail(array(464,464)); ?></a>

<div id="feature-info">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>

<div id="buttons">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to
<?php the_title_attribute(); ?>">View details »</a>
<a href="<?php echo get_post_meta($post->ID, 'client-url', true);?>" class="button"
target="_blank">View site »</a>
<a href="<?php echo get_option('home') ?>/portfolio" class="button">View portfolio »
</a>
</div>

</div><!-- #feature-info -->

<?php endwhile; ?>

<div class="clear-block"></div>
</div><!-- #feature -->

<?php } elseif (is_home()) { ?>

A few notes:

• I’ve reproduced the original CSS classes from the original feature-front-$rand files in order to streamline the testing. As I start the design process, I’ll probably tweak things here and there, including the defined “thumbnail” size, which I’ve left at the default 464px.
• Using orderby=rand in the post query randomizes the results, even though we’re just showing one post at a time (showposts=1) from the portfolio posts (cat=3). Remove this condition to only show the most recent post from the portfolio category.
• Because the Feature Site child theme redefines the post headers for a customized display on the inner pages, we have to call <?php the_title(); ?> instead of <?php thematic_postheader(); ?>. I’ll need to revisit the CSS there to get a true headline.
• I’m pulling in data from a custom field (client-url) defined on each portfolio post in order to provide the link out to the actual client site.

Elsewhere on the site the functional pieces are pretty much  in place, including a custom portfolio page template that displays all of the post excerpts and smaller thumbnails in the portfolio category. Now on to the visual design…