4 Steps Needed to Add Additional Image Sizes in WordPress

Got tired of the regular small, medium, and large image sizes in WordPress and want to implement custom options? You’re not alone. Many website owners and bloggers use themes that come with unusual picture dimensions or design their web page elements around uncommon resolutions and aspect ratios. While it’s true you can edit, then upload any picture size, WordPress will only generate versions in the aforementioned proportions by default. To save time and make your life easier, here’s how to add additional image sizes in WordPress.

Reasons to implement extra image sizes on your website

We already hinted at the primary purpose of the different image sizes WordPress offers. While you can create multiple versions of an image before uploading, that’s a huge waste of time if you need to consistently show pictures in predetermined sizes. For instance, if you’re running a blog, you’ll need to create a featured image, then make it appear on the home page, in another page view, as a thumbnail to entice visitors, and even a duplicate for, say, an archive.

Small, medium and large sizes indeed work for simple websites, but any advanced theme will come with a distinct CSS that may use custom sizes. In that case, using a custom size will look out of place or may even break the design. The extra work to fix that manually is unnecessary when you can let WordPress automatically create multiple images in dimensions you want. The best part is that you can call these sizes whenever you require them.

1. Add additional sizes to an image in WordPress manually

We want to preface this method by saying it requires you to edit your website files, especially the ones for your active theme. Before you do, even though changes are easily reversible, we suggest you create a backup of your website. If you aren’t comfortable with these modifications, we propose contacting the developer of your current theme and providing them with the information we’ll reveal in a moment. They can guide you on placing the code properly.

For demonstration, we’ll assume you’re building a WordPress them from scratch. Before you do anything else, you must add this code in the functions.php file within your theme after accessing WordPress using FTP. To clarify, go to “root/wp-content/themes/theme name/functions.php” and add this code:

add_theme_support( 'post-thumbnails' );

Your current theme should already support it. In both cases, you must now define the new sizes through the function titled add_image_size() this way:

add_image_size( string $name, int $width, int $height, bool|array $crop = false )

Examples of adding new sizes and controlling the crop method and size

Here are 3 examples of applying new image sizes:

add_image_size( 'unlimitedpost-thumb', 650, 9999 ); // This one will have unlimited height and a width of 650 pixels.
add_image_size( 'sidebar-thumbnail', 150, 150, true ); // This sets the size to 150 × 150 pixels, and cropping to hard crop. We'll explain that below.
add_image_size( 'blogpage-thumb', 240, 160 ); // Same as above, but cropping is soft.

There are 3 types of image crops above:

Employ unlimited height when you have a tall image such as a sidebar banner. It will crop the width to the specified position without changing the height of the uploaded image.
Use “true” when you want WordPress to hard crop the image to specified dimensions, starting from the center (by default). However, this could technically be either of the sides, depending on the size of the original image.
Soft crop will resize the original image but won’t distort it, It relies on the original aspect ratio to calculate width from height and vice versa.

You can control the crop position by adding an array, such as:

add_image_size( 'custom-size', 150, 150, array( 'left', 'top' ) );

This will add a hard crop, but instead of starting from the center, crop the upper left corner with the specified dimensions. You can title these sizes however you want and use “thumb” and “thumbnail” interchangeably.

Note. The default value for width and height is 0. However, you shouldn’t leave it out or enter “0”. Make sure the number is anywhere between 1 and 9999.

2. Make new image sizes display in your WordPress theme

Though you added new sizes, they still won’t apply to your website. That’s because they weren’t submitted to the WordPress loop, a complex PHP code this Content Management System (CMS) uses to process posts and displays them on the front-end. To fix that, add the following line of code to part of the loop where the newly, say, thumbnails, need to appear:

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

Replace “image-size-name” with the actual name you gave to the size, for example, “blogpage-thumb”.

3. Configure new dimensions as an option in the WordPress Admin Section (Optional)

WordPress will now begin creating images in newly defined sizes behind the scenes. However, that’s not as useful since you can’t see them anywhere on the backend, and thus can’t select or preview them. Though there are plugins that can do this, we suggest a direct option, though code added to functions.php in your theme’s files. Here’s an example:

function wpt_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'sidebar-thumbnail' => 'Sidebar Thumbmail', 
        'blogpage-thumb' => 'Blog Page Single Post Thumbnail'
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpt_custom_image_sizes' );

You can now see the option in the right sidebar when you click the image while editing a post or page in the WordPress Admin. However, do you want to have the option within WordPress Media Library? WordPress Developer Codex also provides this example for single image size:

add_filter( 'image_size_names_choose', 'my_custom_sizes' );

function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'your-custom-size' => __( 'Your Custom Size Name' ),
    ) );
}

Output new image dimensions using PHP or templates

We considered the possibility of you creating a simple theme or working on a project where you need to output pictures with the new image size to a web page. To do so, you must use the Media Library or a workaround to find the ID for the original image. You can then use this code:

echo wp_get_attachment_image( 52, 'your-image-size-name' );

Replace “52” and “your-image-name” with yours. If you only need to dump the URL of the custom image size, use the “wp_get_attachment_image_src()” function instead.

4. Regenerate all WordPress image thumbnails to add and apply new sizes

Don’t fret if you did everything yet can’t seem to add additional sizes to any older WordPress image. That’s because the change only applies to images uploaded after you introduced it. To go back and generate versions of older images, you will need to regenerate thumbnails. To do so, follow the instructions in the last method of our guide on fixing blank thumbnails in the WordPress Media Library.

How to Add Additional Image Sizes in WordPress