WordPress Tip: Show the Latest Post in Full, Then Summaries of the Other Posts

by Tom Johnson on Jul 31, 2008
categories: technical-writing • wordpress

Jane has wanted to implement something like Dooce's Daily Chuck, where a new picture appears every day somewhere on the blog but not in the feed. The picture is usually just that -- a picture, without much else. It works well to draw people to your site each day, knowing that you have something new.

For the past two weeks I've been trying to figure this out without much success. But I did come pretty close to achieving it. See the final effect here. And if you're interested in the how-to, keep reading.

First, to get a better idea of how Dooce's Daily Chuck works, go to her site and click the dog picture in the banner. It opens to a large image of the dog ("Chuck"), and you can click the Previous or Next links to navigate to the photos for the other days.

(By the way, I once met Heather at a book signing in SLC.)

Dooce is on Typepad, which may have some tricks that WordPress doesn't. The easiest way to accomplish this same effect in WordPress is through the Post-Thumb plugin. (If you're using Firefox 3, you may see a "Reported Attack Site!" message when going to the Post-Thumb plugin page. Instead, open the site in IE or go to the plugin's page on WordPress.)

The Post-Thumb plugin scans your latest posts (of a specific category, if you want) and pulls out a thumbnail of the image with a link to the actual post. Perfect, right?

So I implemented it on Jane's blog tonight and ... down it went. I assume the Post-Thumb plugin initiated an intensive series of MySQL queries that triggered BlueHost's extremely sensitive CPU Exceeded Error messages, and the site was down for a good 20 minutes.

By the way, the wp-supercache plugin seems to somewhat cure the CPU Exceeded Error messages, but I still think BlueHost has an abnormal amount of these error messages. If you google CPU Quota, most of the sites mention BlueHost. So perhaps the Post-Thumb plugin will work fine for you on a different host. If so, great.

There is, of course, more than one way to skin a cat. I'm still working on the way to show the latest thumbnail image in an RSS feed, but in the meantime, I found a neat little query script for the WordPress loop that shows the latest post in full, and then shows just the titles of posts after that.

The WordPress loop is the PHP script that calls the latest posts from the MySQL database. (Read more about the WordPress loop here.) The loop accepts various queries before it that control how the posts appear. (Read more about post queries here.)

Here's the script (which I found here searching the WordPress support forums).

<?php if (have_posts()) : ?>
<?php $count = 0; ?>

<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>

<?php if ($count <= 2) : ?>

<h2><a class="permalink" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h2>

<?php the_content(); ?> // display the full content of the first two posts only

<?php else : ?>

<h2><a class="permalink" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"> <?php the_title(); ?></a></h2> // Just the permalinks

<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

You have to massage the styles to fit your blog a bit.

The Subtle WordPress Theme has a similar feature hard-baked into the home page. But Shannon didn't want her home page like this, just a specific category.

Oh man, this is getting more complicated than I wanted to get into here. I was going for a 10 minute post, but ....

Jane wanted just one category to show the latest post like this. So I copied the category.php code into a text editor (Notepad ++), and then swapped the category's loop with the above modified loop, and then inserted the styles of her theme to match. Here's the resulting category code:

<?php if (have_posts()) : ?>
<?php $count = 0; ?>

<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>

<?php if ($count <= 1) : ?>

<h3><a class="permalink" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h3> <div style="margin-top:-2px;"><small><?php the_time('m.d.y'); ?> <b>|</b> <?php the_category(', ') ?> | <?php comments_number('Comment?', '1 Comment', '% Comments' ) ?> </small></div><br/>

<?php the_content(); ?>

<b style="size:2em;border-bottom: 1px solid black;">Previous Entries</b>
<?php else : ?>
<h5><a class="permalink" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"> <?php the_title(); ?></a></h5>

<?php endif; ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

I then saved it as a new file, titling it category-87.php. Why category-87? Because when WordPress serves up a category view, it first looks for category templates for the specific category. If a category template exists, it uses that template rather than the regular category.php template. In this case, category 87 is ID for the Daily Dick and Jane category.

(By the way, to find the category ID, go to Manage > Categories. Move your mouse over the category title and look at the numbers at the far right of the string in the task bar. Nice, huh?)

I also needed to exclude category 87 from the home page. To do so, I added this query post code before the loop in the index.php file.

<?php
if (is_home()) {
query_posts("cat=-87");
}
?>

Now all posts in category 87 are excluded from the home page, but not the feed. I use Feedburner, so I just edited the feed details in Feedburner to exclude category 87.

I just changed the feed from

http://whataboutmomblog.com/wp-rss2.php

to the following:

http://whataboutmomblog.com/wp-rss2.php?cat=-87

And then I added some style to the h5 tag that wraps the previous titles.

Check it out by going to Jane's blog and clicking Daily Dick and Jane. By the way, did you notice that she has 600 comments on her underwear giveaway post?