How to Add Custom Image Size in WordPress

When you upload an image to WordPress, it automatically generates multiple sizes like thumbnail, medium, and large. But what if your theme or plugin needs a custom image dimension — like a 300×200 banner or a 600×600 square image?

To Add Custom Image Size in WordPress Use Below Code.

Add code to your child theme’s functions.php file or via a plugin that allows custom functions to be added, such as the Code snippets plugin. Avoid adding custom code directly to your parent theme’s functions.php file as this will be wiped entirely when you update the theme.

Add Custom Image Sizes with add_image_size()

function custom_theme_image_sizes() {
    add_image_size('custom-thumb', 300, 200, true); // hard crop
    add_image_size('custom-medium', 600, 400);      // soft crop (proportional)
    add_image_size('custom-square', 600, 600, true); // square crop
}
add_action('after_setup_theme', 'custom_theme_image_sizes'); //use this hook if you are register from theme

add_action('init', 'custom_theme_image_sizes'); // use this hook if you are register from custom plugin.

 add_image_size(
                'custom-thumb', // Name of your custom size
                300, // Width in  pixels
                200, // Height in pixels
               true // Crop mode (true for hard crop, false for soft)
);

Regenerate Thumbnails (Important!)

New image sizes won’t apply to already uploaded media unless you regenerate them.

use WP-CLI for faster results

wp media regenerate

Or you can use this plugin: Regenerate Thumbnails

Display Custom Image Size in Templates

Use the_post_thumbnail() or wp_get_attachment_image():

<?php if (has_post_thumbnail()) : ?>
    <div class="custom-image">
        <?php the_post_thumbnail('custom-thumb'); ?>
    </div>
<?php endif; ?>

Or if you have an image attachment ID:

echo wp_get_attachment_image($attachment_id, 'custom-square');

Make Custom Sizes Available in Gutenberg & Media Library

To make your sizes selectable in the block editor or Classic Editor:

function custom_add_image_size_names($sizes) {
    return array_merge($sizes, [
        'custom-thumb'  => __('Custom Thumbnail 300x200'),
        'custom-square' => __('Square Crop 600x600'),
    ]);
}
add_filter('image_size_names_choose', 'custom_add_image_size_names');

This adds your custom sizes to the dropdown in the Media modal and Gutenberg Image block.

Use in Advanced Custom Fields (ACF)

If you use ACF to select images

$image = get_field('hero_image');
if (!empty($image)) {
    echo wp_get_attachment_image($image['ID'], 'custom-medium');
}

Responsive Images (with srcset)

WordPress automatically includes srcset attributes, so your custom sizes are included too if registered properly. To take full advantage of it:

add_theme_support('responsive-embeds');

And use wp_get_attachment_image() or the_post_thumbnail() instead of hardcoded <img> tags.

Remove Unused Core Image Sizes (Optional)

To prevent WordPress from generating image sizes you don’t need:

function remove_default_image_sizes($sizes) {
    unset($sizes['medium']);
    unset($sizes['large']);
    unset($sizes['thumbnail']);
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'remove_default_image_sizes');

Custom image sizes help you:

• Reduce load time by avoiding oversized images
• Maintain a consistent layout and design
• Improve UX across devices