spacer
spacer

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

April 1, 2010 · 26 comments

in Thesis

As of WP 3.0 the Post Thumbnail feature was renamed to “Featured Image”

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:

spacer

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.

spacer

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 class="' . 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

Was this post helpful? Consider subscribing to my blog via RSS or

  • spacer
  • spacer
  • spacer
  • spacer
Don't have the Thesis Developer's Option? Upgrade Now!

This Site Runs on the Thesis WordPress Theme

spacer

If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced user, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.

If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:

  • Thesis Blog
  • User's Guide
  • Plans & Pricing (with a 30-day money back guarantee!)

{ 24 comments… read them below or add one }

spacer Mani May 25, 2010 at 11:57 am

Hi. Thanks for this writeup. I was having a hard time trying to figure out where to include this in my code. Do you know how this affects previously existing thumbnails done thesis style?

Reply

spacer Thesis-Blogs.com May 25, 2010 at 2:10 pm

Hi Mani. I’ve never had a situation where both methods were used, so I can’t say definitively. The system I use here is just for showing thumbnails for posts on the home page and then a larger image on the single post screen. It doesn’t impact the teasers. I don’t see how they could conflict but why don’t you go ahead and implement this in your site if it’s using the Thesis thumbnails and report back to us here on what you find. Thanks!

Reply

spacer Mark June 16, 2010 at 10:10 am

Thanks for your post. Very helpful.

I am trying to get the thumbnail into my Teasers on Thesis, and they aren’t showing up. And i don’t want them in my single posts. Any idea?

Reply

spacer Thesis-Blogs.com June 16, 2010 at 10:21 am

Mark, not sure if you’ve tried this, but upload the image using the WordPress image upload link in the post edit screen. Then grab the full URL to the image. You get that from the screen you see after the upload. Don’t click “Insert Into Post,” just copy the URL. Then paste that into the field that says “Thumbnail Image” in the “Post Image and Thumbnail” section. Save your changes. That works for me.

Reply

spacer Graha nurdian | Catatan Desain November 8, 2010 at 8:43 pm

I want to ask
I am using Random Post and Popular Post plugin from Rob Marsh, and I am implementing the thumbnails on the widget by adding some code in the output setting in plugin page. My question is

What I supposed to write on the image source? in case with ordinary thesis i am using {custom:thesis_thumb}

Reply

spacer Thesis-Blogs.com November 8, 2010 at 9:13 pm

Hi. I’m not completely following you here. Could you perhaps explain what you’re trying to do with a little more clarity?

Reply

spacer Graha nurdian | Catatan Desain November 8, 2010 at 9:51 pm

I am using this code on my Popular post output

<a class="{url}"></a>>
{link}

What do I have to change on this code to display the posting thumbnails on my popular post widget

Reply

spacer Thesis-Blogs.com November 8, 2010 at 10:04 pm

You should define the thumbnail image size as shown on line 4 in Step 1 above. Then you can use this code to render the thumbnail:

<?php the_post_thumbnail( 'your-thumb-name', array( 'class' => 'imgleft', 'alt' => the_title('', '', FALSE), 'title' => the_title('', '', FALSE) )); ?>

You can give it any css class you want instead on ‘imgleft’.

Reply

spacer HTML color December 8, 2010 at 10:59 pm

Did you know that the Basic HTML Color set is a combination of 216 color? You can find a tabulated view of the basic HTML color on the internet. It can be handy when you need to quickly choose a standard HTML color for your site or any other project.
HTML color recently posted..Color Finder

Reply

spacer Abhinav Kaiser January 20, 2011 at 6:21 am

Paul,

Amazing post! It’s accurate to the core. It worked like a charm for me.

Couple of things that were not mentioned:

1. In OpenHook plugin, we need to check execute php below the code. It won’t work otherwise.
2. The image on the post page is aligned to right. It may not always work as some images are bigger than the usual ones. So, in my opinion, centering it would be a better option. It works for all sizes.
Abhinav Kaiser recently posted..Big Breakfast Gain Weight

Reply

spacer Thesis-Blogs.com February 26, 2011 at 3:50 pm

