Search results

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.

Dooce's Daily Chuck

(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.

CPU Exceeded Errors -- from BlueHost

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.

if (is_home()) {

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

to the following:

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?

About Tom Johnson

Tom Johnson

I'm an API technical writer based in the Seattle area. On this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, AI, information architecture, content strategy, writing processes, plain language, tech comm careers, and more. Check out my API documentation course if you're looking for more info about documenting APIs. Or see my posts on AI and AI course section for more on the latest in AI and tech comm.

If you're a technical writer and want to keep on top of the latest trends in the tech comm, be sure to subscribe to email updates below. You can also learn more about me or contact me. Finally, note that the opinions I express on my blog are my own points of view, not that of my employer.