How to easily Add Custom Image Sizes in WordPress (4 steps)

Are you looking for a simple method to create custom image sizes in WordPress? Luckily, you have landed in the right place. In this tutorial, we will demonstrate how to add custom image sizes in WordPress to help you easily use them. Now, give it a look!

Why do you need to add custom image sizes in WordPress?

By default, WordPress offers three image sizes that include thumbnail, medium, large, and full sizes. Whenever you upload an image, WordPress will automatically create additional files for these default sizes.

Nevertheless, sometimes these image sizes are not suitable for your own purposes. In this situation, you need to use additional image sizes in WordPress. This will help you save much time using photoshop tools to edit your photos.

How to add custom image sizes in WordPress?

Now, we will provide you with a detailed guide to help you easily add custom image sizes in WordPress. Now, let’s go over the following steps.

Step 1: Registering additional image sizes for your theme

This method only requires you to write a few lines of code in your functions.php file. However, in order to avoid the risk of losing changes on your parent theme, you need to create a child theme or generate a backup of your website by using the WordPress backup plugin.

First of all, you need to add support for post thumbnails for your custom WordPress themes. To do that, you simply navigate to Appearance > Theme Editor from your WordPress dashboard.

Then, you need to select the functions.php of your child theme.

Now, simply copy the following code and add it to your functions.php file.

add_theme_support( 'post-thumbnails' );

This code snippet will help you enable the add_image_size() function on your website. After pasting the code, don’t forget to click on the “Update File” button to save your changes.

Next, you need to add your favorite custom dimensions. For example, we will use the following code to add custom image sizes.

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

In addition, you can change the name and size of each custom size according to your requirements. After you are pleased with your custom code, let’s paste it into your functions.php file.

Similarly, remember to press the Update File button to save your changes.

Congratulation! You have completely added your desired image sizes. The next thing you need to do is display them in your WordPress themes.

Step 2: Displaying additional custom image sizes in your WordPress Theme

In order to display your custom sizes in your WordPress theme, you need to copy the following code and paste it to the theme file where you want to showcase the image.

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

You should notice that that bit code must be pasted inside the post loop. In addition, you can change ‘your-specified-image-size‘ with the image name that you have set before. For example, you can change it into ‘post-thumbnail-size‘

Step 3: Regenerating thumbnails for previously uploaded images

Unluckily, the add_image-size() function only creates the sizes for images that you upload after this function has been added to the theme. Therefore, in this step, you need to regenerate thumbnails in WordPress so that all your previously uploaded images will be updated to the new sizes.

To resolve this issue, we highly recommend using the Regenerate thumbnails plugin. This tool will help you regenerate all thumbnail sizes for one or more images that have been uploaded to your media library.

For more details, you can access our tutorial to see how to regenerate thumbnails in WordPress by using the plugin.

Step 4: Enabling additional image sizes for your WordPress posts

Although you have added image sizes to your theme, this function is only used for your theme. Why should you take advantage of all generated image sizes to use in your post content?

To do that, you simply copy the following code and paste it into your theme’s functions file.

function wpb_custom_image_sizes( $size_names ) {
$new_sizes = array(
'homepage-thumb' => 'Homepage Thumbmail',
'singlepost-thumb' => 'Infographic Single Post'
);
return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

Remember to click on “Update File” to finalize the process.

Now, you are able to upload an image to your WordPress post or page. You will see that your custom image sizes will be displayed under the “Image size” option. You can optionally select your desired sizes for the images that you uploaded to posts/pages.

The bottom line

We have just provided you with a step-by-step tutorial to add custom image sizes in WordPress. Is this method useful for your website? Let’s share with us your opinion by leaving a comment below. Or if you need our assistance, don’t hesitate to contact us. We are always willing to support you.

Additionally, do you want to own a stunning website to draw the attention of your site’s visitors? If yes, don’t miss a list of charming, responsive, free WordPress Themes on our website.

• Author
• Recent Posts

LT Digital Team (Content & Marketing)

Welcome to LT Digital Team. We make daily blogs for Joomla! and WordPress CMS, support customers and everyone who has issues with these CMSs and solve any issues with blog instruction posts, trusted by over 1.5 million readers worldwide.

Latest posts by LT Digital Team (Content & Marketing) (see all)

• How to place menu items in helix joomla 5 ? - December 14, 2024
• How to reduce the size of helix 2 layout ? - December 14, 2024
• What’s J4 starter template and how to use it - December 3, 2024