How To Register Custom Image Sizes And Resize Existing Images In WordPress

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

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

Media Settings

Default Thumbnail Size

As seen in the screenshot, Thumbnail size, Medium size, Large size are registered. When we upload a new image, 3 more images with above-specified dimensions 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 of specified size.

Its all about default 3 sizes of image WordPress allows us from Dashboard. 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 some lines of code.

Register New Image Size For Thumbnails

WordPress provides a function add_image_size() which helps to create new post_thumbnail size.

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 3 parameters like this: add_image_size(‘name-of-size’, width, height, crop mode );

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

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 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 above code in your functions.php, every new image uploaded through media uploader will create additional 2 thumbnails with 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 post loop. If you want to use it outside the loop then the code will be as follows.

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

Why Should Use Regenerate Thumbnails?

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

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

Regenerate all thumbnails

You can also regenerate thumbnail for specified image. Below are steps for it.

  • Go to 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.

Regenerate single thumbnail

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

Related Articles

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

Leave a Reply

Your email address will not be published. Required fields are marked *