How to add custom image size in WordPress?

Add custom image size in WordPress. By default, WordPress will automatically generate a variety of image upload models of different sizes. In addition, WordPress themes and plugins can also generate their own image sizes

What is the default WordPress image size?

By default, each WordPress installation will display three custom image sizes.

Thumbnail-150150
Medium – 300300
Large – 1024*1024

This means that when you upload an image to your website, the kernel will automatically generate models of these sizes. However, sometimes these dimensions are not what your website needs

Why do I need to create additional image sizes in WordPress?

Generally, all powerful WordPress themes and plugins can manage image size well. For example, your WordPress theme might create a new size to use as a thumbnail on the archive page. However, sometimes these image sizes may not suit your own needs. You may need to use different image sizes in subtopics or post grid layouts.

You can do this by generating custom image sizes in WordPress and then calling these sizes when needed

Manually add custom image size in WordPress

With some PHP, you will be able to add custom image sizes to your WordPress site. Since we will edit some core files before you start, we recommend that you create a sub-theme and generate a complete backup of your website

Add custom image size

Just log in to your WordPress dashboard and go to Appearance> Theme Editor.

By default, the theme editor will load the style.css file, but to place additional image sizes, you need to select the functions.php of the child theme.

After opening the fuctions.php file, paste the following code

add_theme_support('post-thumbnails' );

This single script will enable the add_image_size feature in your installation. Without this, you will not be able to create any custom image sizes. After pasting the code, press the "Update File" button.

We have vigorously enabled this feature on your website. Now, you need to add your preferred custom size. For this, we will use the following code:

add_image_size('sidebar-thumb', 140, 140, true ); // For Sidebar Image 140*140px
add_image_size('homepage-thumb', 240, 240 ); // For HomePage Image 240*240px
add_image_size('singlepost-thumb', 600, 300 ); // For single post Image 600*300px

You have successfully added an additional image size to your WordPress site.

Upload the image every time and check the size option. You will now see WordPress generate a copy of the image in the new custom size. In addition, you can use the regenerate thumbnail plugin to create thumbnails of images

Use plugins to create custom image sizes

If you don't want to edit the core files of the theme, you can use plugins to add additional image sizes. You can use two different tools/plugins to add custom code instead of editing the functions.php file. We are using one of them to do this job

Installation and activation code snippets

From your WordPress dashboard, go to Plugins> Add New. Search for Code Snippets, install and activate it.

Then, you need to go to the Code Snippets settings

Add custom code snippet

To add a new custom image size, you need to create a new clip

add_theme_support('post-thumbnails' );

add_image_size('post-thumbnail size', 800, 240 );
add_image_size('homepage-thumb size', 220, 180 );
add_image_size('fullpage-thumb size', 590, 9999 );