Codeable info

Use Featured Thumbnails Everywhere

Posted on by in WordPress Tutorials

I have written a lot of custom WordPress themes for dozens of different clients and one of my single favorite tools is the Featured Post Thumbnail. When working with images throughout a theme, this feature should be your absolute best friend. I am astounded, however, at the number of theme developers that do not take advantage of the power that is under their fingertips with this feature. After I used it the first time, I wouldn’t even think of developing a theme without using Featured Post Thumbnails all over the place.

So in this quick tutorial, I want to give you some tips on how to fully utilize this fantastic functionality.

Create Multiple Image Sizes

One of the greatest things about post thumbnails, and actually what makes them truly great, is how we can create as many automatically-generated image sizes as we want.

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 );

With the above code, we would have two thumbnail sizes generated every time we upload an image into WordPress, one that is 300×180 and one that is 652×245. What I like to do is create 5-8 different image sizes, and then use them throughout the site, like so:

1
2
3
4
5
6
7
// name of the thumbnail, width, height, crop mode
add_image_size( 'post-image',  300, 180, true ); // post image shown in main blog feed
add_image_size( 'featured-image',  652, 245, true ); // large post thumbnail shown in the Featured section
add_image_size( 'slide-image',  900, 300, true ); // really large image for the main front-page slider
add_image_size( 'slide-image-small',  200, 200, true ); // small square image shown in carousel slider in footer
add_image_size( 'latest-post-widget',  80, 80, true ); // really small square shown for latest posts widget
add_image_size( 'related-posts',  180, 180, true );  // medium square for related posts images

By reading the comments in the code, you can get a very good idea of where each of these different image sizes would be used. The real beauty of this is that when I want to publish a post, I upload a single image, let WordPress do its magic, and every single one of my image sizes has been automatically created, meaning that I never have to spend tedious amounts of time creating all of the perfectly sized thumbnails, uploading them, and pasting their urls into countless meta boxes. Everything is done for me. Imagine how much non technical users of your theme will appreciate that.

In order to actually display the correct image size in the appropriate location in the theme, all we need to do is pass a parameter to the the_post_thumbnail() function, like this:

1
the_post_thumbnail('post-image'); // replace post-image with the name of your thumbnail, as declared above

Depending on how your layout is constructed, you may also need to check if a post thumbnail has been set or not, to better avoid breaking your carefully crafted layout.

1
2
3
4
5
6
if(has_post_thumbnail()) {
	the_post_thumbnail('featured-image');
} else {
        // show a default image if no thumbnail is set
	echo '';
}

If your theme users image anywhere, there is no reason whatsoever to not take advantage the Featured Post Thumbnail feature.

You can refer to my previous post for further details.

)
Codeable info

Comments (2)

Comment by Ria says:

I agree with you! I’ve just gone round and round with a “Premium” theme developer about this very issue. Thank you for the excellent tutorial!

Comment by Dave Grimes II says:

This is a nice little tutorial. I really think using thumbnails like this could boost visitors interest and interaction on almost any site! I’m psyched to give it a shot on some of my projects.

Thanks for sharing.

Codeable info