Image thumbnails has been built in as default since WordPress 2.9 and of course the latest WordPress 3. However, even when the function is available, most themes, including the default theme, do not call up the function for reasons known only to the designers. Users would have expected that since the function is available, themes that claim to be WordPress 3 compatible should have this function enabled by default. Whether they use the function or otherwise is the user’s preference.
As it is, those who are using the default WordPress 3 Theme, Twenty Ten, and wants to insert thumbnails to their post in the front page will have to add in the codes to call up the function on their own. Though it is not too complicated a process, newbies are advised to keep a copy of the original as backup.
WordPress 3 default Theme is built a little bit differently from the previous Kubrik Theme. Because this Thheme can support child themes, there is a file called the loop php that holds what used to be in the Index php. To add the call up of the image thumbnails, we must add in the php codes in loop php and not the Index php.
Getting The Image Thumbnail To Show.
After writing your post, upload your image the usual way, that is by clicking the ‘Add an image’ icon on the top of your post editor. When the image has been uploaded, click on the ‘Use As Featured Image’ link instead of the ‘Insert Into Post’ like you usually do.
Once you completed that, you should see an image at the bottom right hand corner of your New Post page. That will be the image that will appear as the thumbnail. However, it will not be showing up as yet. That is because the codes that calls up the image is not included in the Theme.
Inserting The Codes.
Under Appearance – Editor, open the loop php. Scroll down until you se these comment.
<?php /* How to display all other posts. */ ?>
Under this, scroll down further until you see this line
<div class="entry-content">
Immediately AFTER this line copy and paste in this line of codes.
<?php the_post_thumbnail(array(200,160), array('class' => 'alignleft post_thumbnail'));?>
I have added the array of 200, 160 which means the thumbnail will be automatically and proportionally re-sized to 200 x 160 px depending on the size of your actual image. It will also appear on the left side of your post in the front page.
Styling The Image Layout.
The thumbnail appears on the top left corner of your post which looks kind of odd. To flush it and blend the image with your text, open your Style css file. Copy and paste these at the very bottom of your style sheet.
.alignleft {
float:left;
}
.post_thumbnail {
background:none repeat scroll 0 0 #EEEEEE;
border:1px solid #DDDDDD;
margin:0 10px 10px 0;
padding:6px;}
This will give your thumbnails a nice frame and blending in nicely with your post.
Using The Same Image In Single Posts Page
With that done, you now have a small thumbnail image in your front page. The single post page wil not have any image unless you insert one like you do the usual way. However, do not insert the image on the top of all your tex or else you will have 2 image sticking together in the front page. One the Thumbnail and two, the image you inserted. It will be better to insert any other images one or two paragraphs below.
To save all this hassle of using 2 images for one post, you can have the same image that you have used for your Thumbnail as the image for the post. This image can be re-sized automatically to be bigger that the thumbnail so it looks better in your whole post.
To get the same image to show in your singles post with a different size, open your singles php file in your Theme editor.
Same thing, look for this line,
<div class="entry-content">
Immediately AFTER that line copy and paste in this line
<?php the_post_thumbnail(array(300,225), array('class' => 'alignleft post_thumbnail'));?>
This time, the size of your original image will be re-sized to 300 by 225 pixels, no matter what the original size of the image is. You can of course reduce or increase the size by changing the array values but then it might distort the picture bit if it is out of proportion.
A small disclaimer here. I haven’t tested these in any other themes except the Twenty Ten, but I think it should work with all themes that are compatible with WordPress 3.
Have fun adding and using thumbnails for the default WordPress 3 theme, Twenty Ten.
