Wednesday 2 November 2011

How to add featured image to wordpress theme?


In wordpress we can display the images in two ways.

1. in the post content.
2. as a featured image.


Featured image is introduces since worpress 2.9, also known as post thumbnails. There is no rule that every wordpress theme should be with featured images. Using featured image in a theme will give good look and clear presentation of the posts with the image.

Now I will explain adding featured image to wordpress posts and to the wordpress theme.

First we will check whether the theme supports adding a featured image. For this edit the posts which are published or add a new post. If the theme supports featured images, the new opened window (post or edit screen) will have an option in the sidebar like the below image. 






If the option is not available in the sidebar, it means that your theme does not support featured image.
Now it’s the time to add featured image support to wordpress theme. We can add featured image support to whole wordpress theme or we can add to only posts or to only pages. For this open your theme functions.php and add the following code.

To add thumbnail support for all post types, add the following code
if(function_exists(‘add_theme_support’)) {
add_theme_support(‘post_thumbnails’);
}



To add thumbnail support for only posts add the following code
if(function_exists(‘add_theme_support’))  {
add_theme_support(‘post_thumbnails’, array('post'));
}


For pages add the following code
if(function_exists(‘add_theme_support’)) {
add_theme_support(‘post_thumbnails’, array(page));
}



Adding the above code will enable the featured image support. Now open the post or edit screen you should now see your featured image added to the sidebar to indicate you were successful.
I hope all you know how to add featured image to wordpress posts.

Following the above process will add the featured image support to wordpress theme now we will see how to display the featured image on wordpress theme.

To display the post thumbnails add the following code in the query post loop where you want to display the post thumbnail.
    if (has_post_thumbnail()) {
        the_post_thumbnail();
    }  
      We have three predefined functions used to check and display the post thumbnail.

      has_post_thumbnail() returns ‘true’ if a thumbnail has been set.
      the_post_thumbnail() echos a string containing the thumbnail <img> tag.
      get_the_post_thumbnail() returns a string containing the thumbnail <img> tag.

               i.          
      the_post_thumbnail(),get_the_post_thumbnail()  will have two optional arguments.
      The first option is the size of the thumbnail.The values for this option are

         1.Default thumbnail sizes like a string containing the text ‘thumbnail’, ‘medium’ or ‘large’. The values of this ‘thumbnail’, ‘medium’ or ‘large’ will be defined in wordpress media screen under settings in wordpress dashboard(Settings > Media screen).

         2.an array with new width and height dimensions, e.g. array(120, 90).
      The second one is an associative array containing the src, class, alt and title.
      the_post_thumbnail(array(120,100),array('src'=>anjali.jpg','class'=>'thumbnail','alt=>'post thumbnail','title'=>'Title'));

      Enjoy using the featured image.




      3 comments:

      1. Thanks for drop ur comment.The main aim of my post is How to add featured image to wordpress theme, if the theme is not have the featured image enabled by default. When we download few themes they wont enable featured image by defaut, at that time if we want to use featured image this post will helps.

        ReplyDelete
      2. Can i use this code in thesis theme bcoz it does not have featured image option in the theme.Thanks

        ReplyDelete
      3. ya anand you can use this.feel free to ask if u get any problem

        ReplyDelete