Displays the post thumbnail.
Description
When a theme adds ‘post-thumbnail’ support, a special ‘post-thumbnail’ image size is registered, which differs from the ‘thumbnail’ image size managed via the Settings > Media screen.
When using the_post_thumbnail() or related functions, the ‘post-thumbnail’ image size is used by default, though a different size can be specified instead as needed.
See also
Parameters
$size
string|int[]optional- Image size. Accepts any registered image size name, or an array of width and height values in pixels (in that order). Default
'post-thumbnail'
.Default:
'post-thumbnail'
$attr
string|arrayoptional- Query string or array of attributes.
Default:
''
Source
function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ) {
echo get_the_post_thumbnail( null, $size, $attr );
}
Changelog
Version | Description |
---|---|
2.9.0 | Introduced. |
Post thumbnail sizes:
Hard cropped sizes have fixed height and width
An example of the attr argument using an array can be seen below:
Using the array’s keys and values to populate different attributes. You can use this to add classes to the post thumbnail.
the_post_thumbnail( 'post-thumbnail', array( 'class' => 'orbit-image', 'loading' => false ) );
This will disable Lazy Loading where this post thumbnail is displayed Introduce in WordPress 5.5.Post Thumbnail Linking to the Post Permalink
Note: Don’t use these two examples together in the same Theme.
Example 1. To link Post Thumbnails to the Post Permalink in a specific loop, use the following within your Theme’s template files:
Example 2. To link all Post Thumbnails on your website to the Post Permalink, put this in the current Theme’s functions.php file:
Thumbnail Sizes
The default image sizes of WordPress are “thumbnail”, “medium”, “large” and “full” (the size of the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under Settings > Media. This is how you can use these default sizes with
the_post_thumbnail()
:Register new image sizes for Post Thumbnails with: add_image_size().
To set the default size for Post Thumbnails see: set_post_thumbnail_size().
If you’d like to remove the hardcoding of the ‘height’ and ‘width’ attributes on thumbnail images, which will often effect adaptive/responsive/fluid CSS stylesheets, you can add this snippet to your
functions.php
,Styling Post Thumbnails
Post Thumbnails are given a class “wp-post-image” and also get a class depending on the size of the thumbnail being displayed. You can style the output with these CSS selectors:
You can also give Post Thumbnails their own class.
Display the Post Thumbnail with a class “alignleft”:
If you are worried about the sizes attributes are too big for your usage, you can do something like this :
The
'sizes'
array consists of media queries, so the first parameter is your media query, and the second if what size-width image, should be rendered at that viewportsize. the last parameter is the default size if none of the given media-queries applies.Useful if you use a column-based grid, where you don’t want the image to be rendered 100vw on smaller viewports.
$attr
:Disable lazy-loading on post thumbnail
If you want to prevent WordPress from adding lazy-loading (default behavior since 5.5), use this line where your theme calls the thumbnail:
You can also explicitly set eager loading for thumbnails (if you don’t want to leave it to the browser to decide):-
Default Usage
Note: To return the Post Thumbnail for use in your PHP code instead of displaying it, use: get_the_post_thumbnail().
See Also:
get_the_post_thumbnail()
Post Thumbnail Linking to Large Image Size
This example links to the “large” Post Thumbnail image size and must be used within The Loop.