How to display Thesis theme thumbnails — Set featured image WordPress 3 tutorial.

I noticed a few days ago, while trying to apply some modification of Thesis theme in wordpress local server, the featured image function is not yet built in Thesis 1.8 theme.

If you are using Twenty Ten theme or other wordpress 3 themes, it is not difficult to get “set featured” image for your post.

In Thesis theme, the process is a bit more complicated than in Twenty Ten theme, because it has hooks, which in fact more handy for modifying theme, because you have specific file to play around, which in this case, adding thesis theme thumbnails.

If you are using Twenty Ten and another theme, follow this wordpress featured image tutorial.

Before we continue, first check in your dashboard, if you have “set featured image” link exists in your dashboard.

Do you have this link in your dashboard?

If not, you can follow this tutorial.

End result of the tutorial screenshot:

End result.

Where do you have to edit file in order to display Thesis theme thumbnails?

For Thesis theme users, you should know, there are two files which you can use to add thesis theme thumbnails. Those files are custom.css file, and custom_functions.php.

The most important file is custom_functions.php. This file is needed in order to activate the wordpress 3 functions to show thesis theme thumbnails.

How to add Thesis theme thumbnails step by step tutorial.

1. Backup your current custom_functions.php file. You can copy all the content to notepad, or copy and then rename the original to be custom_functions_orig.php or something like that.

2. Go to your dashboard, “Thesis” drop down menu, and “custom file editor”.

3. Select “custom_functions.php”.

Custom Functions in Pull Down Menu.

Right in the buttom of this file, add this code: (see image).


// This theme uses post thumbnails
add_theme_support( 'post-thumbnails' );
//thesis thumbnails
function thumbnailset() {
if (is_home()) { ?>
<?php the_post_thumbnail();?>
<?php }
}
add_action('thesis_hook_before_post', 'thumbnailset');

I use if(is_home()) because i want to display only in homepage only.

Click “big a$$ save button”.

4. Refresh your page and you should see your thumbnails in homepage.

We’re almost done, but we should specify the width and height, and adding some style. You can modify the css style as you want, but this is what i use for this tutorial:

5. Still in Thesis custom file editor, now switch to “custom.css” file.

Add this code:

.attachment-post-thumbnail{padding:1.1em;background:#eee;width:200px;height:200px;
float:left;margin:10px 15px 10px 0;}

The result will be like in the result image above. One thing to note, be consequence with the dimension of your image, like in my other set featured image wordpress tutorial, if you use 200x200px images, you have to use this size always, otherwise it will make your blog loads slower.

I hope this Thesis theme thumbnails tutorial is useful for some of you.