Get Featured Image URL & Post Thumbnail in WordPress

Most of the bloggers and developers use featured images in WordPress. In many cases, these bloggers and developers need to get 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 stuck between how to get featured image URL and post thumbnail. Here I’m sharing a full-proof 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 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 file.

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

In WordPress Development, this code of snippets can add support to featured image URL of the original image size in 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 in 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%;
}

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

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

So, here I’m sharing how you can display the featured image at 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 hueman theme, single-tmpl.php is the main file which consists the code snippets) from your parent theme directory in WordPress. For example, I’m using genesis based WordPress theme, So I could copy the single.php file from /public_html/wp-content/themes/hueman/ folder.

After taking the backup of the single.php file, click on the edit button and search for <?php the_content(); ?> 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 below snippets code above the <?php the_content(); ?> in the file like I have done below and saved the file.

Below code will show featured image in the single post as original image size. This is how 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 helped me a lot to set featured image thumbnail in the posts. You can also use this method to get featured image thumbnail and also to display the featured image on your WordPress theme.

Don’t forget to compress your image size with these free image optimizations tools for better user experience.

We hoped this article helped you learn how to get post thumbnail URL and how to set featured thumbnail in WordPress. For feedback and questions, please leave a comment below, or you can even reach me at [email protected].