Create custom image and thumbnail sizes in WordPress

WordPress comes with a set of default image and thumbnail sizes. When you upload an image, WordPress optimises it into these sizes and puts the files into your upload folder. But what if you want to create custom image and thumbnail sizes appropriate to your website?

Of course, we could just let the browser scale the images and use the larger sizes that WordPress has to offer; but this isn’t very good for optimisation and speed. If at all possible, it is generally ‘best practice’ to lower the image file sizes as much as possible. That way we can deliver them to the browser, faster.

Let’s look at how to create and register our own custom image and thumbnail sizes and use them within our posts and pages.

Choose an image size and name

You probably already have an image size in mind at this point, which is great. For me I want to set a width of 750px and have WordPress use a dynamic height. Doing this means that WordPress will scale the height of our image according to the width. To do dynamic sizing in WordPress we enter ‘9999’ for the size.

Start by writing a function in your functions.php:

function gb_add_image_sizes() {

}

Inside the function we are going to use the add_image_size() function. This function registers our new image size with WordPress. In this example I’m passing the name, width and height.

function gb_add_image_sizes() {
    add_image_size('750width', 750, 9999);
}

Hook up the image size function

Now that we have our function we can add it to WordPress using the add_action() hook. I like to do this after the theme setup.

add_action('after_setup_theme', 'gb_add_image_sizes');

At this stage WordPress is aware of our new image size and will generate the files for us every time we upload new media. Unfortunately, this doesn’t automatically make it available to all of our post types.

Note: Adding a new image size won’t retrospectively create sizes for all of our old media; for this you will need to regenerate your thumbnails.

Make your new image size available to posts and pages

To make our new image size available for use in Gutenberg we are going to create a filter function using add_filter().

First make a callback function for the filter. We’ll be filtering ‘image_size_names_choose’, so we need to modify the $sizes variable.

function gb_new_image_sizes($sizes) {

}

Next we create an array for our new image size and merge it back into the $sizes array. The merged array is what we are going to return from the filter.

When creating our array, the name of the size is the key and the ‘name you would like to appear in Gutenberg’ is the value.

function gb_new_image_sizes($sizes) {
    $addsizes = array(
        // imageSizeName => nameAppearingInGutenberg
        "750width" => "750px Width"
    );

    return array_merge($sizes, $addsizes);
}

The final step is to register the filter with WordPress using the add_filter() hook.

add_filter('image_size_names_choose', 'gb_new_image_sizes');

Your custom image size will now be available for you to select whilst editing posts and pages!