Creating Post Thumbnails in WordPress

Have you ever heard the word Featured Image or Post Thumbnail.? Nothing to worry about if the answer is no. We will going to discuss about this today. These two words referring to one and same function. First introduced this feature in WordPress 2.9 called Post Thumbnail and later it called as Featured Image. But the same function. Have you ever wanted to add an image for Posts, Pages or Custom Post Types. Most blog type WordPress sites using this feature. As well as the most of the web sites now using images. Therefore you need to have an image uploading feature. This is pretty much simple with WordPress. Lets see how we can enable and use this feature.

First of all you need to tell WordPress that your theme support this feature. For that open up your functions.php file and add this little code.

add_theme_support( 'post-thumbnails' );

This code enables the use of Featured Image. See the image below and you can see that Featured Image meta box has been added to the post. To see this navigate to post page. You’ll notice following in your post page.

So you can add images now by click on the Set featured image. It will showing up Media Uploader for setting up a featured image.

By selecting the featured image, next you want to click on Set featured image. This will showing the selected image in the metabox. You can remove or edit the image anytime. Once you set an image your metabox will look like following. The selected image is showing up in the metabox.

What we want to know next is showing these images in the Front End. Assume we have add an image to one of our Post. To display that in the Post add following code where you want to display the image.

<?php the_post_thumbnail(); ?>

This will show the image with default thumbnail settings.

There were default image sizes for WordPress such as thumbnail, medium, medium_large, large and full (actual image size you uploaded). Refer the following code for default image sizes definitions. All the definitions should define in your functions.php file.

the_post_thumbnail( ‘thumbnail’ ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( ‘medium’ ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( ‘large’ ); // Large resolution (default 640px x 640px max)
the_post_thumbnail( ‘full’ ); // Full resolution (original size uploaded)

If you need to get full URL for the Post Thumbnail. Just called,

<?php the_post_thumbnail( ‘full’ ); ?> // This will return the full image URL

If you’re not aware and if these sizes not useful for you, other than these you can define your own image sizes.

If you need your post thumbnail 50px by 50px without cropping the image as well without distorting it. Here is the solution. These all definitions should define in functions.php file.

set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode

As well as you can crop the image as you want. Here is an example for cropping.

set_post_thumbnail_size( 50, 50, array( ‘top’, ‘left’) ); // 50 pixels wide by 50 pixels tall, crop from the top left corner

In the array have pass the where to crop. This will crop the image starting from top left corner. If you need to crop the image from the center, just pass array( 'center', 'center' ) . This will crop the image from the center.

Not only these. You can define your own thumbnail name and define the sizes. Assume I need to create a thumbnail image for books category. Therefore I need an image 200px width and height should be auto . Lets see how to do this.

add_image_size( ‘books’, 200, 9999 ); //200 pixels wide (and unlimited height)

This will resize the book category image to 200px width and auto height.

You can call this image

<?php the_post_thumbnail( 'books' ); ?>

In a proper way you can call this image,

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

This will load the image where you define the code and it will be 200px wide and height is relative to the width.

Assume you’re wanting to add this Featured Images for books and all posts except other all custom post types. How to do this. See the code below. It’ll enable the Featured Image for all the posts and custom post type called books only.

add_theme_support( 'post-thumbnails', array( 'post', 'books' ) );

If you need to add a class to the image. Nothing to worry about and that is so simple. Lets see how we can do that. If you want to add multiple classes, add all classes inside the value. Example: array( 'class' => 'img-responsive other-class other-class-2' )

<?php
if( has_post_thumbnail(‘books’) ) {
	the_post_thumbnail( 'books', array( 'class' => 'img-resposive' ) );
}
?>

This will add the img–responsive class to the image and output will be look like,

<img src="…" class="img-responsive" ... />

As well you can use these selectors to style your featured image.

img.attachment–post–thumbnail
img.attachment–thumbnail
img.attachment–medium
img.attachment–large
img.attachment–full

Hope this will be helpful to you for creating Featured Images and use those in your theme or the website. Please feel free to drop your comments and feedback below for better serve for you in the future.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *