Using Post Thumbnails On StudioPress Classic Themes

With the addition of post thumbnails in WordPress 2.9, developing news and magazine style sites is so much easier. Prior to post thumbnails, all of our classic themes relied on the TimThumb PHP script for dynamic resizing. This post will walk you through how to replace that with WordPress post thumbnails.

Because of the popularity with our Lifestyle theme, I’ll be using it as an example for implementing post thumbnails into the classic version. The same method can be applied to other classic themes as well.

Step #1
The first thing you’ll need to do is enable support for post thumbnails, and determine the sizes of thumbnails that you want to have on your homepage. By default WordPress will create a default thumbnail image for each image you upload and the size can be specified in your dashboard under Settings > Media. The code below will create additional thumbnails based on the criteria you set.

Open up your theme’s functions.php file and add the code below after the opening

// Enable post thumbnail support and set new image sizes
add_theme_support( ‘post-thumbnails’ );
add_image_size( ‘Featured Top’, 70, 70, TRUE );
add_image_size( ‘Featured Bottom’, 110, 110, TRUE );

The first line enables post thumbnail support with your installation of WordPress, and lines two and three determine the additional sizes of thumbnails that will be created upon each image upload. Note that the first thumbnail is called Featured Top and the second one is called Featured Bottom. As an aside, you can choose to rename them as you see fit. The numerical value in the code sets the width and height of each thumbnail that will be created. You will also need to regenerate thumbnails of images you have already uploaded, as the support for WP post thumbnails isn’t retroactive.

Step #2
Now that you have enabled post thumbnail support for your theme and set the additional thumbnail sizes, you’ll need to replace the code in your home.php file that calls for thumbnails.

Currently the Lifestyle theme’s home.php file has the following code:

<?php if( get_post_meta($post->ID, “thumb”, true) ): ?>
<a href=”<?php the_permalink() ?>” rel=”bookmark”><img src=”<?php bloginfo(‘template_directory’); ?>/tools/timthumb.php?src=<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>&amp;h=<?php echo get_theme_mod(‘featured_top_left_thumb_height’); ?>&amp;w=<?php echo get_theme_mod(‘featured_top_left_thumb_width’); ?>&amp;zc=1″ alt=”<?php the_title(); ?>” /></a>
<?php else: ?>
<?php endif; ?>

This code calls the thumbnails based on the Tim Thumb script – which is tied to the theme options page. When you replace this code, you’ll lose the ability to change the thumbnail size on the fly, and the theme options for post thumbnails will no longer apply.

Replace the code above with this line of code:

<?php the_post_thumbnail( ‘Featured Top’ ); ?>

That will replace the Featured Top Right section, so you’ll need to also do the same for the Featured Bottom section of the Lifestyle theme.

Now find this code below:

<?php if( get_post_meta($post->ID, “thumb”, true) ): ?>
<a href=”<?php the_permalink() ?>” rel=”bookmark”><img src=”<?php bloginfo(‘template_directory’); ?>/tools/timthumb.php?src=<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>&amp;h=<?php echo get_theme_mod(‘featured_bottom_thumb_height’); ?>&amp;w=<?php echo get_theme_mod(‘featured_bottom_thumb_width’); ?>&amp;zc=1″ alt=”<?php the_title(); ?>” /></a>
<?php else: ?>
<?php endif; ?>

Replace the code above with this line of code:

<?php the_post_thumbnail( ‘Featured Bottom’ ); ?>

Step #3
The next step in using post thumbnails is to upload your image through the edit post screen. Make sure that after you upload your image, you click the “Use as featured image” link as shown below. If you are using an earlier version of WordPress, it might say “Use as thumbnail”.

Step #4
Lastly, you’ll need to modify your style.css file a bit. Classic themes using Tim Thumb included a class named “thumb” that was attributed to each thumbnail. Now, using the post thumbnail feature for WordPress, it adds a different class. Find this code below in your style.css file:

.thumb {
float: left;
margin: 0 10px 0 0;
}

And replace it with the following code:

.wp-post-image {
float: left;
margin: 0 10px 0 0;
}

SOURCE:StudioPress.com/wordpress-tips/using-post-thumbnails-on-studiopress-classic-themes.htm

Note: This tutorial is based on the popular StudioPress/Revolution Themes and while most StudioPress WordPress themes use the same division names in their code, not all do. Also, if you are using this for a non-StudioPress Theme (tsk, tsk) your Division ID & Class names will be different from the code used in this tutorial.