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 '<img src="path/to/yourimage/jpg" />'; } |
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.
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!
- spam
- offensive
- disagree
- off topic
Like