Add custom thumbnail sizes to your WordPress theme

To add custom thumbnail sizes to your theme, add this to your theme’s functions.php:

/*  Image thumbnail sizes
/* ------------------------------------ */
function alx_setup()
{
	add_image_size( 'thumb-small', 200, 200, true ); // Hard crop to exact dimensions (crops sides or top and bottom)
	add_image_size( 'thumb-medium', 520, 9999 ); // Crop to 520px width, unlimited height
	add_image_size( 'thumb-large', 720, 340 ); // Soft proprtional crop to max 720px width, max 340px height
}
add_action( 'after_setup_theme', 'alx_setup' );

To display a featured image with your new size (in this case “thumb-small”) in a post, just add:

<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thumb-small' ); } ?>

If your theme does not support featured images, you need to add this to your functions.php as well, inside of your setup function.

// Enable featured image
add_theme_support( 'post-thumbnails' );

If you add new thumbnail sizes to a site which already has media uploaded, you’ll need to regenerate thumbnails once for the new sizes to show up.

Function reference: add_image_size

Written by:Alexander Agnarson

12 Responses

  1. Adam says:

    Nice sharing, It worked for me, but still I need a solution to compress images in order to increase site speed 🙂

  2. Usama Khan says:

    I am having the same issue while testing the site speed with pingdom it says site is showing fixed scale photos? How to fix it.
    My website is https://crack2.com

  3. Smith Jan says:

    Settings -> Media -> Image Sizes

    and to display a featured image ( e.g “thumbnail” “meduim” “large”) in a post, we could just add:

  4. J.Smith says:

    I was looking for a solution for the size of custom thumbnails in WordPress. Thanks for the useful tutorial.

  5. softfiler says:

    It is working but the problem is that when we test it on pingdom or gtmetrix, it says that site is serving scaled images. How to fix that ?

  6. Lightend says:

    Its all well and good, but I was wondering, is it possible if we can change the thumbnail sizes in WordPress under

    Settings -> Media -> Image Sizes

    and to display a featured image ( e.g “thumbnail” “meduim” “large”) in a post, we could just add:

    OR

  7. biswajit says:

    very usefull code.thanks

  8. James B says:

    Worked great for me, thx.

  9. Mable says:

    it is not work

  10. Stacie DaPonte says:

    Hey there,

    I’ve followed these instructions and still haven’t been able to get the results I want.

    I’ve added this to my functions.php file:
    /* ———————————— */
    /* Image thumbnail sizes
    /* ———————————— */
    add_theme_support( ‘post-thumbnails’ );
    function alx_setup()
    {
    add_image_size( ‘thumb-set’, 434, 434, true ); // Hard crop to exact dimensions (crops sides or top and bottom)
    }
    add_action( ‘after_setup_theme’, ‘alx_setup’ );

    And this is in my template file to display the thumbnail:

    It is not cropping the image, but setting the width to 434px and scaling the height accordingly. I would like it to cut off and crop a square selection of my image.

    Thanks in advance for your help!

    Cheers,
    Stacie

Leave a Reply to J.Smith Cancel reply

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