When you are working with templates in WordPress that use post thumbnails embedded using the the_post_thumbnail(); function, you can change the thumbnail size from the default, to a custom one. This is very useful if you would like to output the same post thumbnail for a post differently based on where on the site it is displayed (for example index listing and sidebar feature), or just want to give the thumbnail of a post type a custom size for display. Let’s have a look at how easy it is to add a custom image size to your WordPress theme.
Looking at the Function
The built-in function that is going to be used is called add_image_size(); and has been in WordPress since 2.9. It is now the only way to set a specific size to be used for the post thumbnail function. Here is the function in question, with some example values:
1 | <?php add_image_size('custom-thumbnail-size', 250, 150); ?> |
By adding the function above to your functions.php file, you will have access to use a new thumbnail size which has been named “custom-thumbnail-size” and it scales the images to be 250×150. By default and using the function as it is, it will keep the aspect ratio of the image, should it be larger and therefore scale to the largest of the two values (either width or height, whichever is largest).
Having it Crop Images
If you want, you can have the function crop the images to perfectly fit the desired dimension, all you need to do is change the default crop value from false to true, by adding a true at the end, like this:
1 | <?php add_image_size('custom-thumb-size-cropped', 250, 150, true); ?> |
Since the crop value defaults to false, you will only need to have it in there when you want to have cropping enabled.
Using With Post Thumbnails
To use a custom image size with the post thumbnails, you will need to pass the image size name when you call the post thumbnail. This is done like this:
1 | <?php the_post_thumbnail('custom-thumbnail-size'); ?> |
IMPORTANT: If Targeting Older WordPres Versions
If you are targeting older WordPress versions or want to enable compatibility with them, you need to check whether the add_image_size function exists (as well as the post thumbnail function) before proceeding to call it or you will get errors. A simple if statement will do it for you:
1 | <?php if(function_exists('add_image_size')) { add_image_size('custom-thumbnail-size', 250, 150); } ?> |
