phpWordpress

How to get WordPress post featured image URL

The featured image of a WordPress post not only enhances the visual appeal of your content but also plays a crucial role in the overall user experience. It is often used as the thumbnail for your post when shared on social media and in various parts of your website. In this blog post, we’ll explore how to get the URL of the featured image for a WordPress post. Whether you’re a developer or a WordPress enthusiast, this information can be valuable for customizing your website and optimizing your content.

Why Do You Need the Featured Image URL?

Before diving into the how-to, let’s understand why you might need to access the featured image URL:

  1. Custom Styling: You may want to customize the appearance of your featured images or use them in a unique way within your WordPress theme.
  2. Social Media Sharing: When sharing your posts on social media, having direct access to the featured image URL allows you to set the desired image preview.
  3. Third-Party Integration: Some plugins or third-party services may require the featured image URL to function correctly, such as email marketing tools or external publishing platforms.

WordPress, featured images play a crucial role in making your content visually appealing and engaging. They serve as the thumbnails that represent your posts in various contexts, including on your blog’s homepage, in search results, and on social media. If you’re a WordPress user looking to harness the power of featured images and retrieve their URLs for various purposes, you’ve come to the right place.

Using the built-in WordPress function get_the_post_thumbnail() to display the featured image of a post in a <img> tag.

if you want to grab a specific size for the featured image you can fill out the second argument with an image size.

<?php
get_the_post_thumbnail_url( int|WP_Post $post = null, string|int[] $size = 'post-thumbnail' );

if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
   
        /* grab the url for the full size featured image */
        $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); 
  
        /* link thumbnail to full size image for use with lightbox*/
        echo '<a href="'.esc_url($featured_img_url).'" rel="lightbox">'; 
            the_post_thumbnail('thumbnail');
        echo '</a>';
    endwhile; 
endif;

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;
    }
 
    $thumbnail_url = wp_get_attachment_image_url( $post_thumbnail_id, $size );
 
    /**
     * Filters the post thumbnail URL.
     *
     * @since 5.9.0
     *
     * @param string|false     $thumbnail_url Post thumbnail URL or false if the post does not exist.
     * @param int|WP_Post|null $post          Post ID or WP_Post object. Default is global `$post`.
     * @param string|int[]     $size          Registered image size to retrieve the source for or a flat array
     *                                        of height and width dimensions. Default 'post-thumbnail'.
     */
    return apply_filters( 'post_thumbnail_url', $thumbnail_url, $post, $size );
}

?>
<?php if (has_post_thumbnail( $post->ID ) ): ?>
  <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
  <div id="custom-bg" style="background-image: url('<?php echo $image[0]; ?>')">

  </div>
<?php endif; ?>

Related Articles

Leave a Reply

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

Back to top button