Mastering WordPress: Effortlessly Create Custom Image Sizes for Your Website

Are you struggling with the appearance of images on your WordPress website? Perhaps your featured images appear blurry and pixelated, or they are too large, causing slow page load times.

This issue is common among many WordPress sites, and it stems from the fact that the default image sizes provided by WordPress may not suit every website’s needs.

The great news is that creating custom image sizes is simpler than you might expect. This adjustment can enhance the clarity of your site and improve loading speeds.

In this comprehensive guide, you will discover how to create additional image sizes in WordPress. With just a few straightforward steps, you can optimize your images for better design and performance.

Why Should You Create Custom Image Sizes in WordPress?

You may need to create additional image sizes if the default options provided by WordPress or your theme do not meet your specific requirements.

Many popular themes and plugins automatically generate their own image sizes for features like thumbnails or unique layouts. However, these preset sizes may not always be adequate.

For instance, you might be developing a child theme, designing a grid layout, or optimizing images for a particular section of your website.

Custom image sizes allow you to create images with specific dimensions tailored to your needs, ensuring they are used optimally across your website.

In this guide, we will walk you through the steps to create additional image sizes in WordPress.

Here’s a brief overview of the topics we will discuss in this article:

1. How to Register Additional Image Sizes for Your Theme
   1. Understanding Hard Crop Mode
   2. Understanding Soft Crop Mode
   3. Exploring Unlimited Height Mode
2. How to Display Additional Image Sizes in Your WordPress Theme
3. How to Regenerate Additional Image Sizes
4. How to Enable Additional Image Sizes for Your Post Content
5. Bonus Tip: Resolving Image Upload Issues in WordPress
6. Frequently Asked Questions: Creating Additional Image Sizes in WordPress
7. Useful Guides for Managing Images in WordPress

Are you ready? Let’s dive in!

How to Register Additional Image Sizes for Your Theme

Most WordPress themes come with support for featured images, also known as post thumbnails.

If you are developing a custom WordPress theme, you will need to enable support for featured images.

Many WordPress experts suggest adding the following custom code snippets to your theme’sfunctions.phpfile.

add_theme_support( 'post-thumbnails' );

While it offers great features, WPCode may not be the most beginner-friendly option, as even a small error can potentially disrupt your site. We suggest using WPCode for adding custom snippets instead.

WPCode is a robust code snippet plugin that streamlines the process of adding custom code to WordPress, trusted by over 2 million website owners. It executes snippets as if they were part of your theme files, ensuring your customizations are secure and easy to manage, even for novices.

✏️ Important Note:Many of our brand partners utilize WPCode to incorporate custom code snippets into their websites. We have witnessed its simplicity and effectiveness firsthand, which is why we highly recommend it. Interested in learning more? Read our comprehensive WPCode review.

The great news is that the free version of WPCode allows you to add your own custom code snippets. Let’s proceed to install and activate the plugin. If you need assistance, you can follow the step-by-step instructions in our guide on installing a WordPress plugin.

After activation, navigate to Code Snippet » + Add Snippet in your WordPress dashboard. Then, click on the ‘Add Your Custom Code (New Snippet)’ button.

On the following screen, you will give a name to your custom code snippet. For instance, you can call this one ‘Post Thumbnail Support.’

Next, copy and paste this code into the ‘Code Preview’ section:

add_theme_support( 'post-thumbnails' );

Here’s how it may appear in the editor:

Afterward, ensure that you change the code type to ‘PHP Snippet.’

Next, toggle the switch from ‘Inactive’ to ‘Active’ and click on ‘Save Snippet.’

Once you have added the custom code snippet for post thumbnails, you can register additional image sizes using the add_image_size() function.

Again, let’s access the WPCode custom code snippet editor by navigating to Code Snippet » + Add Snippet. Then, select the ‘Add Your Custom Code (New Snippet)’ button.

Next, you can name this code snippet ‘Additional Image Sizes.’

In the code editor, you will use the add_image_size function in the following format:

add_image_size( 'name-of-size', width, height, crop mode );

Here are some examples of how the complete function may appear:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

In the unlimited height example, we specify a very large number like 9999 for the height. This instructs WordPress to allow the image to be as tall as necessary while maintaining a fixed width.

As you can observe, each example employs a different mode: hard crop, soft crop, and unlimited height. Choose the one that best suits your requirements.

Here’s how it appears in the code editor:

Remember to change the code type to ‘PHP,’ switch from ‘Inactive’ to ‘Active,’ and click the ‘Save’ button.

With that in mind, let’s explore how you can implement each mode on your own WordPress blog or website.

1. Hard Crop Mode

In the previous example, we used a ‘true’ value after the height. This instructs WordPress to crop the image to the precise size we specified, which is 120px by 120px in this instance.

This feature automatically crops images from the sides or top and bottom, based on their dimensions. This ensures that all images maintain proportion and enhance the visual appeal of your WordPress website.

2. Soft Crop Mode

In our soft cropping example, we did not include a ‘true’ value after the height parameter:

add_image_size( 'homepage-thumb', 220, 180 );

