How to get the WordPress post thumbnail (featured image) URL?

How to Get the WordPress Post Thumbnail (Featured Image) URL?

Have you ever stumbled upon the challenge of retrieving the full URL of a WordPress post thumbnail? Fear not! 🎉 In this guide, we'll explore the commonly encountered problem of obtaining the featured image URL and provide you with easy-to-implement solutions.

The Problem

Let's delve into the situation at hand. You have a WordPress loop, and within it, you want to display the featured image as a thumbnail. You can achieve this by using the following code snippet:

<a href="#" rel="prettyPhoto">
    <?php the_post_thumbnail('thumbnail'); ?>
</a>

However, your aim is to obtain the full featured image URL when the anchor tag is clicked. 📸💥

The Solution

Here's how you can fix this issue and acquire the coveted URL in no time:

1. First, we need to modify the anchor tag by adding an id attribute. Let's call it full-image-link:

<a href="#" id="full-image-link" rel="prettyPhoto">

1. Next, we need to incorporate a JavaScript function that retrieves the desired URL on click. We'll do this by adding the event listener and fetching the URL using the getAttribute() method:

document.getElementById('full-image-link').addEventListener('click', function() {
    var imageUrl = document.querySelector('.wp-post-image').getAttribute('src');
    window.location.href = imageUrl;
});

1. Incorporate the JavaScript snippet into your WordPress theme. You can include it in your theme's JavaScript file or directly in your WordPress editor.

2. 💪 Voila! You now have a fully functional WordPress featured image URL that opens when the anchor tag is clicked.

Example

Let's demonstrate the solution with an example to ensure clarity.

Assume that you have a blog post with the following featured image and anchor tag:

<a href="#" id="full-image-link" rel="prettyPhoto">
    <img src="https://www.example.com/images/featured-image.jpg" alt="Featured Image">
</a>

Using the solution outlined above, when a visitor clicks on the anchor tag, they will be directed to the full URL of the featured image, which is:

https://www.example.com/images/featured-image.jpg

Conclusion

Troublesome problems often have simple solutions. In this case, by adding a few lines of JavaScript code, you can easily retrieve the WordPress post thumbnail URL. 🙌🖼️

Now, it's your turn! Give this solution a try and let us know how it works for you. If you have any questions or alternative solutions, feel free to drop a comment below. As always, happy coding! 👨‍💻🔥