Adding Post Thumbnails To WordPress 3.0

Post Thumbnails were first introuduced in the release of WordPress 2.9, but seeing how the theme structure has slightly changed in 3.0 we have put together a short tutorial showing you how to add Post Thumbnails to your articles and posts.

You will require basic understanding of WordPress Theme development and PHP. This tutorial will be split into two parts, one for WordPress Admin amendments and one for PHP updates to the core theme files.

WordPress Modifications

We will be using the new default theme to showcase this tutorial, but it can be easily adapted into any theme upon release. First you should have already have the WordPress beta installed already and none of the code has been modified.

If you are logged in as an Administrator, press Edit under the post and you will see the Featured Image widget.

Set a featured image for your post. In this example it is best to use one that is rectangular, so we have gone for the WordPress logo.

Now the Featured Image widget should display the WordPress Logo as shown below.

Now it’s time to update your post, but you will notice that the Featured Image will not show in your posts or articles. But to fix this some amendments to the themes code need to be updated.

Updating Your Themes Structure To Support Post Thumbnails

If you hadn’t noticed already once you go into the twentyten theme folder, there are a few new files. One being loop.php which has a majority of the code that the index.php had in WordPress 2.9.

Open loop.php in your favourite text editor and find the following code which starts on line 138:

<div class="entry-content">
 <?php the_content( __( 'Continue&nbsp;reading&nbsp;<span>&rarr;</span>', 'twentyten' ) ); ?>
 <?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
 </div>

One small snippet of code needs adding to the above, which will display a Featured Image if one is selected. If there isn’t one then nothing will be displayed, simple as that!

<div class="entry-content">
// The Post Thumbnail function is active by default, but this line of php will make it display.

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(200,160), array("class" => "alignleft post_thumbnail")); } ?>

//Post Thumbnail Ends

 <?php the_content( __( 'Continue&nbsp;reading&nbsp;<span>&rarr;</span>', 'twentyten' ) ); ?>
 <?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
 </div>

You amend the numbers to change the Height and Width of the thumbnail

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(200,160), array("class" => "alignleft post_thumbnail")); } ?>

Now after you have saved loop.php, refresh your blog and you will now see a Post Thumbnail assigned to each of your posts.

If you are having any issues with following this tutorial, please leave me a comment and I will assist promptly!

Related Posts

Network Posts

Posted in Wordpress using the Tags: admin, core, css, php, post, theme, thumbnail, tutorials, update, Wordpress

---

---

---

You can leave a response, or trackback from your own site.

28 Responses to “Adding Post Thumbnails To WordPress 3.0”

Slobodan
Well the only difference from 2.9 that i can see is that they changed “Post thumbnail” to “Featured image” in the admin. They could have done a better job with it (maybe they did, haven’t tested the post thumbnail/featured image works in 3.0).
Here is a tut i wrote about 4 months ago on post thumbnails in WordPress 2.9 http://wpcanyon.com/tutorials/how-to-use-the-post-thumbnail-feature-in-wordpress-2-9/
Reply

Daniel
The major difference is that the loop.php contains the majority of the key parts that were once in the index.php
Reply

David
I made a post a few days ago. Any response? – I see it is not published. Thanks
Reply

Daniel
It may have been classed as spam so was deleted by Askimit
Reply

Veerle
thx for the post!
In TwentyTen they use the default function for the header image, so I was a bit lost. Your post helped me out!
Reply

Daniel
Glad to help Veerle!
Reply

Jennifer R
By this way WordPress will not automatically adding thumbnail to your post, here is another way to archive that: http://www.intenseblog.com/wordpress/related-posts-without-plugin.html
Reply

Brian
Thanks for the info! I just added thumbnail support to my site just hours before upgrading to 3.0 so I was confused when I saw Featured Image after the upgrade.
Reply

Kishore Mylavarapu
Nice update.Thank you
Reply

mike
thanks so much for this, been going insane trying to figure this out as I’ve only started using WP with version 3 and all other documentation has been about how it was in 2.9 which is subtly different enough to waste about 3 hours of my life!
Reply

marcia
hi
just wondering
i am not using twenty ten theme.
the theme does not use loop.php
which page should i alter instead.
regards
marcia
Reply

Daniel

It will be in the index.php, want me to send you the code?


yuraz
Hi,
can you tell me how to put the code in the child’s theme functions.php?
Thanks
Reply

Michelle
Hi, this tutorial was very helpful, I’ve been searching for ages for this info.
I’m not using twentyten. One of my sites’ theme has a index.php file which is where I assume I add the code, and the other site has an index.php file AND a home.php file. Not sure which one to add it to on that one to enable thumbnails (it’s a premium theme that has an option of magazine and regular view, maybe that’s it).
Anyway, do you think you could send me the code to add to the index.php files to enable thumbs, and where to add it? Much appreciated if so.
Reply

Russell Bishop
Thanks very much for the heads’up! Although you should probably advise in the post that the classes the image is given are contained in that snippet, and can be changed at will.
Reply

Rai Adi Sanjaya
Nice tutorial…
But, I have problem.. how to set the feature image by custom fields or just image URL ?? because my hosting space is full and I want to host images on another server.
Thanks..
Reply

Trackbacks

• designfloat.com
• zabox.net
• Tweets that mention Adding Post Thumbnails To WordPress 3.0 | nenuno creative -- Topsy.com
• pligg.com
• [User Link:Adding Post Thumbnails To WordPress 3.0] | Tips for Designers and Developers | tripwire magazine
• CSS Brigit | Adding Post Thumbnails To WordPress 3.0
• 150+ Fresh Useful Articles for Designers, Developers and Freelancers | tripwire magazine
• WordPress 3.0 – What’s the big deal? « WP LOGBOOK
• Wordpress 3.0 Roundup | Laura Blalock
• Our Favourite Wordpress 3.0 Tutorials, Resources & Videos | nenuno creative
• Useful Resources and Tutorials to get started with WordPress 3.0 | Allweb Magazine
• Useful Resources and Tutorials about WordPress 3.0 | All Web Magazine