This is due to the default setting of soft cropping mode being enabled.

Soft cropping adjusts the image size to fit within your specified dimensions while preserving the original aspect ratio. This ensures that your image remains undistorted and complete.

Depending on the original shape of the image, the final result may match the width but be shorter, or match the height and be narrower, ensuring it never appears stretched.

Here’s an example of how this might appear:

3. Unlimited Height Mode

At times, you may have lengthy images that you wish to display on your website while restricting their width. For instance, you might have designed an infographic for your business site, which tends to be long and generally wider than the content area.

The unlimited height mode enables you to set a width that maintains your layout while allowing for flexible height.

How to display extra image sizes in your WordPress theme

After adding new image sizes to your website, you will need to showcase them in your WordPress theme.

If you are developing or modifying your own theme and are comfortable with coding, you can directly include these new image sizes in your theme files.

To achieve this, open the theme file where you wish to display the image, such as single.php or archive.php, and insert the following code within the post loop:

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

You might want to apply some styling to ensure the image blends seamlessly with the rest of your site. However, this is all you need to display additional image sizes in your theme.

Regenerating Additional Image Sizes

Theadd_image_size() function only generates new image sizes when you upload a fresh image. Consequently, any images uploaded prior to implementing the add_image_size() function will not include the new sizes.

To resolve this issue, you need to regenerate the thumbnails on your WordPress site using the Perfect Images plugin. This tool will also regenerate your featured images and retina images while updating your media metadata.

First, install and activate the plugin. If you require assistance, please refer to our guide on how to install a WordPress plugin.

After activation, navigate to Media »Perfect Images.

Perfect Images will now scan your WordPress media library, so please allow a few moments for the process to complete.

Once the scan is complete, open the dropdown menu labeled ‘Bulk Actions’ and select ‘Regenerate All Entries.’

Perfect Images will now regenerate all of your thumbnails.

For further details on this subject, please check our article on how to regenerate new image sizes.

Activating Additional Image Sizes for Your Post Content

While you have added new image sizes, they can only be utilized within the WordPress theme and not directly in post content.

To enable these new sizes in the WordPress content editor, you need to register the following code in WPCode:

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

Simply repeat the same steps to add the custom snippet code we provided. Remember to activate and save the snippet after inserting the code.

Now, when you upload an image to WordPress, all the custom sizes will appear under ‘Image size.’ You can easily adjust the image size while editing any page or post.

Bonus Tip: Resolving the Image Upload Issue in WordPress

Now that you understand how to create and manage custom image sizes, let’s address another common challenge faced by many WordPress users: difficulties with image uploads.

If you’ve encountered an error message while trying to upload an image to your website, don’t be alarmed. This is a common issue that can arise for several reasons.

Firstly, different web browsers manage uploads differently, meaning that an upload that works in one browser may not function in another. Additionally, your site’s cache might be causing problems. If it’s outdated, it can disrupt the upload process, so clearing it could resolve the issue.

✏️ Important Note:At CanadaCreate, we utilize WP Rocket for caching management and to enhance our site’s speed. This tool ensures our pages load quickly and helps prevent issues like image upload errors. Check out our comprehensive WP Rocket review for more details.

Occasionally, plugins and themes can also be the source of the problem.

Some plugins may interfere with the upload process without your awareness. Additionally, poorly coded themes can lead to conflicts when attempting to upload images.

For tips on troubleshooting, refer to our guide on resolving image upload issues in WordPress.

Frequently Asked Questions: Creating Custom Image Sizes in WordPress

What are the default image sizes available in WordPress?

By default, WordPress generates several different sizes each time you upload an image:

• Thumbnail – 150×150 pixels (cropped)
• Medium – up to 300×300 pixels
• Medium Large up to 768 x 768 pixels
• Largeup to 1024 x 1024 pixels

Your WordPress plugins or theme may introduce additional custom image sizes based on their functionality.

Will adding new image sizes impact my existing images?

No, new image sizes will only apply to images uploaded after the new sizes are created. To include the new sizes for images already in your WordPress media library, you will need to regenerate thumbnails using a plugin like Perfect Images.

How can I determine which image sizes to create?

This depends on your theme’s layout. A good starting point is to examine the areas where you plan to use the images, such as your main content column, sidebar, or full-width sections. You can use your browser’s Inspect tool to find the exact dimensions of these areas.

Useful Resources for Image Usage in WordPress

We hope this article has helped you understand how to create additional image sizes in WordPress.

You may also find our other useful guides on:

• Top WordPress Plugins for Image Management
• WebP vs PNG vs JPEG: Choosing the Best Image Format for WordPress
• How to Easily Add a Background Image in WordPress
• How to Create an Image Gallery in WordPress
• A Step-by-Step Guide to Creating a Responsive Slider in WordPress
• Simple Techniques for Adding Image Hover Effects in WordPress
• Quick Ways to Bulk Resize Large Images in WordPress

If you enjoyed this article, consider subscribing to our YouTube Channel for helpful WordPress video tutorials. You can also connect with us on Twitter and Facebook.