How to Get the Featured Image URL in WordPress using a PHP Snippet (1)

How to Get the Featured Image URL in WordPress using a PHP Snippet

by

Featured images are one of the most useful parts of WordPress.

They allow you to set a representative image for your posts and pages that’s used in multiple places like post previews, OpenGraph tags, Twitter cards, and more.

But sometimes you need to access the URL of the featured image in your theme code.

In this article, I’ll explain how to easily get the featured image URL in WordPress using a simple PHP snippet.

What is a Featured Image in WordPress?

The featured image, also called the post thumbnail, is an image you set in the WordPress editor to represent that specific post or page. It’s displayed in key places across your site:

  • On archive pages like the blog index, categories, author pages, etc. It’s used in the post preview thumbnail.
  • In the post content if inserted with a function like the_post_thumbnail().
  • In social media sharing cards for Facebook, Twitter, Pinterest etc. to display an image alongside the post title/description.
  • As the default image if your post is shared as a link on social media or messaging apps.

The featured image gives each of your posts a visual representation and improves the overall look and feel of your site.

It makes for a much better social sharing experience too.

Why Would You Need the Featured Image URL?

There are a few common reasons you might want to get the featured image URL in your WordPress theme code:

  • Display it in the header section of your post templates above the title/content. This gives your post a nice visual banner.
  • Include it in custom social sharing buttons for Twitter, Facebook, etc. so you can control the exact image shown.
  • Output it in your own OpenGraph or other metadata tags for greater control over how links are shared.
  • Display it on custom post overviews, related posts sections, galleries, and more.
  • Use it in Ajax responses to update other parts of the page.
  • Save it along with the post data in flat files, your database, external APIs, etc.

So while WordPress handles outputting the featured image in the standard ways, you’ll often want to customize how and where it appears in your theme.

Getting the direct URL gives you full control.

Getting the Featured Image URL with a PHP Snippet

Now that you understand what the featured image is and why the URL is useful, let’s look at how to actually get it in WordPress.

The key point is that featured images are stored as post meta associated with that particular post. More specifically, featured images are stored in the _thumbnail_id meta field for a post.

So to get the URL, we just need to retrieve the value of _thumbnail_id and pass it to a function like wp_get_attachment_image_src() or get_the_post_thumbnail_url().

Here’s a simple PHP code snippet that will return the featured image URL for the current post in the loop:👇

$featured_img_url = 
get_the_post_thumbnail_url(get_the_ID(),'full');

Let’s break down what this code is doing:

  • get_the_ID() retrieves the current post ID within the loop.
  • We pass this ID to get_the_post_thumbnail_url() to get the featured image URL.
  • The second parameter full specifies we want the full-size image URL. You can also use thumbnail, medium, large etc.

And that’s it! With this simple snippet anywhere in your theme templates, you’ll have the featured image URL on hand to display or utilize however needed.

Displaying the Featured Image URL in Your Theme

Now that we have the URL, we can display the featured image anywhere in our WordPress theme code.

Here’s a quick example outputting it inside the WordPress post loop using the HTML <img> tag:👇

if (has_post_thumbnail()) {

  $featured_img_url =
get_the_post_thumbnail_url(get_the_ID(),'full');

  echo '<img src="' . esc_url($featured_img_url) . '" alt="' . 
esc_attr(get_the_title()) . '">';

}

We check that the post has a featured image assigned with has_post_thumbnail(). Then output the <img> tag with the URL and the caption.

You can also output it directly in a meta tag like OpenGraph or Twitter Cards:👇

// Output Featured Image for OpenGraph
echo '<meta property="og:image" content="' . 
esc_url($featured_img_url) . '">';

This gives you complete control over the image used for social sharing.

When displaying the featured image on the front-end, be sure to properly size and optimize the image for responsiveness.

Use native WordPress functions like the_post_thumbnail() whenever possible, which handles these best practices for you.

Caching the Featured Image URL

One important thing to keep in mind is that calling the get_the_post_thumbnail_url() function repeatedly can hurt performance. It has to run a database query each time to retrieve the image ID.

So it’s smart to cache the URL value whenever possible. Here are two easy ways to cache it:👇

