Show Excerpts and Post Thumbnail Twenty Eleven Theme

Adding post thumbnails and excerpts to Twenty Eleven theme is not much different than how they would be added to Twenty Ten.

The first step is to create a functions.php file for your child theme if you don’t already have one and add this to it. This adds our own custom size thumbnail of 140px X 140px.

I strongly recommend installing and running Ajax Rebuild Thumbnails plugin after completing this tutorial. It will create a new image size for each featured image. You can uninstall it after it’s finished.

// This sets the dimensions for the thumbnails displayed on the homepage
	add_image_size('excerpt-thumbnail', 140, 140, true);

The next step we need to tell our theme to display excerpts instead of the full post. Copy content.php to your child theme directory and open it. Find this block of code around line 35

		<?php if ( is_search() ) : // Only display Excerpts for Search ?>
		<div class="entry-summary">
			<?php the_excerpt(); ?>

Change it to this.

		<?php if ( is_search() | is_home() ) : // Edit this to show excerpts in other areas of the theme?>
		<div class="entry-summary">
		<!-- This adds the post thumbnail/featured image -->
			<div class="excerpt-thumb"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
		<?php the_post_thumbnail('excerpt-thumbnail', 'class=alignleft'); ?></a></div>
			<?php the_excerpt(); ?>

By adding | is_home() to the if statement it tells our theme to display excerpts on the homepage. I find doing it this way allows more control over which areas display excerpts and which display the full post.

Just below that you can see we’ve added the post thumbnail, the size of this is controlled by what we added to functions.php in the first step.

Now just save those two files and add a featured image to your posts and you’ll see post thumbnails with excerpts.

Comments

  1. says

    Thank you very much for the tutorial. One question, though: the code works, but the post list now extends outside the main page background. Is there a way to break the post list? Any idea how to fix this? Thank you very much in advance.

    • says

      Hi Alex. The post area should not be doing that, nothing in the code I gave changes the layout of it. If you link your site I’ll take a look for you though.

  2. says

    No thumbnails have appeared beside my posts but worked great for showing only snippet of posts.. I wasn’t sure where to put this in the functions php so just put it at the bottom………I know very little about code

    // This sets the dimensions for the thumbnails displayed on the homepage add_image_size(‘excerpt-thumbnail’, 140, 140, true);

    I just pasted this at the bottom of all the other code

    Also would like to get rid of that little comment on this post bubble.

    thanks…great info

    P.S. I also installed Ajax Rebuild Thumbnails plugin as you suggested.

    • says

      Hi Ray, if you open a forum post and link the files you have edited on pastebin.com I’ll take a look for you. I’ve visited your website but it looks like you have an error in your functions file.

      • says

        My site went down after I messaged you.

        I never heard back and went in to remove that code and must have taken something extra out.

        Can’t get back in.

        Paying Hostgator to install a backup they have, however I will most likely have to start over as most of my improvements will be lost as the backup is not so recent.

Leave a Reply