Add the_post_thumbnail to post excerpts

WordPress 2.9 has a new post thumbnail feature that I’ve been exploring as part of this site’s layout in preparation for updates to some client sites. Adding the code below to your child theme’s functions.php file will activate the post thumbnail feature in WP2.9, then change the default content display on the home page or front page to post excerpts (rather than full post content) and finally add the thumbnail itself to the excerpt text.

// Add post thumbnail support in WP2.9
if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

// Change default content display on home page to excerpt
function childtheme_content($content) {
if (is_home() || is_front_page()) {
$content= 'excerpt';}
return $content;
}
add_filter('thematic_content', 'childtheme_content');

// Add post thumbnail to post excerpt
function add_post_thumb($title) {
return get_the_post_thumbnail(NULL, 'thumbnail') . $title;
}
add_filter('get_the_excerpt', 'add_post_thumb');

I prefer the thumbnail underneath the post title and author meta information. However, if you wanted the thumbnail to appear next to the title, replace get_the_excerpt in the last line with thematic_postheader_posttitle. Use CSS to get the positioning that you prefer. Note that the thumbnail will appear wherever excerpts are shown – use the same conditional code as shown with childtheme_content() to limit it to the home/front page if you prefer.

This entry was posted in Code snippets and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

3 Comments

  1. Posted April 22, 2010 at 12:36 PM | Permalink

    This is mega useful – you are some kind of crazy Thematic God. Thank you!

  2. Michael
    Posted July 22, 2010 at 7:25 PM | Permalink

    Great tip!

    Only problem is that floating the thumbnail left doesn’t work for me with thematic_postheader_posttitle
    http://img293.imageshack.us/i/thematicpostheaderpostt.jpg/

    But I know float is successfully applied to the image because it works with get_the_excerpt.
    http://img835.imageshack.us/i/gettheexcerptwithfloatl.jpg/

    Any ideas? I’m trying hard to get the title and excerpt next to the thumbnail. And I know css well, but float isn’t work with thematic_postheader_posttitle for some reason.

  3. Thompson
    Posted July 25, 2010 at 1:47 AM | Permalink

    Figure it out. ‘thematic_postheader_posttitle’ works. But thematic’s css is set to clear all on headers tags in the parent CSS. So I added this to my child css and your code worked! The thumbnail is to the left of the post excerpt! Thank you.

    h1,h2,h3,h4,h5,h6 {
    clear:none;
    }

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting