If you’re builing a custom WordPress website you may come up with a need to add custom image size. That’s not hard at all, and I’ll show you how to do it.
There is, however, one catch – just by adding new image size WordPress blocks won’t let you select those image sizes in Image, Gallery or other WordPress Gutenberg editor blocks. So today I’ll show you all the steps needed to fully utilize these new image sizes. Here’s what you’ll learn to do:
- how to add new image sizes in WordPress
- how to generate new size images
- how to add new image sizes to WordPress blocks
The example I’ll show you was added to Genesis Sample theme. But it should work on every WordPress theme. Let’s begin with the first step.
How to add new image size in WordPress
Adding new image size in WordPress takes only a single line of code. What you need to do is go to Appearance >> Theme File Editor in WordPress admin panel, and open file functions.php .
Scroll to the bottom of the file, and add line of code:
add_image_size( 'custom-550', 550, 500, true );What this line means:
- custom-550 is an example of new image size name. You may use any name you want.
- 550 in the example is new image width in pixels.
- 500 in the example is new image height in pixels.
- the last one – true, shows that the new image has to be cropped. So even new image is built from vertical image, this new size needs to be cropped to that specific size you entered.
You may use any numbers and names you need.
More information about add_image_size function can be found in WordPress documentation.
After you add this line to your WordPress theme’s (or even better – child theme’s) functions.php and save changes, the new custom size is ready to use in themes and plugins. But that’s not it – we need another two steps to make sure we can use the image in WordPress blocks.
Next step – to generate the actual images for that custom image size.
How to generate new image sizes or regenerate all images in WordPress
Once you add a new custom image size in WordPress you should also generate new size images for already uploaded media files – WordPress does not generate all images automatically once you add new custom image size.
To generate new size images in WordPress go to Plugins >> Add New, and enter regenerate thumbnails to the search box at the top. Choose plugin Regenerate Thumbnails and Install Now.
Once the plugin is installed and activated go to Tools >> Regenerate Thumbnails, and click Regenerate Thumbnails for All Attachments button.
Depending on your server speed, image size and total number of images it might take from few seconds to minutes. Once it’s done you can go to the final step – to make sure that new image size shows up in WordPress blocks.
How to add custom image sizes to WordPress blocks – Image, Gallery, and others
After adding new image size and generating new size thumbnails you might think that new image size will also be available in WordPress block editor. But it actually won’t be visible yet. New image size needs to have a title to show up in Gutenberg blocks.
To add image size to block go to Appearance >> Theme File Editor, and open functions.php file again, and add this code at the bottom:
add_filter( 'image_size_names_choose', 'imakeitwork_image_sizes' );
function imakeitwork_image_sizes($sizes) {
return array_merge($sizes, array(
'custom-550' => __('ImakeITwork image size')
));
}Make sure to replace custom-550 with the same image size name you used in add_image_size function I wrote about previously. And feel free to replace ImakeITwork image size with the title you want to appear in WordPress blocks.
After adding addimagesize function and imagesizenames_choose filter you’ll be able to use new image size in any WordPress block which lets select image size – like Gallery and Image block.
