Adding Post Thumbnail Feature to your WordPress Theme

Posted in Wordpress Development on 22 February 2010 10 comments

WordPress added a new major feature in version 2.9 – The Post Thumbnail. Now everyone can easily make your website looks more magazine-like and professional. I will show you how to add the feature to your theme within 5 minutes.

1. Adding codes to The Loop

First of all, if you do not know what is The Loop, please refer to this page.

Open up index.php, look for:

<?php the_excerpt(); ?>

or, your theme may be using this instead of that above:

<?php the_content(); ?>

Add these codes just before the “the_excerpt” or “the_content” line :

<?php if (function_exists('has_post_thumbnail')) {
 if ( has_post_thumbnail() ) { ?>
	<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array( 150, 150 ), array( 'class' => 'alignleft') ); ?></a>
<?php } } ?>

Explaination:

  • The first line check whether “has_post_thumbnail” function exists before running the code, so that it wouldn’t causes fatal error in older wordpress version.
  • has_post_thumbnail is the function that determine whether your post has post thumbnail
  • the_post_thumbnail is the function that output the post thumbnail <img> tag

.

2. Using the_post_thumbnail()

According to the wordpress codex, the function’s usage is:

<?php the_post_thumbnail( $size, $attr ); ?>

It can accept 2 arguments. The first argument is the thumbnail size and the second argument is the image’s attributes.

Based on the example in part 1
I used to specify the thumbnail size in array form, like in the above example (a square thumbnail of 150 pixels).

For the second argument, I added .alignleft class to the thumbnail so that it floats left. You can add more attributes like this too:

the_post_thumbnail( array( 150, 150 ), array( 'class' => 'alignleft' , 'style' => 'border:1px solid red ; margin-right:5px ;' ) );

3. Make your theme support post thumbnail

Open functions.php, scroll to the most bottom and add this before ?> (the closing php tag) :

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}

Visit your admin panel and edit/create a post, you will then notice a new box called “Post Thumbnail” appear at the bottom right corner. You can add thumbnail there.

4. I need rectangle thumbnail

When you upload a thumbnail, wordpress generates only square thumbnails. What if you need rectangle thumbnail in your theme?

In your functions.php, look for:

add_theme_support( 'post-thumbnails' );

After that, add this in the next line:

set_post_thumbnail_size( 300, 100, true );

The first argument is width, second is height and the third is crop_flag (if true, wordpress will crop it upon creating the thumbnail, instead of resizing)

From now on, wordpress will generate an additional rectangle thumbnail of size 300 x 100 pixels everytime you upload image.

Okay, you might ask, what about my old uploaded images? I want each of them to have a rectangle thumbnail too. Fortunately, there is a plugin called “Regenerate Thumbnails” which can do the job for you automatically.

Hope this helps :)

 

Posted by Zen on 22 February 2010 • 34,266 visits 10 comments
Tags :


or Subscribe to specific category only :




  - 10 Comments


jhon says:

nice thanks for sharing wonderful post.

Here I have another tutorial on how to make your first image post to be a thumbnail automatically Without Custom field and Featured image and without taking your time editing cropping thumbnail of your post.

Automatic WordPress Thumbnail Without Custom field and Featured image

AhrimanSefid says:

Hi Me Need code For Show thumbnail Id Post.

<a href="” rel=”bookmark” title=”">

‘alignleft’) ); ?>

Haven says:

Wow… of all post thumbnail tutorial I’ve been through finally this one is the one that I understand well and was able to display my thumbnail perfectly. Thank you thank you very much your really are a good mentor some just blog things and don’t put emphasis on small details like where to put the code and just thought that all people are programmers and never knowing that people searching for this are plain simple people who just want to run their blogs right but just don’t know how to fix it without the right direction or tutorial.:-)

Mouad says:

Hi and thank you. it helped me, although I struggled at first because this was giving me 500 internal server errors. Although I dont know anything about PHP, I managed to locate the mistake, you provided the code:

the_post_thumbnail( array( 150, 150 ), array( ‘class’ => ‘alignleft’ , style’ => ‘border:1px solid red ; margin-right:5px ;’ ) );

It should be

the_post_thumbnail( array( 150, 150 ), array( ‘class’ => ‘alignleft’ , ‘style’ => ‘border:1px solid red ; margin-right:5px ;’ ) );

There is a (‘) missing before the style class tag.

U can see my modification in action here :)

http://cinema.al-rasid.com

Thank you

Mouad says:

EDIT:

Could you please tell me why some of the thumbnails are not resized properly?

For instance, look at the index, there is the entry for the film “Green Zone” see that the head of Matt Damon is chopped.. for no obvious reason to me.. while other thumbnails appear to be resized properly.

Thanx

Zen says:

Thanks for pointing that out! :)

Trackbacks

  1. Adding Post Thumbnail Feature to your Wordpress Theme | ZENVERSE | Wordpress Marketing
  2. wp-popular.com » Blog Archive » Adding Post Thumbnail Feature to your Wordpress Theme | ZENVERSE
  3. Technology Blog » Adding Post Thumbnail Feature to your Wordpress Theme
  4. Naik taraf tema wordpress supaya menyokong post thumbnail | Z.A.R.Y.L

Leave a Reply

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Previous Post
«
Next Post
»