Add Wordpress Archive Thumbnail Images

Sometimes I’m asked about adding WordPress archive thumbnail images to sites.  Specifically, on the category pages to show the thumbnail floated left in the listing.

I’m aware that there are plugins to achieve this, but if this is something specific to a project and likely to be a feature of the theme it probably justifies editing the theme itself.  On that basis I decided that I wanted to make it theme specific.

I’m using a child theme, based on the standard Twentyeleven theme that ships with WordPress.

The first step is to ensure that the theme supports post thumbnails.  You can check this by making sure that the “featured image” metabox is visible on the Edit Post screens.

Funtctions.php

With Twentyeleven it’s not strictly necessary to add the code below to the functions.php file, but it’s not going to hurt either:

add_theme_support( 'post-thumbnails' );

(and of course there is no need to remind people to use a Child Theme, is there?)

I elected to specify the thumbnail size within the function.php too.

add_image_size('excerpt-thumbnail', 140, 140, true);

Content.php

This step has two purposes, firstly it tells the theme to display excerpts instead of the full post, and secondly to show a thumbnail.

Within your child theme look for content.php – if it does not already exist just copy the file from the parent theme and place inside your child theme.

Within Twentyeleven there is a section of code (on about line 37 but that might vary)

php if ( is_search() ) : // Only display Excerpts for Search ?>

The code above tells the theme to show a summary on the search pages (which are a kind of archive page).

That code needs to be replaced with:

But wait, what if the post does not have a featured image set?

Wouldn’t it be great if the theme could detect the first image in a post and use that one,  whilst respecting any image that has already been set as a featured image…

function autoset_featured() {
 global $post;
 $already_has_thumb = has_post_thumbnail($post->ID);
 if (!$already_has_thumb) {
 $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
 if ($attached_image) {
 foreach ($attached_image as $attachment_id => $attachment) {
 set_post_thumbnail($post->ID, $attachment_id);
}
}
}
}
add_action('the_post', 'autoset_featured');
add_action('save_post', 'autoset_featured');
add_action('draft_to_publish', 'autoset_featured');
add_action('new_to_publish', 'autoset_featured');
add_action('pending_to_publish', 'autoset_featured');
add_action('future_to_publish', 'autoset_featured');

Paste the above code in to the functions file, and you’ll achieve exactly that.

Style.css

That should take care of the practicalities of getting the theme to show thumbnails on the category page.   I’ve done this a few times with seemingly identical installs of Twentyeleven, and on some occasions have had to edit the align left class.  Making sure that it looks a lot like this …