Hi Abhinav. You’re correct about enabling PHP in the Openhook plugin if that’s being used. As to the positioning of the thumbnail, that works but most of the time it depends on the the design and layout of the site in question, and the personal tastes of the designer or site owner… Thanks for your comment.

Reply

spacer Nanette February 25, 2011 at 11:00 pm

I think I’ve got this working, but… it broke my Featured Content Slider. Any ideas?

Reply

spacer Nanette February 25, 2011 at 11:05 pm

update: I almost have it working, How do I get my home page thumbnail to be under my title and on the single page, I would like it above… like your site?

Reply

spacer Thesis-Blogs.com February 26, 2011 at 12:03 am

It’s all controlled by where you physically place the post thumbnail code in the custom-functions.php file. If you want them to show up under the title on the home page, just use the applicable Thesis hook that will place it there. Something like this:

function post_thumbnail_home() { 

if ( is_home() || is_archive()) {
	the_post_thumbnail( 'name-here' );
} else {
}
}

add_action('thesis_hook_before_post','post_thumbnail_home');

Then for the singe post pages where you want the featured image to appear before the title, you’d use this hook:

thesis_hook_before_headline

Hope that helps.

Reply

spacer Nanette February 26, 2011 at 12:21 am

This is what I have put in custom functions. I just tested it and the php is okay (meaning it did not break my site) but I am not getting what I want.

I am guessing it is because I need to replace ‘name-here’ with something. I am jut not sure what to replace it with… can you take a look?

Reply

spacer Thesis-Blogs.com February 26, 2011 at 1:22 am

Here you go. I’ve simplified the code for you. This works, I tested it and I believe it’s what you’re looking to achieve here. Make sure you paste this in the custom-functions.php file, and be sure to copy over the file to your server before you upload the image. Once it’s copied over, upload an image using the Featured Image uploader in the post edit screen.

add_theme_support( 'post-thumbnails' );
add_image_size( 'home-thumb', 300, 150, true );
add_image_size( 'single-post', 650, 9999 );

function post_thumbnail_home() { 

if ( is_home() || is_archive()) {
	the_post_thumbnail( 'home-thumb' );
} else {
} }

add_action('thesis_hook_before_post','post_thumbnail_home');

function single_post_thumbnail() { 

if ( is_single() ) {
	the_post_thumbnail( 'single-post' );
} else {
} }

add_action('thesis_hook_before_headline','single_post_thumbnail');

Reply

spacer Nanette February 26, 2011 at 10:19 am

Worked like a charm, thank you. Can I ask one more question… I would like to keep the functionality of the alt tag being automatically generated:

Did I get it right?

if ( is_home() || is_archive()) {
	the_post_thumbnail( 'home-thumb', array( 150,150 ), array( 'class' => 'imgleft', 'alt' => the_title('', '', FALSE), 'title' => the_title('', '', FALSE) ));

Reply

spacer Thesis-Blogs.com February 26, 2011 at 10:32 am

I don’t think you need that array with the dimensions. You can do this:

if ( is_home() || is_archive()) {
	the_post_thumbnail( 'home-thumb', array( 'class' => 'imgleft', 'alt' => the_title('', '', FALSE), 'title' => the_title('', '', FALSE) ));

Reply

spacer Benjamin May 13, 2011 at 3:31 am

Hi !

Very nice tutorial. I have a question if you don’t mind.

I thought it was possible to do “everything” with the OpenHook plugin. (I would like to use only this plugin, and not the custom-functions.php file).

Do you know if it’s possible to write these statements INSIDE OpenHook (and if it’s possible where do I have to write them) ?

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

Thanks a lot !

Cheers,

Reply

spacer Thesis-Blogs.com May 13, 2011 at 8:49 am

I prefer to use the custom-functions.php file, but you can use the openhook plugin if you’d like, although for the code you have above, you need to put that in the custom functions file. Just paste it in. It’s not a big deal. If you want to use openhook for other code that is attached to a hook in the custom functions file, then just paste the code into the applicable hook box in the plugin, but you would not include the ‘add_action’ part that attaches the code to the hook. Thanks for commenting.

Reply

spacer sergeliatko July 3, 2011 at 10:34 am

Hi , nice tutorial ! Just adore how your website looks.

For the code – there is a simplier solution for those how are not really easy with php/css – you have a video here

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.