1. Store in a variable

// Get the image URL outside the loop

$featured_image = 
get_the_post_thumbnail_url(get_the_ID(),'full');
// Use the cached variable throughout template

echo '<img src="' . esc_url($featured_image) . '">';

2. Use object caching

// Cache in a global variable with set_transient 

if (false === ($featured_image_url =
get_transient('featured_image'))) {

  $featured_image_url = 
get_the_post_thumbnail_url(get_the_ID(),'full');

  set_transient('featured_image', $featured_image_url,
 DAY_IN_SECONDS);

}
// Use the cached global variable

echo '<img src="' . esc_url($featured_image_url) . '">';

By caching the value, you avoid unnecessary database queries and your code will perform better.

Troubleshooting Tips

Sometimes you might run into issues getting the featured image URL:

  • Make sure your theme supports featured images – Call add_theme_support(‘post-thumbnails’) in functions.php.
  • Check the image size – Try different sizes like ‘full’, ‘large’, etc. if the full URL isn’t needed.
  • Confirm a featured image is actually set – Use has_post_thumbnail() to check if one is set.
  • Enable debugging – Debugging can uncover issues with image generation.
  • Check for plugins conflicts – Disable other plugins to see if there’s a conflict.
  • Use a different function – Try wp_get_attachment_image_src() as an alternative.

With a bit of troubleshooting, you should be able to resolve any issues getting the proper featured image URL.

Customizing the Snippet Further

Let’s explore a few different ways you can customize this snippet further:

Get different image sizes

To get a smaller or different sized image, change the second parameter passed to the function:👇

// Get the medium size image
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(), 'medium');
// Get a custom image size
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(), 'custom-size');

Use outside The Loop

You can pass any post ID to get the image for specific posts:

// Get image for post 15
$featured_img_url = get_the_post_thumbnail_url(15, 'full');

Additional parameters

Add a third parameter of false to return an array with src, width, height, etc:

// Get image array
$image_data = get_the_post_thumbnail_url(get_the_ID(), 'full', false);
// Access just the URL
$featured_img_url = $image_data['url'];

There are many possibilities for customizing this further in your own themes!

Alternate Methods to Get the Featured Image URL

While get_the_post_thumbnail_url() is the main function for getting the featured image URL, there are a couple alternate approaches:

wp_get_attachment_image_src()

This will return an array but you can grab the URL from it:

$image_data =
wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
$featured_img_url = $image_data[0];

ACF Image Field

If you’re using Advanced Custom Fields, you can return the image array:

$image = get_field('featured_image');
$featured_img_url = $image['url'];

So those are a couple other options for getting the featured image URL in different ways.

Conclusion

That covers the key steps to get the featured image URL for any post in WordPress! Here’s a quick recap:

  • Featured images are important for the visual representation of your posts.
  • You may want to output the URL for greater control over where it’s displayed.
  • Use get_the_post_thumbnail_url() and pass the post ID to return the image URL.
  • Cache the value to avoid repeats database queries.
  • Display the image in your theme templates or meta tags.

Having access to the featured image URL unlocks lots of creativity and customization possibilities for your WordPress site.

Use it to take control over the visual presentation of your content!

FAQs

Q: What size featured image should I use in my theme?

This depends on where you are displaying the image, but in most cases using the ‘large’ size featured image provides a good balance of quality and performance. Avoid using the full size image URL unless you specifically need the huge original image.

Q: Can I get featured images for custom post types?

Yes, the same get_the_post_thumbnail_url() function will work for any custom post types. Just pass the custom post ID.

Q: How can I get the featured image alt text?

Use the get_post_meta() function to retrieve the _wp_attachment_image_alt meta field value for the image attachment.

Q: What if my theme doesn’t support featured images?

You need to call add_theme_support(‘post-thumbnails’) in your theme’s functions.php file to enable featured image support.

Q: How do I see all image sizes registered in WordPress?

Use the get_intermediate_image_sizes() function. It returns an array of all the registered image sizes.

Q: Should I create multiple featured image sizes?

In most cases it’s best to just use the default sizes. But for some specific needs like landing pages you may want a custom large hero image size.

Leave a Comment