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.




58 thoughts on “Show Excerpts and Post Thumbnail Twenty Eleven Theme

  1. Hi Brian, do you mean the size of the headers in the header area? Or the size of the featured image in the actual post? (sticky post is the same as a regular post, it’s just positioned at the top of the page)

    Your headers will always be displayed at whatever size they are set to (1000×288 is default) changing the post thumbnail size has no effect on those, it will only change the size of the image displayed in the post for that one featured image.

    • Fantastic, thank you sir.

      Any chance that you could shoot me an email? I am trying to embed a video into my sidebar, but I can’t figure it out for the life of me. The text widget is messing it up and I have been searching the forums, websites, etc. but keep coming up empty.

      ([email protected])

  2. This is great, thanks. But, how would I change the link at the end of the excerpt to be the same thing as the link? Is this possible? I have a plugin installed that slides down more content when the is clicked. It seems like the end of the excerpt is not the same as the “more” function.

  3. Nice work dude, that would be exactly what i am looking for so long.

    But there is one more question, for thumbnails. Would it be possible, by using the functions.php to automaticaly adding a thumbnail to any published post? For example, i published a new post and then automaticly, called by the functions.php, a thumbnail will be set for this new published post while using the first found image in the post.

    And if there wouldnt be a image in the post, it would set a defined placeholder image for the thumpnail. WOULD THAT BE POSSIBLE and if YES, HOW?

    I searched the web a lot, but until now i found nothing like your code. Maybe i does the wong searchterm… :-P

  4. Pingback: 7 New Post/Page Features You Should About « WEB WAR BEGIN

    • Hi Stefan. If you are using a child theme, add this to your functions file

      /* Removes the excerpt_more filter */
      function custom_remove_auto_excerpt_filter() {
         remove_filter( 'excerpt_more', 'twentyeleven_auto_excerpt_more' );
      }
      add_action( 'after_setup_theme', 'custom_remove_auto_excerpt_filter' );
      /* Adds a pretty "READ MORE" link to custom post excerpts. */
      function custom_auto_excerpt_more( $more ) {
          return '… ' . custom_continue_reading_link();
      }
      add_filter( 'excerpt_more', 'custom_auto_excerpt_more' );
      /* Returns a "READ MORE" link */
      function custom_continue_reading_link() {
          return ' <a href="'. esc_url( get_permalink() ) . '" rel="nofollow">' . __( 'Fortsetzen Lesen <span class="meta-nav">→</span>', 'twentyeleven' ) . '</a>';
      }

      Not sure if I spelled it right, I used Google translate. If your theme doesn’t have it’s own functions.php file, create one and make sure to add the opening php tag at the top

  5. Pingback: Show Excerpts and Post Thumbnail Twenty Eleven Theme – Ein paar Anpassungen am Child-Theme! | BLOG

  6. Pingback: 7 New Post/Page Features You Should About | webkracken

  7. Your articles are always awesome.
    How can this be applied to show multiple images (with the excerpt)?
    I tried adding two(2) featured images, but the latest image just replaced the previous one.

    • Hi Olaoluwa. I don’t think it’s possible to display 2 featured images in a post. There is probably a way to display images included in the post (I don’t know how without reading up on it), but there is only meant to be one featured image.