Custom image sizes for your WordPress theme

WordPress has 5 default formats for image sizes, which are automatically created every time after uploading an image file. It will be stored in the media folder ../wp-content/uploads/../. The default image sizes are the following:

In the template files of a theme or plugin, you can use the WordPress function the_post_thumbnail() or get_the_post_thumbnail() to get different image sizes. The size of the image must be specified as follows:

Read more about WordPress and the image sizes.

How can I add custom image sizes?

There are some use cases where it makes sense to use user-defined image sizes that deviate from the WordPress default image sizes. For example, if you want to use a large and wide image size for the website header or one or more other resolutions for large image views.

In this case, we have the opportunity to use the WordPress filter image_size_names_choose to create your own individual image sizes. This can be done as follows:

Simply add new image sizes via the add_image_size() function, for example inside the after_setup_theme action of your functions.php file. In the above example I have added several variants of the two new image sizes “Square” and “Wide”.

With each new image upload, your new image sizes are automatically created and are now available in WordPress.

Old pictures have to be regenerated!

Please note: The new image sizes are not automatically created for old images that were previously uploaded. For this, all image sizes must be regenerated. In this case you can use a plugin like Regenerate Thumbnails:

Once the plugin has gone through, your new image sizes are also available for all older WordPress images.

How can I select individual image sizes in WordPress?

By adding new WordPress image sizes, themes and plugins can now access them. However, if you are in the WordPress backend and want to use your new image sizes in a post, they are not automatically available in the image size selection for a particular image.

To make new image formats selectable we use the WordPress filter image_size_names_choose and including the following snippets of code, for example into the functions.php file of the theme:

Make sure the unique names $sizes['image_square_thumbnail'] for the new image sizes are the same as the names we added using the add_image_size('image_square_thumbnail', '…') function.

The new image sizes should now also be available in the WordPress backend inside the image size selection dropdown.