Add Custom Image Sizes to WordPress Custom Themes

Adding custom image sizes to your WordPress theme is a common task that has multiple steps. If you are building custom themes, it’s great to have a go-to system for this. These are the steps i use to implement custom image sizes in my WordPress themes for myself and for my clients. These steps work for me in WordPress version 6.x sites.

Step 1: Add sizes to functions.php

Custom Image sizes are available to use in code templates but will not appear on the media settings page unless coded to do so.

// my custom image sizes
add_action( 'after_setup_theme', ‘my_custom_theme_setup' );
function my_custom_theme_setup() {
  add_image_size( 'hero-slider', 990, 400, true ); //regenerate thumbnails to apply
  add_image_size( ‘card-icon’, 200, 200, true );
}

It is important to use ’after_setup_theme’ or the actions won’t be added!

More about this function here

Step 2: Regenerate media thumbnails

Regenerate thumbnails using wp cli:

wp media regenerate

This will regenerate all site media unless you specify a particular size.
You may also use a plugin to do this task if you do not have access to command line.

More about wp cli here

Step 3: Specify your custom size in template code

Into ACF fields:

In efforts to make things simpler for my clients, I’ve found using the same image for multiple uses helps save effort. So they don’t have to remember which special crop goes to which usage, I can set that up in code.
In this example, I am using the “Image array” option in ACF Pro. The size specifier in brackets replaces [‘url’] in the source attribute. Use[‘url’] if you want the full image without any cropping settings.

<img src="<?php echo $slider_image['sizes']['hero-slider']; ?>" alt="<?php echo esc_attr( $slider_image['alt'] ); ?>" class="sizes"  />

Into WordPress featured image or “post thumbnail”:

get_the_post_thumbnail( $post->ID, 'icon' );

More about ACF image fields here
More about post thumbnail images here

Or, have us do it!

If you find you’d rather not edit or create a custom theme yourself, I’d love to help. Just fill out the contact form or schedule a call to get started.