How to display the featured image in WordPress using the_post_thumbnail

The WordPress the_post_thumbnail function is used to display the featured image of a post or page. It can be useful for displaying a visually appealing image alongside the post or page content, which can help attract and engage readers. Additionally, it can improve the overall aesthetic of the website and make the content more visually appealing.

By using the the_post_thumbnail function, website administrators can easily and dynamically display the featured image without having to manually insert the image into each post or page. This can save time and effort, especially for websites with a large number of posts or pages.

Parameters Accepted by the the_post_thumbnail Function

  • $size (string/int[]), optional. Default value: ‘post-thumbnail’. Description: Image size. Accepts any registered image size name, or an array of width and height values in pixels (in that order). Default ‘post-thumbnail’.
  • $attr (string/array), optional. Default value: ”. Description: Query string or array of attributes.

The the_post_thumbnail function accepts two parameters: $size and $attr. The $size parameter specifies the size of the image to be displayed, and it can be either a string representing a registered image size name, or an array of width and height values in pixels. The $attr parameter, on the other hand, allows you to specify additional attributes for the image, and it can be either a query string or an array of attributes.

Value Returned by the the_post_thumbnail Function

The the_post_thumbnail function does not return a value.

Examples

How to display the post thumbnail with default size

<?php
if ( has_post_thumbnail() ) {
 the_post_thumbnail();
}
?>

This code snippet checks if the current post has a thumbnail attached to it using the has_post_thumbnail function. If a thumbnail exists, it then displays the thumbnail using the the_post_thumbnail function with the default size.

How to display the post thumbnail with custom size

<?php
if ( has_post_thumbnail() ) {
 the_post_thumbnail( 'custom-size' );
}
?>

This code snippet checks if the current post has a thumbnail attached to it using the has_post_thumbnail function. If a thumbnail exists, it then displays the thumbnail using the the_post_thumbnail function with a custom size named ‘custom-size’.

How to display the post thumbnail with custom attributes

<?php
if ( has_post_thumbnail() ) {
 the_post_thumbnail( 'thumbnail', array( 'class' => 'post-thumbnail', 'alt' => 'Post Thumbnail' ) );
}
?>

This code snippet checks if the current post has a thumbnail attached to it using the has_post_thumbnail function. If a thumbnail exists, it then displays the thumbnail using the the_post_thumbnail function with the default ‘thumbnail’ size and custom attributes such as a CSS class and alt text.

Conclusion

In conclusion, the the_post_thumbnail function is an effective feature for WordPress developers and designers to easily display featured images on their website. With its simple syntax and customizable parameters, it allows for seamless integration of images into posts and pages. Whether you’re looking to enhance the visual appeal of your website or improve user engagement, the_post_thumbnail function provides a convenient solution for displaying images in a professional and visually appealing manner.

Related WordPress Functions

in WordPress Functions