Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Create Additional Image Sizes in WordPress

Do you want to create additional image sizes in WordPress?

By default, WordPress automatically creates several copies of image uploads in different sizes. Additionally, WordPress themes and plugins can also create their own image sizes.

In this article, we’ll show you how to easily create additional image sizes in WordPress and use them on your website.

Creating additional image sizes in WordPress

Why Create Additional Image Sizes in WordPress?

Normally, all popular WordPress themes and plugins handle image sizes very well. For instance, your WordPress theme may create additional sizes to use as thumbnails on archive pages.

However, sometimes these image sizes may not fit your own requirements. You may want to use a different image size in a child theme or a post grid layout.

You can do this by creating additional image sizes in WordPress and then calling these sizes whenever you need them.

That being said, let’s take a look at how to create additional image sizes in WordPress.

Registering Additional Image Sizes for your Theme

Most WordPress themes including all the top WordPress themes support post thumbnails (featured image) feature by default.

However, if you are creating a custom WordPress theme then you will need to add support for post thumbnails by adding the following code to your theme’s functions.php file.

add_theme_support( 'post-thumbnails' );

Once you enable the support for post thumbnails, you can now use the functionality of registering additional image sizes by using the function add_image_size().

The add_image_size function is used in the following format:

add_image_size( 'name-of-size', width, height, crop mode );

Example code can look like the following:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

Now if you notice, we have specified three different sorts of image sizes. Each has different modes such as hard crop, soft crop, and unlimited height.

Let’s cover each example and how you can use them in your own projects.

1. Hard Crop Mode

As you may notice, there is a “true” value added after the height. This tells WordPress to crop the image exactly to the size that we have defined (in this case 120 x 120px).

This method is used to ensure that everything is exactly proportionate. This function will automatically crop the image either from the sides or from the top and bottom depending on the size.

Hard crop images example

2. Soft Crop Mode

By default, soft cropping mode is turned on this is why you do not see any additional value added after the height. This method resizes the image proportionally without distorting it. So you might not get the dimensions that you wanted. Usually, it matches the width dimension and the heights are different based on each image’s proportion. An example display would look like this:

Soft crop example

Unlimited Height Mode

There are times when you have super long images that you want to use in your design, but you want to make sure that the width is limited. For instance, infographic images tend to be very long and usually wider than the content width.

This mode allows you to specify a width that will not break your design while leaving the height to be unlimited.

Unlimited height mode

Displaying additional image sizes in your WordPress theme

Now that you have added the functionality for the desired image sizes lets take a look at displaying them in your WordPress theme. Open the theme file where you want to display the image and paste the following code:

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

Note: This bit of code must be pasted inside the post loop.

That’s all you really have to do to display the additional image sizes in your WordPress theme. You probably should wrap it around with the styling that fits your need.

Regenerating Additional Image Sizes

If you are not doing this on a brand new site, then you probably will have to regenerate thumbnails.

The add_image_size() function only generates the sizes from the point it was added into the theme. This means any post images that were added prior to the inclusion of this function will not have new sizes.

To fix this, you need to regenerate the new image size for older images. This is made easy by the plugin called Regenerate Thumbnails. Once you install and activate the plugin, a new option is added under the menu: Tools » Regenerate Thumbnails

Regenerate thumbnails

You’ll see the option to regenerate thumbnail for all images or just the featured images. We recommend regenerating all images to avoid any unexpected behavior or broken images.

For more details, see our article on how to easily regenerate new image sizes in WordPress.

Enabling Additional Image Sizes for your Post Content

Even though you have enabled image sizes in your theme, the usage is limited only to your theme which does not make any sense.

All image sizes are being generated regardless, so why not make it available for the post author to use within the post content.

You can do this by adding the following code to your theme’s functions file.

function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'homepage-thumb' => 'Homepage Thumbmail', 
        'singlepost-thumb' => 'Infographic Single Post'
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

Don’t forget to save your changes after adding the code.

You can now go and upload an image to a WordPress post or page. In the image block settings you’ll see your custom image sizes under the ‘Image size’ option.

Choose your custom image size inside post editor

You and other authors working on your website can now select these size options when adding images to posts and pages.

We hope this article helped you learn how to create additional image sizes in WordPress. You may also want to see our article on the best image compression plugins for WordPress and our WordPress performance guide to improve your website speed.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

