One of the new features of WordPress 2.9 and above is having a thumbnail associated with a post. It’s common to have themes that retrieve the first image found in a post and use that as the post thumbnail. But that may not be what you need. The inclusion of images in any post makes for a more interesting read but having to pick the first image to match the post content and have the responsibility of being the post thumbnail is now a thing of the past.

Adding a thumbnail is easy and is done

seanhayesbiz-thumbnail

Thumbnail button in media dialog

when editing your post. There is a new sidebar / widget called “Post Thumbnail” with a clicky called “Set Thumbnail”. At any point during the post writing process click on Set Thumbnail and the familiar media dialog will appear. Pick your image from the available images in your library or upload a new image. Select the image by choosing “Show” and then at the bottom of the dialog there’s a clicky labelled “Use as thumbnail”. When you click that the image you were viewing becomes the thumbnail associated with that post.

Now, if your theme doesn’t support the thumbnail feature in WordPress 2.9 you can make some quick modifications to your themes functions.php and then to any or all of the individual theme files you want the thumbnail to be active such as index.php, single.php, archive.php.

Thumbnail support is added to a theme by simply adding the following line to the end of your functions.php file (before the last line and “?>”).

add_theme_support( 'post-thumbnails' );

Then you add the modification for the index.php (and subsequently the others):

					<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
				<?php
					if ( has_post_thumbnail() ) {
						?><div class="wp-caption alignright"><?php
						the_post_thumbnail();
						?></div><?php
					} else {
						// the current post lacks a thumbnail
					}
				?>
					<?php the_content(''); ?>

For my theme, a great free theme from woothemes, I placed the thumbnail in it’s own wp-caption styled div and aligned it right in my posts.

Sources:

http://codex.wordpress.org/Post_Thumbnails
New in WordPress 2.9: Post Thumbnail Images


3 Comments

mfalk75 · May 12, 2010 at 1:33 pm

Hi, good tutorial. Any chance you could help me finish the (} else {
// the current post lacks a thumbnail) statement.

I want it to display first image in post as thumbnail if none were defined.

Thanks

sean · May 12, 2010 at 5:51 pm

Hi mfalk75,

I used the following code which also uses a plugin called “wp_get_post_image”

if(function_exists('wp_get_post_image'))
    echo wp_get_post_image('width=110&css=alignright&parent_id='.$post->ID); 

Plugin information:
http://michaelwender.com/wordpress/plugins/wp-get-post-image/

mfalk75 · May 12, 2010 at 6:44 pm

Thanks, seems to be working pretty good….anyway to link the thumbs to the image?
thanks

Leave a Reply

Avatar placeholder