Why & how to use custom Featured Image sizes in WordPress

When creating a fully integrated WordPress site, an often overlooked feature is the built-in ability for developers to customise and create their own custom Featured Image sizes. Themes that support Featured Image allow authors to upload and specify a ‘featured image’ to accompany their post which can make an otherwise text-based excerpt an attractive post to read. This feature however, is often under-utilised as i’ve seen countless WordPress sites where the featured images are not shown at their native size and are either scaled up or down in the browser through CSS. Displaying the image at a different size can often look distorted and take longer to load than necessary.

How to set the base Post Thumbnail Size

Setting your Post Thumbnail size is incredibly easy via your theme’s functions file. Simply add and customise one of the two lines below:

set_post_thumbnail_size( 60, 60 ); // Creates a proportionate image 25px by 25px
set_post_thumbnail_size( 60, 60, true ); // Creates a cropped image 25px by 25px

And if your theme doesn’t already bring out the thumbnail, you can simply use the following code within the query Posts Loop:

the_post_thumbnail();

How to create additional custom Featured Image sizes

If you’re post’s featured image is going to appear at different sizes throughout the site, then you can register, generate and deploy as many different sizes as you wish. New custom sizes can be registered by adding them to your functions file in a similar way to setting the default Featured Image size above.

add_image_size( 'small-featured', 300, 9999 ); // Creates a proportionate new image 300px wide with unlimited height
add_image_size( 'small-cropped', 200, 200, true ); // Creates a cropped new image 200px by 200px high

Once you’ve set your new sizes on the theme’s functions.php file, you can then call them out on the front-end by using referencing them in either of the following ways:

<?php the_post_thumbnail( 'small-featured' ); ?>
 <?php the_post_thumbnail( 'small-cropped', array('class' => 'classname')); // to add a class to the img tag ?>

How to generate the new Featured Image size for existing images.

All this can sound great, but there is one small hurdle if you’re hoping to add a new Featured Image size onto an existing and established WordPress site. Once you create the new custom Featured Image size on your functions file, WordPress won’t automatically regenerate your existing media library images for the new size. It’s fine from then-on-in, any new image you upload will be generated at the new size, but it won’t automatically go through your previously uploaded images and do the same.

However help is at hand. Regenerate Thumbnails for WordPress is a free plugin designed to specifically overcome this problem. From the Tools tab in the sidebar, you can choose to regenerate all thumbnails and images within your Media Library (see opposite). Or you can navigate to the Media Library itself and regenerate individual or selections of images that you require at the new sizes.

So why bother?

Displaying various featured images at an exact, native size can seem like an unnoticeable and unnecessary task. However, when you consider that they will be crisp, undistorted, optimal file size and tailored to your design; it really is worth spending an extra few minutes setting up and deploying custom featured image sizes.