2

How to Get the Featured Image in WordPress

 1 year ago
source link: https://webdesign.tutsplus.com/tutorials/how-to-get-the-featured-image-in-wordpress--cms-93242
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

In this quick tip, I will show you how to get the featured image for a post or page in WordPress.

What is a Featured Image?

A featured image in WordPress is the image that we use to represent a particular blog post or page. Another name for featured images is post thumbnails.

The featured image section on the WordPress post editing page is not available by default. The support is added to a theme by adding the following line to the functions.php file.

add_theme_support( 'post-thumbnails' );

If your theme supports featured images, you would see a Featured image section on the edit screen of your posts as show below.

Featured Image Section on Edit Page

Featured Image Section on Edit Page

Featured Image Section on Edit Page

How to Get the Featured Image in WordPress?

Lets say a theme has added support for featured image functionality. In this case, you can use the get_the_post_thumbnail() function to retrieve the featured image of specified post. This function will return the post thumbnail image tag. It accepts three optional parameters:

  • the post ID for which you want to get the image
  • the image size
  • attributes

If you don't supply any arguments, the function will return an image tag for the featured image of the current post by default.

<?php
while ( have_posts() ) {
the_post();
echo "<h1>".get_the_title()."</h1>";
echo get_the_post_thumbnail();
the_content();
}
?>

Another function that you can use is the the_post_thumbnail() function which removes the need of using echo to output the post thumbnail.

How to Get the Featured Image ID in WordPress?

There is another useful function called get_post_thumbnail_id() which will return the post thumbnail ID for the current post. You can also pass a post ID as parameter to the function to get the featured image of a particular post.

What if the current post does not have a featured image? In that case, this function will return the value 0.

In case you use this function to get the featured image ID of a particular post and it doesn't exist, you will get back false as the return value. This makes sure that a strict comparison will reveal if a particular post doesn't have a featured image or if the post itself doesn't exist.

<?php
while ( have_posts() ) {
// Some other code
echo "<p>Thumbnail ID: ".get_post_thumbnail_id()."</p>";
}
?>

Try echoing the thumbnail ID within the loop and you will see that it returns 0 for posts where no thumbnail has been provided. Also, passing a non-existent post ID will return false as shown below.

<?php
// Outputs: bool(false)
var_dump(get_post_thumbnail_id(3468));
?>

There is no post with ID 3468 on my website so it returns false.

How to Check if a Post Contains a Featured Image?

You don't have to rely on the return value of the get_post_thumbnail_id() function in order to check if a post has set a featured image. You can do the same with another function called has_post_thumbnail(). This function accepts an optional post ID parameter and returns a boolean value.

It will return true if the post has an attached thumbnail and false otherwise.

<?php
while ( have_posts() ) {
the_post();
echo "<h1>".get_the_title()."</h1>";
if(has_post_thumbnail()) {
echo get_the_post_thumbnail();
} else {
// Show Placeholder Image
}
}
?>

You can use the value of this function to make layout related decisions when showing a list of posts on the frontend.

Advertisement

Final Thoughts

In this quick tip, I showed you three different functions that you can use to get the featured image of a post, the ID of the featured image for a post, or check if a featured image even exists.

There are many other post thumbnail related function that you should read about from the WordPress documentation.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK