Thesis Tutorial Excerpts with Thumbnail Image

Thesis by default does not come with Excerpts and thumbnails in the traditional sense so this post will quickly show you how you can add post excerpts with thumbnail images back in to thesis.

Thesis is by far one of my favourite themes to work with and I wasn’t aware until recently that the normal excerpt posts with thumbnail images was absent from the theme, so after some investigation and trial and error this is what I came up with.

Step 1

First we need to configure thesis and wordpress options.

For Thesis head over to display options and located and change the following.

  • Home Page Display Options > Features and Teasers > Number of featured posts to show > 0
  • Teasers > Teaser Display Options > Untick everything except excerpt.
  • Display Options > Posts > tick: Display post excerpts

You will now be able to control the number of posts via wordpress general settings > reading options.

Step 2

Locate you custom functions file and add the following to it.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true );
add_image_size( 'teaser', 150, 150, true );

function custom_excerpt_box() { ?>
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
   <?php the_post_thumbnail(); ?>
   </a>
<?php endif; ?>
 <div id="text_area_excerpt"><a href="<?php the_permalink() ?>"<?php echo '><h2>' . get_the_title() . '</h2>' . "\n"?></a>
<?php echo '<p>' . get_the_excerpt() . ''; ?><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">Read the full article...</a></p></div>
<?php }
add_filter('the_excerpt', 'custom_excerpt_box');

// Teaser Length
function teaser_length($length) {
 return 47;
}
add_filter('excerpt_length', 'teaser_length');

Lets Break it down.

add_theme_support( 'post-thumbnails' );

First we need to reintroduce featured images, which normally would be to the right of your post editing screen, labelled Featured Image.

set_post_thumbnail_size( 150, 150, true );
add_image_size( 'teaser', 150, 150, true );

Then we need to set our thumbnail sizes, which in most cases is 150 x 150.

If your theme lacks a required size then just add more sizes, they will appear when you add an image to a post or set it to featured image.

function custom_excerpt_box() { ?>
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
   <?php the_post_thumbnail(); ?>
   </a> <?php endif; ?>
<div id="text_area_excerpt"><a href="<?php the_permalink() ?>"<?php echo '><h2>' . get_the_title() . '</h2>' . "\n"?></a>
<?php echo '<p>' . get_the_excerpt() . ''; ?><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">Read the full article...</a></p></div>
<?php }
add_filter('the_excerpt', 'custom_excerpt_box');

The final part for our custom functions is the filter which will allow you to replace the way in which the excerpt in thesis displays and reintroduce the ability to display the featured image. The above filter will also link the image to your post.

If you want to change the length of the excerpt text then edit the number in this filter.

// Teaser Length
function teaser_length($length) {
 return 49;
}
add_filter('excerpt_length', 'teaser_length');

Step 3

The next part would naturally be to style the excerpts so open up your custom css file and add the following.

.custom .teaser {
    padding-bottom: 15px;
    text-align: justify;
    width: 100%;
    float: left;
}
.custom .teasers_box {
padding: 0;
border-top: 0;
margin: 0;
}

.format_teaser img {
    border: 2px solid #DDDDDD;
    float: left;
    height: 150px;
    margin: 0 10px;
    width: 150px;
}

Note that the above CSS is the basics or styling the excerpts. You may need to alter or change the above, and possibly add some additional CSS for other objects within the excerpt. You can do this virtually in Chrome and Firefox by downloading firebug and right clicking on the object you want to edit and selecting inspect element.

What Next…

If you need any help then feel free to email me and while your here sign up to recive the latest Tips and posts.

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

15 comments… add one
  • Felix Oct 3, 2012, 3:27 am

    Hi Sir,

    Would you mind to please show the image on how this customization looks like?

    Thanks,
    – Felix

    • Matthew Horne Oct 3, 2012, 3:31 am

      Similiar to my homepage, I have an update for this to make it smoother and better laid out. I will update tomorrow.

      I will email you a notepad++ php file as it will not format correctly here.

      You will need to edit the css though as that changed a little too.

      Regards

  • christina Nov 12, 2012, 5:21 pm

    amazing post. one question: how did you get he border not to show up above the first teaser? if i could figure that out, so many problem so would disappear! Thanks in advance.

  • Maria Feb 12, 2013, 3:27 pm

    I need your help my website http://www.flavorsofmumbai.com yesterday I moved to hostagtor.com a different server everything else is fine except Thumbnails for excerpts not showing also fisrt pic of post not showing. Can you help me on this?

    • Matthew Horne Feb 12, 2013, 7:37 pm

      Usually after moving you need to refresh permalinks.To do that go to wp admin > settings > permalinks and hit save.

      Also you need to clear the cache for the thumbnails. Log in to hostgator, cpanel > file manager > public html > wp-content > themes > thesis_version > look around for a folder called cache in one of the folders, in the custom folder if I remember rightly and then open that up and delete all the cache in there. That will restore the images for you.

      Let me know if you have any issues, if so send me an email with ftp and I will do it for you.

      Regards

  • Keira Apr 10, 2013, 3:52 am

    I bought thesis after having another theme for a long time. I’ve got 2000+ posts and I don’t want to have to go back and add a photo URL to the thumbnail section. Will this pull up the first image in a post and display it as the thumbnail?

  • Nicola May 22, 2013, 4:01 pm

    Hi There,

    This by far is the only post I’ve found which actually helps me to achieve what I was looking for. Thank You 🙂

    I have a question though, how can achieve the headline first, then the image left with the text wrapped?

    Thanks Again

    • Matthew Horne May 22, 2013, 4:31 pm

      Hi thank you,

      you could modify the function above.

      by moving the a href for the H2 titles above the if has thumbnail.

      That would place the title above the image and excerpt, then float your image left.

  • Nicola May 22, 2013, 4:47 pm

    Thanks Matthew,

    Here is the code I have changed, however I think I’m missing something as it doesn’t work 🙁

    function custom_excerpt_box() { ?>
    <a href="” title=”” >

  • james Aug 22, 2013, 5:38 am

    Thanks for this Matt, this worked a treat.

    However, do you know why thesis sometimes doesn’t show new changes made? for instances I’m trying to get rid of the 3 column to 2 column, it’s showing as saved so should be working, but the changes just isn’t showing?

    I’m using v1.8.5

    • Matthew Horne Aug 22, 2013, 11:59 am

      Hi, you should update to version 2.1 many bugs and issues have been fixed in that update.

Leave a Comment