Hi, please

Wordpress 2.9 thumbnail feature in Thematic / code + links for related issues

Well, Wordpress 2.9 is finally here!!! And with it many new features, one of which is the new thumbnail feature. First let me show you few examples of how it looks like and how you can use it (for those who just want to copy the code scroll to the bottom of the post).

What is the Wordpress 2.9 thumbnail feature?

Once you upgrade to /or/ activate Wordpress 2.9 and get your thumbnail feature going (what will be shown in a minute), you will be able to create galleries inside your WP blog. This will enable you to show only the thumbnail on your home page and have the gallery of as many photos as you wish “behind” it. Here is how this will look like in the default setup:

thumbnails

gallery

gallery_single

Portfolio sites with Wordpress 2.9

What is great about this feature is that now (with a little knowledge of php and css), Wordpress can easily be used for creating portfolio sites which was much more complicated in the older versions. Here is an example of how I used it to create my graphic design portfolio site (this is still work in progress so pay attention only to the home page).

portfolio

Explaining the code

Here is what you have to do to activate the new thumbnail feature in Wordpress 2.9. All code that follows should be placed inside your childthemes functions.php and styled in your childthemes style.css (read more about getting started with Thematic and childtheme). .

What we need to do is “call” the thumbnails (wordpress calls it the_post_thumbnail) inside the post content. Now, if we want the thumbnail feature to appear on each post we have to call for them inside the loop (loop is the list of things that each post goes through before being published). If you have no idea what am I talking about read more about the loop. Here goes…

<?php
//* First we will add the thumbnail feature *//
add_theme_support('post-thumbnails');
 
//* To create our own loop we have to get rid of thematic index loop first.*//
function remove_index_loop() {
     remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
 
// Now we will create our own loop.
function thumb_index_loop(){
       while ( have_posts() ) : the_post()  // Start the loop:
    // This is just what we decide to show in each post ?>
    <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
        <?php thematic_postheader(); ?>
        <div class="entry-content">
        <?php the_post_thumbnail();  // we just called for the thumbnail ?>
        </div>
        <?php thematic_postfooter(); ?>
    </div><!-- .post -->
    <?php
    endwhile; // loop done, go back up 
}
// And in the end activate the new loop.
add_action('thematic_indexloop', 'thumb_index_loop');
?>

Note that our posts will include post header, post image (the thumbnail) and post footer. So we just added thumbnails to the blog. Also note that we wrapped the thumnails, header and footer inside divs so you can teyle them in your style.css.

And the code is there. Now all you need to do is use them. Go to your wordpress admin page and on the right side under the categories widget you will see the new one: POST THUMBNAILS. It will offer you to upload an image that will be used as the thumbnail for that post (just don’t forget to press “save all changes” after you upload an image). Also every time you upload an image to your gallery, you will have an option “use as thumbnail” next to the “insert into the post” button. In the same window you can choose do you want to use it as a link to the post or to the image itself or you don’t want it to be a link at all. After saving all changes the image should appear in your “post thumbnails” widget.
edit_post

Now you can add as many images you want into the post but only the thumbnail will be visible on your home page.
And you are all set!

11 Comments

  1. Ed Nacional 20:48, Dec 20th, 09

    This is a great tutorial! I have been playing around with this too BUT once I upgraded to 2.9 RC1 it stopped working! It looks like they changed: the_post_image() to –> the_post_thumbnail()

    I had to change all instances in my code, but worked fine once I did that.

  2. Ed Nacional 21:07, Dec 20th, 09

    Also found this great wordpress protip to make sure your thumbnails are being used in RSS feeds:

    http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/

  3. Mirna Raduka 12:05, Dec 21st, 09

    Tnx Ed! Will do that!

  4. Mushon 13:01, Dec 21st, 09

    I made some corrections to the post and the code:

    • Replaced the_post_image with the_post_thumbnail (thanks Ed)
    • Replaced mirna_header with thematic_header ;)
    • Cleaned up the comments (some php comments where outside of the php range)

    I tested it, I think it works now (always good to do a sanity check and test the code before publishing it). Now it’s worth sharing…

  5. Mirna Raduka 13:18, Dec 21st, 09

    Great Mushon! Thanks for your help (I was scared to edit the code so I don’t mess it up again :) ! I will post the link to it to few other places..

  6. Tim Valentine 01:36, Dec 31st, 09

    Nice – Saves a step or two compared to doing it the old fashioned way. Thanks for the code.

    Tim…

  7. chicho 18:36, Jan 9th, 10

    I’ve been trying to get working the new thumbnail feature of wp 2.9 following the code you write, but that breaks my theme. You can see that in http://www.flickr.com/photos/jelguea/4260795586/

  8. chicho 16:53, Jan 10th, 10

    Every thing is solved just adding the feature not creating the new loop.

  9. Angel 08:12, Mar 19th, 10

    I am having a problem getting the thumbnail to show in my child theme “Gallery.” Here is the string I have in the functions.php file to have my thumbnails show on the home page.

    <img class="thumbnail" src="” />

    here is a link to the demo site: http://www.reinnovating.com/yourbusiness/

    I’ve also tried {the_post_thumbnail();} instead of {get_the_post_thumbnail();} and cannot get the thumbnails to show

  10. chicho 04:20, Mar 20th, 10

    I don’t think is a problem with the functions.php. It looks like your thumbnails have not the correct dimensions, 125 x 125. If the thumbnails have other dimensions than that, then it shows the “NA” image.

  11. hosting 18:41, Dec 18th, 10

    That’s awesome. I’ve been trying to sell Scott on putting something like this together. Are you planning on posting a note to

One Trackback

  1. [...] After uploading post thumbs, I’ll use this function from last semester’s OSD blog: Wordpress thumbnail feature in Thematic By joan 12:33, Apr 6th, 10 #1 – Tutorial Comments RSS ← Pickle, Please – CSS and [...]

Post a Comment

You must be logged in to post a comment.