https://idea-hack.com/code/en/blog/107223/

How to get thumbnail URL, when using WordPress

This article details how to output thumbnail images of WordPress articles.

There are two functions to get thumbnails in WordPress.

.wp-block-ug-list-block-6-d2e1f9eb-b55c-4a05-8f32-ccc5b2abf5e7 ul, .wp-block-ug-list-block-6-d2e1f9eb-b55c-4a05-8f32-ccc5b2abf5e7 ol { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-list-block-6-d2e1f9eb-b55c-4a05-8f32-ccc5b2abf5e7 li { border-left: 35px solid #74abdc !important; background-color: #f5f5f5 !important; color: #545454 !important; font-size: 16px !important; padding: 10px 20px !important; margin-bottom: 14px !important; }.wp-block-ug-list-block-6-d2e1f9eb-b55c-4a05-8f32-ccc5b2abf5e7 li::before { color: #ffffff; }
  • the_post_thumbnail_url()
  • get_the_post_thumbnail_url()

Since the features are different, let’s check.

Function to the output thumbnail image

.wp-block-ug-code-block-1-93b7d860-63fe-40d1-bf7c-31770e41ca3b { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-93b7d860-63fe-40d1-bf7c-31770e41ca3b pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-93b7d860-63fe-40d1-bf7c-31770e41ca3b pre code { font-size: 14px !important; }php
// Output URL string of thumbnail image
the_post_thumbnail_url ('medium');

The size can be selected from ‘thumbnail’, ‘medium’, ‘large’, ‘full’, and user-defined ones.

It is expected to be used in the main loop. Therefore, it can not be used to output thumbnails of specific article IDs outside the loop.

Function to get URL of the thumbnail image

This is for the case where you only get the URL but do not output it. Here you can pass the post ID so that it can be used generically.

Of course, you can use it outside the loop.

.wp-block-ug-code-block-1-cab51e46-519b-4f91-8335-40571356089e { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-cab51e46-519b-4f91-8335-40571356089e pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-cab51e46-519b-4f91-8335-40571356089e pre code { font-size: 14px !important; }php
get_the_post_thumbnail_url( get_the_ID(), 'medium' );

Check source code

The source code for these functions is in /wp-includes/post-thumbnail-template.php:

.wp-block-ug-code-block-1-c471c34d-d69e-49de-b252-44a72e4e64aa { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-c471c34d-d69e-49de-b252-44a72e4e64aa pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-c471c34d-d69e-49de-b252-44a72e4e64aa pre code { font-size: 14px !important; }php
/**
 * Return the post thumbnail URL.
 *
 * @since 4.4.0
 *
 * @param int|WP_Post  $post Optional. Post ID or WP_Post object.  Default is global `$post`.
 * @param string|array $size Optional. Registered image size to retrieve the source for or a flat
 *                           array of height and width dimensions. Default 'post-thumbnail'.
 * @return string|false Post thumbnail URL or false if no URL is available.
 */
function get_the_post_thumbnail_url( $post = null, $size = 'post-thumbnail' ) {
    $post_thumbnail_id = get_post_thumbnail_id( $post );
    if ( ! $post_thumbnail_id ) {
        return false;
    }
    return wp_get_attachment_image_url( $post_thumbnail_id, $size );
}

/**
 * Display the post thumbnail URL.
 *
 * @since 4.4.0
 *
 * @param string|array $size Optional. Image size to use. Accepts any valid image size,
 *                           or an array of width and height values in pixels (in that order).
 *                           Default 'post-thumbnail'.
 */
function the_post_thumbnail_url( $size = 'post-thumbnail' ) {
    $url = get_the_post_thumbnail_url( null, $size );
    if ( $url ) {
        echo esc_url( $url );
    }
}