WordPress 101: How to Use add_image_size to Add Custom Image Sizes

In this tutorial, you are going to learn how to create WordPress custom image sizes by using the add_image_size function.

By knowing how to do it, you will not be stuck with the default resolutions, which might be too limiting for certain types of pictures like infographics and featured thumbnails.

With a little bit of code and help from a couple of plugins, you can gain more freedom when uploading pictures to your site!

What You Should Know About WordPress Image Sizes

Every time you create a post and want to add a picture, you might see an image size option in the settings. It includes four configurations, and one of them will be applied to your images:

• Thumbnail (150 x 150 px)
• Medium (300px height and width)
• Large (1024px height and width)
• Full size (the images’ original resolution)

If you want to add your own measurements, you can do so by manually changing the dimensions of each picture. However, that would take a lot of time and work if it’s done repeatedly.

That’s why, in this article, I am going to show you how to add custom image sizes in WordPress. This method will allow you to apply the desired resolution to your pictures efficiently. Additionally, to get the most out of your images, you should check image optimizers and widgets!

How to Add Custom Image Sizes

There are three major steps in adding custom image sizes in WordPress — registering the intended size to the theme functions file, displaying it on your theme, and then regenerating your thumbnail.

Without further ado, let’s get right into it!

1. Register a New Custom Image Size in the Theme Functions File

The first thing you need to do is access the theme’s functions.php file. To find it, go to your WordPress admin page, choose Appearance, and select the Theme Editor.

Then, put this line of code to the theme functions file so your theme can recognize new custom sizes:

add_theme_support( 'post-thumbnails' );

After doing so, you can start using the add_image_size() function that will describe your desired dimension.

Let’s take a look at some examples:

add_image_size( 'mini-size', 180, 180, true ); 
add_image_size( 'middle-size', 800, 200 ); 
add_image_size( 'extra-size', 1980, 9999 );

The words between the apostrophes are the names of your new custom sizes. They are then followed by the width and height in pixels, which are separated by a comma.

In the first example, the “true” value at the end of the code describes Hard Crop mode. This indicates a process where WordPress will precisely follow your intended measurement.

There is also another mode called Soft Crop. To implement it, you have to leave an empty space after the height value — just like in the second example.

With this mode, your image will be resized proportionally so the resolution might not be exactly as you want it to be. Usually, you can set the width, and then the height will automatically adapt to it.

Meanwhile, in the third example, the height is valued at 9999. This number represents Unlimited Height, meaning that your long images will be displayed at their full length.

2. Display New Custom Image Sizes in the WordPress Editor

Once you’ve registered the new sizes, the next step is to display them on your WordPress Editor. While there is a manual way to do this, it will be much easier if you use the Simple Image Sizes plugin.

After you install the plugin, navigate to the Settings menu, and select Media. There you’ll see the custom measurements that you’ve added recently.

If you want them to be displayed every time you add an image, untick the Show in post insertion box and click Update. Then, hit Save Changes to store your custom sizes.

Now, open the post editor to see if the new measurements are included in the image settings. It should look something like this:

3. Regenerate Thumbnails

Although you have successfully used the add_image_size function, it will only be applied to your upcoming images. You need to use a plugin called Regenerate Thumbnails to apply the new size settings to older pictures.

After activating the plugin, all you need to do is go to the Tools menu and select Regenerate Thumbnails.

Click the big blue button that reads Regenerate Thumbnails for All xx Attachment, and all of your pictures will automatically be resized in a few minutes.

Wrapping Up

Sometimes, the default image resolution settings in WordPress might be too restrictive. Therefore, you need to create custom image sizes so you can display pictures of any dimensions.

Here is a recap of how to do it easily:

1. Register your new custom image size by entering the add_image_size function to your theme’s function.php.
2. Use the Simple Image Size plugin to display the new size settings on the editor.
3. Lastly, apply the settings to your existing images by using the Regenerate Thumbnails plugin.

Isn’t that easy? Let’s try it right now!