Tips on Using the WordPress Featured Image

Posted on by in WordPress Tutorials

The Featured Image function has become a favorite of WordPress theme/plugin developers, blog authors, and just about everyone else who uses WordPress. It is a truly great feature, so here are some tips on how to really utilize its greatness.

Some Basics

First of all, obviously, you need to enable it in your theme if you haven’t. To do this you need to add the following to your functions.php template:

1
add_theme_support( 'post-thumbnails' );

Next, you can set a default thumbnail size (again in functions.php):

1
2
set_post_thumbnail_size( 649, 245, true ); // default post thumbnail size with a hard crop
// use "false" for soft crop, or box resize mode

Alternatively, you can display the default post thumbnail size with this function:

1
the_post_thumbnail();

More Advanced with Multiple Sizes

It’s really easy to add multiple thumbnail sizes that will allow you to display differently sized images in various parts of your site, while only uploading the image once. WordPress generates all of the sizes for you during upload.

To add a thumbnail size, you would add this to functions.php:

1
2
// name of the thumbnail, width, height, crop mode
add_image_size( 'post-image',  300, 180, true );

Or you could define more than one extra size like this:

1
2
3
// name of the thumbnail, width, height, crop mode
add_image_size( 'post-image',  300, 180, true );
add_image_size( 'featured-image',  652, 245, true );

Now you can display which ever size you want by passing the name of the desired thumbnail to the function, like so:

1
the_post_thumbnail('post-image');

Checking for a Thumbnail

At times, it can be very useful to check whether a post has a featured image set, and alter the content if not, or display a default image. The function below will display an alternate image if no thumbnail is present.

You would add this code to single.php, index.php and any other template you want to display featured images:

1
2
3
4
5
if(has_post_thumbnail()) {
	the_post_thumbnail();
} else {
	echo '<img />';
}

This code snippet must go inside of the loop.

When developing WordPress sites, I will commonly set up three or four thumbnail sizes: one for a featured slider, one for the most recent posts, perhaps one for less recent posts, and one for the header image when viewing a single post.

Troubleshooting

When creating thumbnail sizes, it’s very common to have some of your images get distorted, or cropped incorrectly. This is most likely because the size was added after the image (and its thumbnails) were uploaded.

If this happens, use the Regenerate Thumbnails plugin to recreate the thumbnails for every image in the WordPress media library.

Have fun with images!

Pippin

)

Comments (24)

Comment by Pippin Williamson says:

Here’s your complete code: http://pastebin.com/BZQHt3aP

Comment by Matt Stabile says:

Sorry, it’s still cutting it off. Here’s the code at this Google Doc:

https://docs.google.com/document/d/1zp-iV3rCme5QfLRAgHVKDXYY8IvbQ4EdKOcnTb4N4MM/edit

Comment by Matt Stabile says:

Sorry, it’s weird, every time I cut and past the code this comment section cuts it off. I’ll try it again:

ID, ‘post_thumbnail_value’, true) != ”) { ?>

<a href="”><img class="post-image" src="/timthumb.php?src=ID, ‘post_thumbnail_value’, true); ?>&w=154&h=154&zc=1″ alt=”” />

Comment by Matt Stabile says:

Thanks Pippin,

Not to be a complete lunkhead, but I’m new to this whole WordPress coding thing. Could you let me know where I’d include that bit of code? I’ll paste the relevant section below:

?php } ?>

ID, ‘post_thumbnail_value’, true) != ”) { ?>
“><img class="post-image" src="/timthumb.php?src=ID, ‘post_thumbnail_value’, true); ?>&w=154&h=154&zc=1″ alt=”” />

“>

Posted on by

Comment by Pippin says:

You can do it like this:

if(has_post_thumbnail()) {
the_post_thumbnail();
} else {
// put your old image code here
}

Comment by Matt says:

Exactly. I have so may old posts, and I don’t want to go back and have to edit each post and cut and past the image file location. I’d rather just have my Archives.PHP pull the image from what was set as the Featured Images.

Comment by Pippin says:

Mat, so are you wanting to know the code you’d need to use to change it to the featured image?

Comment by Matt says:

Right now my theme requests that I insert the specific file location for the image I want to use for my thumbnail when viewing the archives (in a special field box). However, I would rather my theme simply use the image that has been designated as my “Featured Image” (I used a plugin that automatically set my first image in each post as my “Featured Image”, therefore, I’d like all those old posts to display that thumbnail.)

Here is the code in my Archives.PHP theme that is pulling the image:

?php } ?>

ID, ‘post_thumbnail_value’, true) != ”) { ?>
“><img class="post-image" src="/timthumb.php?src=ID, ‘post_thumbnail_value’, true); ?>&w=154&h=154&zc=1″ alt=”” />

“>

Posted on by

Comment by WP Mods says:

Images that are set as featured can also be inserted directly into articles. Therefore you don’t need to look for any alternative solution.

Comment by WP Mods says:

Images that are set as featured can also be inserted directly into articles. Therefore you don’t need to look for any alternative solution.

Comment by Ana Peterson says:

Do you know how we can use related post thumbnail without setting featured picture, but picture to be used from embedded picture from the post?

Comment by Ana Peterson says:

Do you know how we can use related post thumbnail without setting featured picture, but picture to be used from embedded picture from the post?

Comment by Pippin says:

Andrew, when you use add_image_size(), a new size option will be added to WordPress. Whenever an image is uploaded through the media uploader, a image version matching the criteria you passed to add_image_size() will be automatically created. So it will work with all images.

Comment by Andrew says:

Is this an image by image thing? Is there anyway of automating it so that all images retain their original proportions, but within the standard wp rectangle.

Im not doing the work myself, but the developers dont seem to have hit this problem before

Comment by Pippin says:

Use the add_image_size() function.

Comment by Andrew says:

I have a major problem with an art site I have in wp – I have landscape and portrait pictures of all sorts of sizes and cant find a way of stopping wp distorting some images and weirdly cropping others.

Any ideas?

Comment by DoctorPC says:

Muchas gracias, fue de gran utilidad

Comment by Sean Fitzpatrick says:

Very simple, thanks so much for taking the time to post this. This is much easier than trying to catch the first image like before.

Comment by Pippin says:

What do you mean add “featured image pro grammatically”? Do you mean create new image sizes with the plugin, or something else?

Comment by Mihir says:

hey m finding a way to add featured image pro grammatically. i wanna use it with TDOMini Forms. any idea ?

Comment by Pippin says:

You would have to open the main YARPP plugin file and find where it displays the post images and replace that with the featured post thumbnail function.

Comment by Che says:

How do I implement this crop function in YARPP template? Do you know how?

Comment by Pippin Williamson says:

So you just want to crop it, or just resize it? The “true” at the end of add_image_size( ‘post-image’, 300, 180, true ); can be changed to “false”, which will cause the image to be “soft cropped”.

Try it.

Comment by dijup says:

is there any solution to get the cropped image current implementation is just resizing the available image