In this post I will explain and give examples on how to make sure featured images are enabled in your theme and how to get WordPress post featured image in custom sizes. I will also show you how to get the image URL only to a custom image size so you can build your own img tag.

Prerequisite:

In order to use featured image an custom image sizes in WordPress your theme has to add theme support for post-thumbnails. Usually this is added by your parent theme so you don’t have to add it.

/*
* Enable support for Post Thumbnails on posts and pages.
*/
// Make sure the function doesn't exist
if ( !function_exists('my_after_theme_support') ){

        // Create the function
	function my_after_theme_support() {
        // Add post-thumbnails
        add_theme_support( 'post-thumbnails' );
    }
}

// Hook the function into WordPress
add_action( 'after_setup_theme', 'my_after_theme_support' );

Get the featured image the default way

Ok so now that that’s done or hopefully its already in your theme, now you can get these images within the WordPress Loop as-in inside your template files with just calling the get_the_post_thumbnail function(). If you want to use it somewhere outside the WordPress Loop you will need to pass the Post or the Post ID to it, as a first parameter.

the_post_thumbnail();           

// OR

echo get_the_post_thumbnail();

// This will print out something like: 
echo '<img width="750" height="579" src="http://lehelmatyus.test/wp-content/uploads/2018/12/drupal-accessibility.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Drupal input label accessibility" srcset="http://lehelmatyus.test/wp-content/uploads/2018/12/drupal-accessibility.jpg 750w, http://lehelmatyus.test/wp-content/uploads/2018/12/drupal-accessibility-300x232.jpg 300w, http://lehelmatyus.test/wp-content/uploads/2018/12/[email protected] 600w, http://lehelmatyus.test/wp-content/uploads/2018/12/drupal-accessibility-400x309.jpg 400w" sizes="(max-width: 750px) 100vw, 750px" />'

As you can see the advantage of just using this function is that it will print out the image as an <img> tag that holds all srcset attributes for media queries meaning if will load optimal image sizes for different devices, so you are not loading huge images for mobile devices.

However many times you need exact sizes so here is where we begin with How to get WordPress post featured image in custom size.

Get WordPress post featured image in custom size

Its basically 2 steps

  • Resister the image sizes in functions.php
  • Get the image using the image size you registered
    • Alternatively you can get the URL only at the image size you want and build your own output

Time needed: 10 minutes

How to get WordPress post featured image in custom size.

  1. Register the image sizes you want in functions.php

    You need to call add_image_size function. But you need to do this in after_setup_theme hook, the same one we looked at earlier. You need to pass the name, sizes and crop method to this function. You can do this in your themes function.php file. Here is an example.

    /*
* Add Image sizes
*/
if ( !function_exists('lhl_add_image_sizes') ){

	function lhl_add_image_sizes() {
        
        // Add your own image sizes
        add_image_size( 'lhl_image_sm', 350, 250, true );
        add_image_size( 'lhl_image_md', 700, 500, true );

        add_image_size(
            'lhl_image_md',  // name of image style                    
            1400,             // width in px         
            1000,             // height in px         
            false            // image crop 
                                    // false: image will be scaled
                                    // true : image will be cemter cropped to the specified dimensions
        );        

    }
}
add_action( 'after_setup_theme', 'lhl_add_image_sizes' );

  2. Output the image with the image size you just registered

    For this in your template file you can use the same get_the_post_thumbnail function I mentioned earlier. But now with passing as a parameter the Post ID AND the image size name you created earlier. Here is an example:

    /**
 * Print the featured image with an image size
 */

$post_id = get_the_ID();
echo get_the_post_thumbnail( $post_id, 'lhl_image_sm' );

// This will already add CSS classes like:
// 'attachment-lhl_image_sm'
// 'size-lhl_image_sm'
// 'wp-post-image'

/**
 * Add some html attributes to the img tag
 */

$post_id = get_the_ID();
echo get_the_post_thumbnail( $post_id, 'lhl_image_md', array( 'class' => 'alignleft' ) );

    This function again will output the nice srcsets however it will keep the aspect ratio of your desired image size.

  3. Alternatively you can get the attachment image URL with desired size for more flexibility

    For this You need to use a different function called get_post_thumbnail_id and pass the Attachment ID not the Post ID. Here is an example:

    $post_id = get_the_ID();

// Get the Image ID
$attachment_id = get_post_thumbnail_id($post_id);

if (!empty($attachment_id)){

    // Get the attachment image URL with desired size
    $attachment_array = wp_get_attachment_image_src($attachment_id, 'lhl_image_md', true);
    
    $attachment_url = $attachment_array[0];
    $attachment_width = $attachment_array[1];
    $attachment_height = $attachment_array[2];

    // echo $attachment_url;

    // Get the Alt text of the image
    $attachment_alt = get_post_meta($attachment_id , '_wp_attachment_image_alt', true);
    
}

// Print out your own image format
if ( !empty( $attachment_array ) ) {
    echo "<img class='my-class' src='{$attachment_array[0]}' alt='$attachment_alt' width='{$attachment_array[1]}' height='{$attachment_array[2]}' />";
}

    Please note this will not have the img srcset goodies and media queries to load different size images for mobile devices and such.

Please note:

  • Images that you uploaded prior to creating the image size will not have this image size until they are called upon.
  • If you happen to change the image size later on, older images that were already cropped for this image size will nut be refreshed unless you regenerate the image crops. You can do this using

If you want to handle image srcset for this second method where you get the URL only please take a look how to get image scrset using wp_get_attachment_image_srcset.

I hope this helped you, please leave a comment in the comment section.

Thanks, Lehel