Customize Featured Image sizes with a child theme

Sometimes the Featured Image size in an area of your theme doesn’t quite fit the style of your image. Maybe your image is being cropped funny, maybe you want to have shorter images, or maybe you want to remove the crop all together and let your images go commando. Luckily, you can override the Featured Image crops defined in your theme and come up with something that works better for your needs. To do this properly, you’ll need a child theme and a small code snippet. Let’s get started!

Grab a child theme.

In order to override a Featured Image size in your theme, we’ll need to add a new function via a child theme. By using a child theme, you can preserve any changes you make to your theme, while still being able to update the theme when new versions are released. For your convenience, our Child Theme article has pre-made child themes for each of our WordPress themes.

Find the name of your Featured Image crop.

Before we add the function, you need to locate the name of the Featured Image crop that you are looking to change, since your theme may have multiple crops defined. For example, if you wanted to change the Featured Image on your single post page, you’ll need to locate the Featured Image code in single.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>

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

Add the function and customize.

function yourtheme_child_theme_setup() {
    add_image_size( 'blog-thumbnail', 900, 600, true );
add_action( 'after_setup_theme', 'yourtheme_child_theme_setup', 11 );

In our snippet above, we’ve chosen to set the new crop to 900px wide by 600px tall. The third attribute, which is currently set to true, allows images to be cropped to the specified dimensions using the center of the image as a starting point.

You also have the option to only crop your image’s width, leaving the height to be determined by your image’s original aspect ratio. This is helpful if your tall images are getting cropped and you’d rather have them displayed at their full size. To do that, you would only set a width parameter, as seen below.

function yourtheme_child_theme_setup() {
    add_image_size( 'blog-thumbnail', 900 );
add_action( 'after_setup_theme', 'yourtheme_child_theme_setup', 11 );

Regenerate your images.

If it doesn’t look like your images are being updated to the new crop, it’s likely your media library will need to be refreshed to obtain the new crop sizes. You can download the Regenerate Thumbnails plugin, which will help you refresh your images. Once installed, you can go to Tools → Regen. Thumbnails and run the script. The plugin will go through your media library and update each image with the new crop sizes. The plugin will not modify your original images, it will only generate new images from the original image.

Wrapping up.

That’s all there is to it! Using the snippets above, you can redefine any Featured Image crop on your website. In our WordPress themes, you might use this to redefine portfolio image sizes, testimonial avatars, carousel images, and more. Let us know if you have any questions in the comments and we’ll be happy to help!

Published by Mike McAlister

A high-powered mutant of some kind, never even considered for mass production. Too weird to live, and too rare to die. I design all the things.

1 Comment

  1. Good job, but it’s not worked with me.


Leave a Reply

Your email address will not be published. Required fields are marked *

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match