How to Get Featured Image URL & Post Thumbnail in WordPress: Enhance Your Blog

Most bloggers and developers use featured images in WordPress. In many cases, these bloggers and developers need to obtain a direct URL of the featured image and post thumbnail. I often need to get the featured image URL for my ongoing projects.

So, if you are into WordPress development and you’re stuck between how to get the featured image URL and post thumbnail, here I’m sharing a foolproof guide on “How to Get Featured Image URL.” Using this tutorial, you can get a post thumbnail URL in WordPress.

As a beginner, you can use this tutorial to get the featured image URL, and you can output your featured image using this small snippet of code.

Note: You must know the basics of how WordPress themes work.

To get the featured image, paste this code inside the loop code in single.php, post.php, and template.php files.

<?php 
    $theguidex_img = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); 
?>

<div class="theguidex-featured-image"
    <?php if($theguidex_img) : ?>
        style="background-image: url(<?php echo $theguidex_img; ?>);"
    <?php endif; ?>
>
</div>

In WordPress development, this snippet of code can add support for the featured image URL of the original image size on the page, post, and custom post type.

If you want to style the output of the original featured image URL, you can paste this code into your style.css file. Moreover, you can design your style and CSS class for the featured image.

.theguidex-featured-image {
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
}

Not every WordPress theme supports the option to show a featured image in the post by default. For example, I’m using the Hueman theme on one of my websites, which doesn’t allow me to output the featured image in a post or choose the size in which I want to display them.

As you know, a featured image is an essential aspect of your blog post, as it’s probably the first thing audiences notice.

So, here I’m sharing how you can display the featured image in the post type field in WordPress.

First of all, you need to take a backup of the single.php & tmpl/single-tmpl.php file. (In the Hueman theme, single-tmpl.php is the main file which contains the code snippets) from your parent theme directory in WordPress. For example, I’m using a Genesis-based WordPress theme, so I could copy the single.php file from the /public_html/wp-content/themes/hueman/ folder.

After taking the backup of the single.php file, click on the edit button and search for in the file. Here, I’m editing the single-tmpl.php file because it consists of the snippets of the single.php file in the Hueman theme.

Now, paste the code snippets provided below above in the file, as I have done below, and save the file.

The code below will display the featured image in the single post at its original size. This is what single.php will look like.

<?php 
    if (has_post_thumbnail()) { 
        // check if the post has a Post Thumbnail assigned to it. 
        the_post_thumbnail('full'); 
    } 
?>

WordPress Theme Editor

You can even change the size of the featured thumbnail by changing the value of the_post_thumbnail parameter in the above code.

Here are some of the parameters you can use in sizing the thumbnail:

• the_post_thumbnail(); – This is a default thumbnail size to display the thumbnail of 150px x 150px.
• the_post_thumbnail(‘medium’); – This is a medium thumbnail size parameter to display the thumbnail of 300px x 300px.
• the_post_thumbnail(‘large’); – This is a large thumbnail size parameter to display the thumbnail of 640px x 640px.
• the_post_thumbnail(‘full’); – This is a full thumbnail size parameter to display the original thumbnail size.

This guide was immensely helpful in setting the featured image thumbnail in posts. This method can also be utilized to obtain the featured image thumbnail and display it on your WordPress theme.

Remember to compress your image size with these complimentary image optimization tools for an enhanced user experience.

We hope this article has assisted you in learning how to acquire a post thumbnail URL and how to set a featured thumbnail in WordPress. Please leave any feedback or questions in the comments below, or you can reach me at [email protected].