How To Add Custom Image Dimensions To WordPress Dropdowns

For some of us who write a lot on WordPress, a few extra seconds shaved off a routine task can be huge, especially when we have to repeat those things multiple times in a single post. For example, sizing images is a big one.

Using Custom Image Dimensions in WordPress

Every website’s layout is different, and each site owner needs to determine the standard dimensions of images that they want on their page. I’m not talking about the image size, since that depends on the file – I’m talking about the actual size that’s displayed on the screen.

By default, WordPress has the following custom sizes:

1. Thumbnail
2. Medium
3. Large
4. Full Size

These are self-explanatory. However, chances are that none of these are ideal for your article. You most likely need a custom image size. In the old classic WordPress editor, you had to go to the image settings, choose the “Custom Size” item from the drop-down box, and enter your custom dimensions as shown here:

Needless to say, this was annoying as hell when you had to do it multiple times per article.

Choosing Custom Dimensions in Gutenberg

With Gutenberg, the process got a bit smoother, but still not ideal. Now the process of adding an image is itself simplified – just type slash (/) and start typing “image”, and you can upload/choose an image from the gallery right then and there.

Also, when you select the image block, you can choose the properties on the right-hand side like this:

Here we have the same dropdown box with the standard image sizes explained above. However, you can directly type in a custom image dimension in a box below without specifically needing to select “Custom Size”.

Even more, you can manually resize the image by dragging the borders to the dimension you want. While it’s easier than manually entering the dimensions, it’s also a bit imprecise. If you have a bunch of writers on your site, you probably want to standardize the images that they use on the site. It’s not a good idea to just leave it to their discretion.

So here’s how to add a custom image dimension to the drop-down list for easy selection.

Adding a Custom Image Dimension to the Dropdown

Add the following code to your functions.php file, or to the plugin where you place your custom PHP code:

function use_new_image_size() {
    if ( function_exists( 'add_image_size' ) ) {
        add_image_size( 'new-image', 550, 0, false );
    }
}
add_action( 'after_setup_theme', 'use_new_image_size' );

function create_custom_image_size($sizes){
    $custom_sizes = array(
    'new-image' => '550 Image'
    );
    return array_merge( $sizes, $custom_sizes );
}
add_filter('image_size_names_choose', 'create_custom_image_size');

If you don’t know how to do this, here’s a tutorial from NameHero’s knowledgebase on how to add custom code to WordPress. It’s a useful skill!

In the above code, replace the dimensions of the image with the ones you want in the following line:

add_image_size( 'new-image', 550, 0, false );

So here, I’ve sent the image width as “550” pixels. Use the value that makes sense for your site. Also, in this line:

'new-image' => '550 Image'

Choose the label that will appear in the dropdown box for easy identification. Once you’ve saved your changes, a new item should appear in the dropdown list of image sizes like this:

And you’re done! Now if you select the new entry, your pre-defined image size will automatically be selected and applied to the image. It’s a great shortcut to save you lots of time, and it works just as well with the new Gutenberg WordPress editor too!

Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!