One of the most important new features of the recently released Wordpress version 2.9 is the possibility of adding thumbnails to posts. There where already hacks and plugins out there for older versions of Wordpress to add thumbnails to posts but this has now become a standard feature. However to get this to work it does require a couple of edits in your theme files. This post describes the basic actions to enable this feature if your theme does not support post thumbnails yet.
1. Enabling the feature
First thing that needs to be done is adding two lines of code to functions.php to enable this feature for your theme. You can edit theme files through the theme editor in the admin panel (Appearance > Editor) or by editing and uploading the files through FTP into your theme directory. Eitherway always make a backups.
Add the following two lines at the bottom of functions.php.
if ( function_exists('add_theme_support') )
add_theme_support('post-thumbnails');
The if statement here is only to ensure that your theme will work on older Wordpress versions as well.
2. Adding thumbnails to your posts
Once this function is added to your theme a new box will appear in the Edit Post screen where you can select a thumbnail for each post. Clicking on it will open the Add Media dialog. At the bottom is a new link called Use as thumbnail, clicking on it will add the selected image as thumbnail for your post. You can close the dialog after clicking this link.
3. Add the post thumbnail to your theme
Next step is adding the tag for showing the thumbnail in the locations where you want the thumbnail to show up. A good place would be in index.php and single.php before the the_content tag. The following code will add the thumbnail in the size specified for thumbnails in your Wordpress Media settings.
<?php the_post_thumbnail('thumbnail'); ?>
Replace ‘thumbnail’ with ‘medium’ or ‘large’ to use the other specified sizes in your Wordpress Media settings. If you want to use custom dimensions check further below.
4. Styling the thumbnail
This tag will output an image with a class called wp-post-image. You can use this CSS class to style the appearance of the thumbnail, for instance to add a left float to it. You can do this by adding the following somewhere in your stylesheet.css.
.wp-post-image { float: left; padding: 2px 14px 6px 0; }
That’s it! Make sure you select a thumbnail for each post from the Edit Post screen.
Customization
The instructions above are the basic instruction to get this working. If you want more control over the output you can use the following tags.
In the code below you can specify custom width and height for your thumbnails by replacing the numbers to your desired dimensions.
the_post_thumbnail(array(300,200));
If you want to use a custom class to style your thumbnails use the following code.
<?php the_post_thumbnail('thumbnail', array('class' => 'custom-class-1 custom-class-2')); ?>
Other resources
The following two resources helped me figure this out for my own theme.
- kremalicious.com: Using The New Post Thumbnail Feature In WordPress 2.9
- wpengineer.com: The Ultimative Guide For the_post_thumbnail In WordPress 2.9
HELP – this looked promising – (pretty new to all this) – working with wp 2.9.2 – did step 1 in functions.php – it spaced everything out strangely in my console – so I thought I’d take it out of function.php – no matter how many times I try to take the code out of functions.php now – it comes back in there – even if I save it…now it gives me messages like this up the top of my consol “Warning: Cannot modify header information – headers already sent by..” – oh bother – any suggestions anyone? – help appreciated.
actually sorted it now – ignore my last post – the short answer was I inserted too many spaces into the PHP – it hates that….
hey,
i’m using “arras” theme. so I updated the file index.php( which was completly empty before adding this line) with the following line: as you write.
the thumbnails is still not shown on my home page. did you mean this index.php file?
thanks,
Shlomo
It depends on where you want the thumbnail to show up. If you want to see it when viewing a single post you will have to edit single.php. If you want thumbnails shown on the home page you should edit homepage.php.