How to Customize WordPress Featured Image Sizes With a Child Theme

Quite often when you get a new WordPress theme, it’s pre-defined Featured Image sizes doesn’t quite fit the specific style of your website. Sometimes your image is being cropped in a way that simply doesn’t look good, maybe you want to have bigger images, or maybe you want to completely disable the crop and display your images in their original aspect ratio. Fortunately, what may seem to be a major problem for you is actually pretty easy to fix.

In this tutorial we’ll learn how to override the Featured Image sizes defined in your theme and come up with something that works better for your needs. To do this properly, you’ll need to use a child theme and a simple PHP function. Let’s get started!

1. Install a Child Theme.

In order to override a Featured Image size in your theme the right way, you’ll need to add a new function. The best way to achieve this would be by using a child theme. Following this approach (which is the recommended WordPress way), you can preserve any changes you make to your theme, so you don’t loose them every time when there is an update released.

Basically, what child-themes do is safely overriding default theme features, without touching the original theme files.

For your convenience, all our WordPress themes come with a ready to use child theme.

Find the name of your Featured Image size.

Before we add our custom code, you need to find the name of the Featured Image size that you are looking to change. Most modern themes define multiple image sizes to be used in different areas (e.g. – post image size, shop image size, portfolio image size etc.). For example, if you wanted to change the Featured Image size for your blog posts listings, you’ll need to locate the Featured Image code in archive.php (or wherever the Featured Image code might be in your theme) It should look something like this:

<div class="featured-image"><?php the_post_thumbnail( 'blog-thumbnail' ); ?></div>

Most properly built WordPress themes will also add the image size name as class to the image tag in the HTML, as this is the default WordPress behavior, so you don’t even need to check insite template files, but simply check the name with your code inspector in the browser.

In this example, the name of our Featured Image crop would be rigid-portfolio-single-thumb. We can use this to redefine the size and crop of the portfolio image in our theme. Add the following snippet to the bottom of your child theme’s functions.php file.

Add The Function and Customize the Size

function yourthemename_child_theme_setup() {
    add_image_size( 'rigid-portfolio-single-thumb', 640, 480, true );
}
add_action( 'after_setup_theme', 'yourthemename_child_theme_setup', 11 );

In the function above, we’ve set the new image size to 640px wide by 480px tall. The third attribute, which is set to true, defines that images should be cropped to the specified dimensions using the center of the image as a starting point.

Alternatively you may only crop your image’s width, leaving the height to be determined by your image’s original aspect ratio. This could be very helpful if your images are taller and getting cropped in a way that hides important part of the visual content. To do that, you would need to only set a width parameter, as seen below:

function yourthemename_child_theme_setup() {
    add_image_size( 'rigid-portfolio-single-thumb', 640 );
}
add_action( 'after_setup_theme', 'yourthemename_child_theme_setup', 11 );

Regenerate Your Images

Note that in order to see the newly set image sizes on your live site, you’d need to regenerate your thumbnails. One of the best ways to do this is by using the “Force Regenerate Thumbnails” plugin by Pedro Elsner.

While it wasn’t updated for more than 3 years, it’s still fully functional, as there is nothing changed in this WordPress functionality. Once installed and activated you’ll find the plugin interface under Tools > Force Regenerate Thumbnails menu in your WordPress admin navigation.

The plugin will then go through your media library and update each image with the new crop sizes. The good thing about this plugin is that it will not only regenerate the thumbnails, but also delete any image sizes that are not more needed. Your original images will not be altered.

Wrapping Up

Changing image sizes generated by a theme or plugin is pretty easy. By using the functions above, you can redefine any properly set Featured Image thumbnail size on your WordPress powered website. It’s that simple.

About the Author: Althemist

Dimitar Koev is a graphic and web designer, front-end developer and marketing expert. CEO & founder of the Althemist team (previously known as Koev) - an independent envato market author, focused on building WordPress themes with strong e-commerce accent.