WordPress has a built-in feature post thumbnail aka featured image. Whenever a new image is uploaded to WordPress through a media uploader 3 types of images with different sizes get created.

Admin can register 3 sizes for images from Settings->Media page.

Default Thumbnail Size

As seen in the screenshot, Thumbnail size, Medium size, and Large size are registered. When we upload a new image, 3 images with the above-specified dimensions are proportionally created. If we select the option ‘Crop thumbnail to exact dimensions (normally thumbnails are proportional)’ under ‘Thumbnail size’ then the image will be a hard crop to the specified size.

It’s all about the default 3 sizes of image WordPress allows us from Media settings. What if we need to register one more size for the uploaded image? There are some cases appear where we need to display the images with the exact width and height.

Well, we can do this with a few lines of code.

Register New Image Size For Thumbnails

WordPress provides a function add_image_size() that helps to register new post_thumbnail sizes.

To use this method we should add support for post thumbnails. Place the below code in functions.php file.

add_theme_support( 'post-thumbnails' );

add_image_size() method has 4 parameters like this: add_image_size(‘name-of-size’, width, height, crop mode );

If we pass the fourth parameter as true then the image will be a hard crop. If we pass false then the image will be cropped proportionally.

The example code would be as follows.

add_image_size('hard-crop-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size('soft-crop-thumb', 220, 180 ); // Soft Crop Mode

Make sure you are not using reserved names in the above function. Reserved names are ‘thumb’, ‘thumbnail’, ‘medium’, ‘large’, ‘post-thumbnail’.

So our final code is as follows.

add_theme_support( 'post-thumbnails' );
add_image_size('hard-crop-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size('soft-crop-thumb', 220, 180 ); // Soft Crop Mode

Once you add the above code in your functions.php, every new image uploaded through the media uploader will create additional 2 thumbnails with the above sizes.

How To Use It?

We have added code for additional image sizes, Now to display those images you can use the below code.

<?php the_post_thumbnail( 'your-specified-image-size-name' ); ?>

Above code should use inside the post loop. If you want to use it outside the loop then the code will be:

<?php get_the_post_thumbnail('YOUR_POST_ID', 'your-specified-image-size-name'); ?>

Why Should Use Regenerate Thumbnails?

add_image_size() function registers new thumbnail sizes for the new images, not for the old images which already been uploaded into a system. To convert old images, install the plugin Regenerate Thumbnails and activate it.

After activating the plugin, go to Tools->Regen. Thumbnails. Click on the Regenerate All Thumbnails button.

You can also regenerate thumbnails for specified images. Below are steps for it.

• Go to the Media page.
• Select the table grid layout.
• Check the image you want to regenerate thumbnails.
• Select the ‘Regenerate Thumbnails’ option from the drop-down.
• Hit the Apply button.

We hope you understand about registering custom image sizes and resizing existing images. If you have any questions or suggestions, please leave a comment below.

Related Articles

• How To Set Featured Image Programmatically In WordPress
• Resize Image In PHP Using TinyPNG
• Upload Image Using Bulletproof Library In PHP

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.