Get Featured Image URL & Post Thumbnail in WordPress

Get Featured Image URL & Post Thumbnail in WordPress

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

get featured image url in wordpress, show featured image in wordpress, wordpress get featured image

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 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 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 Hueman theme on one of my website, which wouldn’t allow me to output the featured image in a post or in what size I want to display them.

Read More:   WordPress Plugins to Get More Traffic on Old Posts

As you know, a featured image is the most important thing of your blog post as it’s probably 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 the snippets of the single.php file in the hueman theme.

get featured image url in wordpress, show featured image in wordpress, wordpress get featured image
WordPress – Theme Editor

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' ); 
} 
?>

get featured image url in wordpress, show featured image in wordpress, wordpress get featured image

WordPress Theme Editor

You can even change the size of the featured thumbnail by changing the value of a 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.
Read More:   Best Wordpress Theme Clubs to Save Money on WP Themes

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].

get featured image by post id, get featured image url, get featured image url wordpress, wordpress get featured image, wordpress get featured image url Get Featured Image URL & Post Thumbnail in WordPress
Follow me

Sunny Kumar

Sunny Kumar is a professional Blogger and Affiliate Marketer from New Delhi. He has been blogging for 2 years and get featured on various blogs and websites.
He uses his blog TheGuideX to provide quality content & tutorials to guide newbie bloggers improve their blog. His blog mainly focuses on Blogging Tips, Affiliate Marketing, Social Media Marketing, Search Engine Optimization, Traffic Building and much more.
get featured image by post id, get featured image url, get featured image url wordpress, wordpress get featured image, wordpress get featured image url Get Featured Image URL & Post Thumbnail in WordPress
Follow me

3 thoughts on “Get Featured Image URL & Post Thumbnail in WordPress”

Leave a Comment