Change Featured Image Sizes With A Child Theme

Change Featured Image Sizes With A Child Theme

In today’s post, we’re going to explain how you can override Featured Image size defined in your theme, in order to do this task properly, we’ll need a child theme.

We will start with answering some question to explain what’s Featured Image and when you need to customize your Featured Image size.

 

What is  Featured Image?

Featured Image or sometimes called Post Thumbnails are one of the important features in WordPress theme, nowadays all themes using state of art technology support this feature on Post, Pages, Portfolio, Shop, or Custom Post Type.

This is an example shows Featured Image from Noor theme default blog.

 

Why do I need to customize Featured Image Size?

  • Your theme doesn’t quite fit the style of your image.
  • If you want to have shorter/longer images.
  • If you want to disable the image crop.

 

What Are Child Themes And Why Use Them?

The problem with making edits directly to your core theme file is that they will be lost if you update the theme to a new version. 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.

To solve this problem we will use a child theme. If you’re making any edits to the code of a theme, either in the functions.php file or in the style.css or any other files, it’s always best practice to use a child theme.

 

Step 1: Get 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. our Child Theme article has pre-made child themes for each of our WordPress themes.

If you are using another theme you can create a child theme following this article.

Step 2: Find the name of Featured Image.

Before we add the PHP function, you need to know the name of the Featured Image that you are looking to customize.

In this example, we will use the name of our Featured Image dima-grid-image .

Step 3: Add the function and customize.

In order to change featured image, we’ve to add a function called “yourtheme_child_theme_setup”. To do this you’ll need to open functions.php file. This file will be loaded in addition to the parent theme’s functions.php.

function yourtheme_child_theme_setup() {
    add_image_size( 'dima-grid-image', 580, 380, true );
}
add_action( 'after_setup_theme', 'yourtheme_child_theme_setup', 11 );

In this code above, we’ve set the new image size to 580px wide X 380px tall. The third attribute, which is currently set to true, will automatically crop the image either from the sides or from the top and bottom depending on the size.

You also have the option to only crop your image’s width leaving the height to be unlimited ( Unlimited Height Mode),  or using “Soft Crop Mod” this method resizes the image proportionally without distorting it. So you might not get the dimensions that you wanted.

function yourtheme_child_theme_setup() {
    add_image_size( 'dima-grid-image', 580, 380, true ); // Hard Crop Mode
    add_image_size( 'dima-grid-image', 580, 380); // Soft Crop Mode
    add_image_size( 'dima-grid-image', 580, 9999); // Unlimited Height Mode
}
add_action( 'after_setup_theme', 'yourtheme_child_theme_setup', 11 );

Step 4: Regenerate Your Featured Images

Changing the featured image size or adding a new image size will only affect uploads from the time the code is changed. Any previous uploads will have been saved at the original size, so you’ll need to re-generate them.

You can download the Regenerate Thumbnails plugin, to regenerate all your featured image. See our article How to Regenerate Thumbnails

We recommend using WP-CLI instead of this plugin as it’s faster, see the documentation of its media regeneratecommand.

To regenerate thumbnails for one or more attachments use this command

wp media regenerate

The End.

Changing the size of Featured Image using child theme is a simple task that requires some code editing, because of that some users prefer using a plugin to handle this task.
Using Child theme help you to understand WordPress, and will make it easier to customize your themes to fit your needs.