40 CommentsLeave a Reply

  1. Hi,

    Great article! However, I still do not understand the usefulness of hard crop tool; I uploaded an image with 306×165, and after that I created two custom sizes: 256×148 (Soft Crop) and 256×148 (Hard Crop), however, as you can see in this print taken from the post: [http://prnt.sc/eromp3] both Options remain the same. I created a file in Photoshop containing 256×148 and I dragged the original image without resizing anything, and the result you can see in example 4 of the image above. So, my question is this: should image 2 not look like the image generated by Photoshop?

    Follows below the code used on functions.php:

    //Soft Crop used in example 2
    if ( function_exists( ‘add_image_size’ ) ) {
    add_image_size( ‘new-size8’, 256, 148 );
    }
    add_filter(‘image_size_names_choose’, ‘my_image_sizes8’);
    function my_image_sizes8($sizes) {
    $addsizes = array(
    “new-size8” => __( “New Size8”)
    );
    $newsizes = array_merge($sizes, $addsizes);
    return $newsizes;
    }

    ////Hard Crop used in example 3
    if ( function_exists( ‘add_image_size’ ) ) {
    add_image_size( ‘new-size9’, 256, 148, true, array( ‘center’, ‘center’ ) ); //(cropped)
    }
    add_filter(‘image_size_names_choose’, ‘my_image_sizes9’);
    function my_image_sizes9($sizes) {
    $addsizes = array(
    “new-size9” => __( “New Size9”)
    );
    $newsizes = array_merge($sizes, $addsizes);
    return $newsizes;
    }

    Thanks in advance!

  2. This works great, but on thing that always bothers me is that if someone uploads an image that is smaller than one of your cropped sized then that image will not be created, which ruins the layout if you wanted equal height images

    • Struggling with the same issue, Kevin (uploading smaller image does not create cropped size). I understand why this might make sense (system will not produce unnecessary images), but a low/poor resolution would look better than an ill-cropped one…

  3. I write this code can.
    Actually i want to set the post thumbnail size for the banner image.Which i was uploading through featured image in the background please suggest me.

  4. Hi,
    I m new in wordpress,and accept i have many problems,and the first is,i created lot of post in wordpress,suppose A B C D,and when i update this in my website they look like first is D and then c and then b and then a means when i upload first they are show in last.if any solution that first they look in series not DCBA like ABCD…plz help

  5. Excellent! I read the use of this function on the Codex of WordPress but sometimes I need a step by step thing, thank you!

    • I too want to do the same as Ali Rohan wants to do. can you kindly elaborate pleas.. ‘coz i tried to implement the method explained by you but could not succeed. I can’t understand where I am doing wrong. How do I link the text of resolution to image file?

  6. Thanks for nice article.
    I wanna start a wallpapers website in wordpress so is it possible that when i upload one big wallpaper then it auto resized to many resolutions for users. For example when i upload 1920×1280 wallpaper then it must be resized to 1024×768, 800×600 etc resolution … so users can easily view and download desired size wallpaper ?

  7. Hi Dear. i need your urgent help. i have a problem with the images size. actually i am using a plugin WP Gallery Custom Links. i have uploaded lot of images in a post but every images has a different height and width so they are appearing with different different sizes. i want to set them with the same size which i want to set. please tell me any idea to solve this problem.

  8. I’ve set this up and it’s working splendidly minus the suggestion MIKE LITTLE made above – the thumbnail is changed and it shows up that way in the backend in the media gallery – but on the frontend where my loop is – the image thumb is still what WP defaults to – i’ve even run REGEN THUMBS and it still doesn’t fix the issue – anyone else having this problem or know the fix???

  9. Thank you for this very clear and helpful tutorial. It saved me a lot of time since the WP documentation is very cryptic.

  10. I have a wordpress account but I did not know how to manage it but now I know all thanks to this tutorial, thank you very much for helping people understand more on how to create and manage their websites.

  11. You say: “The downside of hard cropping is that you cannot control which part of the image is displayed.” Not true.

    When you have uploaded an image and before you insert into post, you can click on ‘edit image’ and from there change the thumbnail or the whole image, scale, rotate, or flip the image , and for the thumbnail select the exact portion of the image you want.

      • I can’s seem to get the custom crop to work for new image sizes. The custom crop will work for the default “thumbnail” size version, but that crop won’t apply to new image sizes. It seems the crop is still uncontrollable for custom image sizes.

  12. Good article ..and photos to go along with it too…nice. I saw in a few places how to do this but they did not explain it as well as you do here. I am off to try it out.

    Thanks a lot ! (0.o)

  13. Great tutorial! Thanks for explaining the different crop options. It really helped me to understand how they work.

  14. Nice round up of what can be done with just the default featured image feature. One extra tip: you can also set the width of your content area as a featured image and define that same width in Settings > Media. This way you can select a featured image to use in your theme and it will be automatically the maximum size of the content area.

    Also great having those values in there for <a href=”http://codex.wordpress.org/Embeds”>oEmbed</a>.

  15. Thanks for this tutorial, I was wondering why sometimes I had images that were not cropping to the size I had coded.

Leave a Reply to jezThomp Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.