Get Featured Image URL

Post thumbnails are pretty useful and pretty easy to use in WordPress. Simply add:

add_theme_support('post-thumbnails'); 

To a theme's functions.php file and you'll get a Featured Image module on the admin screen for posts which allows you to select one.

It is also very easy to output that image as an HTML <img>:

the_post_thumbnail();

But what if you just need the URL? Say, you're going to use it as a background-image on an element rather than a content image. Unfortunately there is no super easy/obvious function for that.

Within the loop, you'll have to do:

$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
$thumb_url = $thumb_url_array[0];

Then $thumb_url will be that URL.

Comments

  1. User Avatar
    Aaron
    Permalink to comment#

    You can also use this code, especially when storing posts in an array:

    $image = wp_get_attachment_url( get_post_thumbnail_id($post->ID));

    • User Avatar
      Gerson
      Permalink to comment#

      Saved my butt. Thanks man.

      I am new both WordPress and php so I purchased a theme for my site to simplify things. I have been making changes to the site and was struggling for hours on getting the post attachment url. My problem was that I was looking through the theme functions and files. Oh well. you live and you learn. Thanks again.

    • User Avatar
      Ben Dunkle
      Permalink to comment#

      Aaron, how would you pass the thumbnail size in your code? I tried it, and it shows the url of the original image.

    • User Avatar
      Jose Vega
      Permalink to comment#

      Hi Ben, in that case you can use this:

      wp_get_attachment_image_src( get_post_thumbnail_id($post-&gt;ID), $size, $icon );

      You can set a registered size on the second parameter…

    • User Avatar
      Chisomo K
      Permalink to comment#

      Thanks, so much more elegant, everything else I was coming across was so convoluted.

    • User Avatar
      Mohosin
      Permalink to comment#

      Fantastic.Very easy.Thank you.

  2. User Avatar
    Native Imaging

    Hey Chris, i’m a little stumped on a task with trying to get the featured image source of the next and previous post. i know how to get the featured image of the next and previous posts, im using them for pretty Next/Prev nav buttons, but im also using featured video plus plugin in my theme, so it auto replaces the image with the featured video. excellent plugin, and ive got just the video thumbnail to work on my blog and cat pages by grabbing the img src rather than post_thumbnail, but still stumped on how to do this for Next/Prev navigation on single posts. Any tips you can point out for me?

    Thanx! :)

  3. User Avatar
    Igor
    Permalink to comment#

    Hi. I am trying to achieve this in one go. But I am not very familiar with PHP.

    I would like to print the complete style with PHP and fetch featured image. Tried something like this inside a simple WP plugin I’v made:

    Print '<style> #slider_dyn_img_layer { background-image: url("' 
           , wp_get_attachment_image_src( get_post_thumbnail_id($ID) ) , 
           '") !important ; } </style>';
    
    

    But it didn’t work and when debugging without the WP commands I’v also noticed that the script printed its result at the first line in the document. Preferably I would like the output to show up inside .

    Any help would be very appreciated!

  4. User Avatar
    Edward Beckett
    Permalink to comment#

    One Liner ~ <?= wp_get_attachment_image_src( get_post_thumbnail_id(), 'full', false )[0] ?>

  5. User Avatar
    Jae
    Permalink to comment#

    Exactly what I was looking for! Your posts constantly get me out of jams. Big Thanks!!

  6. User Avatar
    Sam
    Permalink to comment#

    Hi all,

    I need some help please, I’m trying to add a featured image as a background in post that is in a page (confusing I know).

    All the tutorials I can find only allows me to add it when the post is a “page” but I’ve got some code already that pulls through an specific post into a page and want the background in the div to be the featured image but can’t find anywhere that will show me how!

    Can anyone help

    • User Avatar
      Lohith
      Permalink to comment#

      Hi Sam,

      you can use this method.
      to get featured image as background image,
      insert this code within the loop
      and create a div ex. banner

      ID); //get the id of the featured image
      $featuredImage = wp_get_attachment_image_src($imgID, 'full' );//get the url of the featured image (returns an array)
      $imgURL = $featuredImage[0]; //get the url of the image out of the array
      ?>

      .banner {
      background:url('') no-repeat top center #DA6F4F;
      min-height: 100px;
      }

    • User Avatar
      Lohith
      Permalink to comment#

      getting error in uploading the code properly

      <?php
      if (has_post_thumbnail()) { //if a thumbnail has been set
      $imgID = get_post_thumbnail_id($post->ID); //get the id of the featured image

      follow with the continued reply…

  7. User Avatar
    Lohith
    Permalink to comment#

    Hi Sam,

    You can use this method

    ID); //get the id of the featured image
    
    $featuredImage = wp_get_attachment_image_src($imgID, 'full' );//get the url of the featured image (returns an array)
    
    $imgURL = $featuredImage[0]; //get the url of the image out of the array
    
    ?>
    
    
    .banner {background:url('') no-repeat top center #DA6F4F;
    min-height: 100px;
    }
    
    
    
    
    
    
    
    
  8. User Avatar
    Gaziantepli
    Permalink to comment#

    thank you for your code it works

    http://www.gazianteptasarim.com

  9. User Avatar
    Mobarak Ali
    the_post_thumbnail_url();
    

    Has all the solution! :)

    • User Avatar
      Jesús
      Permalink to comment#

      Hi! But, where should I put that code? I’m using Post Type Builder plugin which allows me to add custom posts and edit archive and template layout, so, I want to set the feature image as a Heading Background and the Title of the post right in the center of that image… How can I do that possible?? :(

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag