WordPress ‘Add Image Size’ function

Let’s say we’re running a magazine site where the Featured Image will appear in at least 3 different sizes. Maybe one large image if the post is featured or is the newest, a medium sized image if its just a post among the rest and a regular size perhaps to appear elsewhere.

We take advantage of the add_image_size() function that instructs WordPress to make a copy of our Featured Image in our defined sizes.

To do this, we add the following to the functions.php:

// regular size
add_image_size( 'butter-regular', 400, 350, true );

// medium size
add_image_size( 'butter-medium', 650, 500, true );

// large thumbnails
add_image_size( 'butter-large', 960, '' );

If we’d like to use our new 'butter-medium' size as our featured image, we’d just adjust the early define butter_featured_image() function specifying it like so:

function butter_featured_image() {
  if ( is_singular() ) : ?>
    
    <figure class="featured-image">
      <?php the_post_thumbnail('butter-medium'); ?>
    </figure>
  
  <?php else : ?>
                               
    <a class="featured-image" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
      <?php the_post_thumbnail('butter-medium'); ?>
    </a>
  
  <?php endif;
}

While you’re at it, if you’d like to adjust the default size at which WordPress generates the thumbnails, you can do so by adding the follow line to the functions.php:

set_post_thumbnail_size( 150, 150 );