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.
First of all, if you do not know what is The Loop, please refer to this page.
Open up index.php, look for:
or, your theme may be using this instead of that above:
Add these codes just before the “the_excerpt” or “the_content” line :
'alignleft') ); ?>
Explaination:
.
According to the wordpress codex, the function’s usage is:
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 ;' ) );
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.
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 :)
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
Hi Me Need code For Show thumbnail Id Post.
<a href="” rel=”bookmark” title=”">
‘alignleft’) ); ?>
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.:-)
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
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
Thanks for pointing that out! :)