How to add WordPress Post Thumbnails?

Introduced in WordPress 2.9, Post Thumbnails is a cool feature for displaying images attached to posts. Now called as Featured Images, this feature allows users to pick images as representative for blog posts, pages or custom post types. Now WordPress theme developers widely use featured images of their theme. Wondering how to use this feature? Want to add featured images to your custom themes? Read on and learn how to enable Post Thumbnails or Featured Images in your wordpress themes.

Wordpress Post Thumbnails
How to enable Post Thumbnails:

Enabling Post Thumbnails is easy. Simply add the following line in the functions.php file of your WordPress theme:

add_theme_support( 'post-thumbnails' );

The above code will enable Post Thumbnails for all post types. If you want to enable Post Thumbnails in just Posts, use following line:

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

Now as you have enabled Post Thumbnails, you may want to change the size of thumbnails. By default WordPress thumbnail size can be changed in Settings > Media section. But you can also set thumbnail size by using your functions.php. For that, use a code like this:

set_post_thumbnail_size(100, 50);

That will resize your thumbnails to 100px width and 50px height. Want to crop thumbnails? If yes, use the following code:

set_post_thumbnail_size(100, 50, true);

When you add additional custom Post Thumbnail sizes, you can assign them with new names. For example: if you want to create a new post thumbnail size named “small_image”, use following code:

add_image_size( 'small_image', 50, 50, true );

How to set an image as Featured Image:

Set Featured Image

When you are writing/editing a blog post (or a page), you can set an image a the Featured Image. To do that look in the Featured Image box on right of the screen. Normally, it is under your Categories and Tags. Press the Set Featured Image link. That will open a new lightbox window with already uploaded images. Click on the image of your choice and press Set Featured Image button at the bottom of the window. That will set the image as your Featured Image and the window will close automatically. Now look in the Featured Image box. The image you selected in the earlier step should appear there. This confirms that featured image has been set successfully.

That’s it! That image will be now used as your featured image for that post/page.

Showing Featured Images in Your Web Pages:

In order to show a Post Thumbnail, you need to a use a template tag. For example:

the_post_thumbnail(); 

or

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

Conclusion

Final code to be added to your functions.php will look something like this:

if ( function_exists( 'add_theme_support' ) ) { // Since WordPress 2.9
		// Add support for posts
		add_theme_support( 'post-thumbnails' );
                // set thumbnail size
                set_post_thumbnail_size(100, 50, true);
		// small Image size
		add_image_size( 'small_image', 50, 50, true );
		// medium size
		add_image_size( 'medium_image', 200, 150, true );
	}

And you can display your featured images by using a template tag like this:

<?php  if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { ?>
<div class="small_image"<a  href="<?php the_permalink(); ?>"><?php the_post_thumbnail('small_image');  ?></a></div>
<?php } ?>

Add Your Comment