How To Use WordPress 2.9′s Post Thumbnail Feature (Featured Image) In Your Thesis Theme

The new post thumbnail feature that was introduced in WordPress 2.9 is a great feature that I have used many times. What I like to do with it is have the ability to upload a single image, and allow the code to resize it for the home page thumbnail as well as a larger image for the single post page. There are numerous blogs with excellent posts detailing how to use the WordPress post thumbnail image feature, but I had difficulty trying to figure out how to make it work in the Thesis WordPress theme. All the tutorials I had read talked about adding the applicable code to the single.php file or the index.php file, but with the Thesis theme, as you know, you can’t just do that.

After some digging and figuring things out, I was able to find a solution.

How To Add Post Thumbnails In Your Thesis Theme

Step 1
The first thing you must do is activate the post thumbnail feature in WordPress by pasting the following code in your custom-functions.php file:

//Enable Thumbnail Function for WordPress 2.9
add_theme_support('post-thumbnails');
set_post_thumbnail_size( 290, 190, true ); // 290 pixels wide by 190 pixels tall, hard crop mode
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size

The first line enables support for the post thumbnail feature. The second line will set the standard post thumbnail size for all posts, and the last line will allow you to have the image appear on the single post screen at a larger size automatically. Of course, you should adjust the sizes based on your own preference and design requirements.

Step 2
This isn’t enough to actually make the post thumbnail images appear where you want. You have to actually add the applicable code to the places in your theme files where you want the thumbnail images to appear. In a typical WordPress theme, you’d add some code to the single.php file and the index.php file, but in the Thesis theme, it’s a little different. I’m sure there are numerous ways to achieve this, but this is just the method I use and it works for me. You will need the Thesis Openhook plugin. Be sure to install and activate it. Then head over to the “Appearance” section and click “Thesis OpenHook”, then place the following code in the “thesis_hook_before_post” section. Be sure to save your changes.

<?php if ( is_home() ) { ?>
	<!-- post thumbnail -->
	<?php the_post_thumbnail(array( 150,150 ), array( 'class' => 'imgleft', 'alt' => the_title('', '', FALSE), 'title' => the_title('', '', FALSE) )); ?>
<?php } else { ?>
	<!-- post thumbnail -->
	<?php the_post_thumbnail( 'single-post-thumbnail', array( 'class' => 'imgright', 'alt' => the_title('', '', FALSE), 'title' => the_title('', '', FALSE) )); ?>
<?php } ?>

Looking at this code now, you can probably do away with line 3 of the code in Step 1 because the thumbnail size is being defined here in this code. So the code will insert a 150×150 size thumbnail on the home page with all your posts, floated left and the larger image on the single post page floated right. Of course, you can change the style however you’d like. This is the css I used for this example:

img.imgleft  {
	background-color: #EEEEEE;
	border:0.067em solid #DDDDDD;
	float:left;
	margin:0 1.571em 0.55em 0;
	padding:0.567em;
}

img.imgright  {
	background-color: #EEEEEE;
	border:0.067em solid #DDDDDD;
	float:right;
	margin:0 0 0.55em 1.571em;
	padding:0.567em;
}

When you look at the PHP code in Step 2, you’ll notice there are two things in there that have proved very helpful to me. Obviously, the first is simply the assignment of a css class to the images so that you have control over how you want them displayed, but the second is more significant. With the help of a very talented programmer friend of mine, this code will actually insert the Title of your posts in the image ALT tag automatically. This is great for SEO because you can use your keyphrase as your title, and have it automatically added as the ALT tag of the image.

So let’s look at what this does. After adding your thumbnail image, the code will automatically resize it as a small thumbnail on your home page beside each post, it will add a larger image to the single post page, and at the same time, it will add the ALT tags to the image. I love the ease and simplicity of this and I don’t have to hassle about adding that ALT tag to the images.

Step 3
Now that everything is set up and you have the programming in place to add post thumbnails into the Thesis theme, you just need to know how to actually add the image to your posts. In your post edit screen, you will see a new section called “Post Thumbnail.” You will see it at the far right, usually under the categories list. Click the “Set Thumbnail” link and the following screen will appear:

Now click the “Select Files” link and upload your image. When the following screen appears, be sure to click the “Use as Thumbnail” link at the bottom. Then the image will appear in the Thumbnail section to the right. Do not click the “Insert into post” option. You can click “Save Changes, but it isn’t necessary.

That’s it! Save the post and your post thumbnail images should appear on your home page as well as you single post page. And you’ll also have an automatic ALT tag populated with the title of your post.

Finally, if you’d like you can add this code to your custom_functions.php file and this will make the images clickable with a link to the post. I always like to add this in.

// make the thumbnail images clickable with a link to the post
add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id ) {
	$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';
	return $html;
}

I don’t remember where I got this code, but if you know, or you wrote it let me know in the comments so you can get credit for it. I’m certainly no expert and most of the tips and tricks I post here are just things I have either figured out myself through trial and error, or found solutions that worked for me on other blogs. So if you have improvements to any of the tips and tricks, let us all know in the comments.

• WordPress Codex
• WP Beginner Post
• Mark Jaquith Post on WordPress Featured Images
• Justin Tadlock Post on WordPress Featured Images

Attribution for images used in this post:
Johan J.Ingles-Le Nobel
snappED_up
josh-n

Tagged as: Post Thumbnails, thesis tips