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.

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

  1. Joel

    Hi,

    Thanks for the tut on excerpts. I implemented everything above, step by step, but it somehow throws my layout off. The first post/excerpt/thumbnail looks great, but everything else spills out.

    Any suggestions?

  2. Pingback: Show Excerpts and Post Thumbnail Twenty Eleven Theme | DesignerFied.com

  3. Pingback: Imagen destacada en ‘Twenty Eleven’ | Sin orden ni concierto

    1. Zeaks

      Open content.php and read line 37, remove is_home() || from the line. I’ve commented throughout the theme so things like this are easy to edit.

      I may add an option to control where excerpts are shown in the future, and well as post thumbnails.

      1. Arnie Rowland

        Thanks. I had found that and done so. However, my home page has 1 full post followed by 9 summary posts. If I change the ‘Blog pages show at most’ setting to 1, then the category and other pages that should have excerpts only have 1 excerp…

  4. Arnie Rowland

    I can see that wasn’t too clear. Having made the change as you suggested, the Home page now shows 1 full post and 9 summary posts. The Blog pages show at most’ setting is 10. If I change that setting to 1, then the Home page shows only 1 full post (the desired outcome), BUT other pages (categories, tags, etc.) also show only 1 summary.

    The desired outcome is that only one full post on the Home page, and up to 10 summary posts on other pages (categories, tags, etc.) You can observe this behavior at: http://1568.com/arnie.

    1. Zeaks

      I see what you want to do now. This is not a theme specific issue, it’s how WordPress works. Whatever number of posts you select to show, will also be used for categories too. I will look for a way around this and post back if I find one.

  5. Myrto

    Hi there,

    i wonder if you could help me with this thumbnail problem i have: thumbnail image shows only for the first post

    I realised that I have a strange problem when I try to share a post in facebook.
    From all my posts, only for the first post I created the thumbnail image shows for when I try to share the link in facebook, via a sharing plugin (i.e. shareThis, or sociable), or even when I directly paste the link in facebook myself.
    For the rest of posts I created I get no image at all.
    I should add here that thumbnail image shows when I share pages.
    The problem is only with posts.

    I have build a child theme for twenty eleven, and when I removed it the problem was still there.

    Then I removed twenty eleven and replaced it with Kubrick theme, and the problem was still there.

    I would be grateful if you could shed some light on this

    Regards

    1. Zeaks

      The way this works is you have to set a featured image for a post, then it’ll display as a thumbnail. The other way to do it would pull the first image from the post and use that as a thumbnail. Not sure if you can use both ways. I’ve never tried it the other way but a quick Google search came up with this.

      Open functions.php and add this to it.

      function catch_that_image() {
        global $post, $posts;
        $first_img = '';
        ob_start();
        ob_end_clean();
        $output = preg_match_all('//i', $post->post_content, $matches);
        $first_img = $matches [1] [0];
      
        if(empty($first_img)){ //Defines a default image
          $first_img = "/images/default.jpg";
        }
        return $first_img;
      }

      Set a default image in case your post doesn’t have an image. (3rd line from the bottom)

      Then in the loop (content.php) just before

      < ?php the_excerpt(); ?>

      use this to display the thumbnail.

      < ?php echo catch_that_image() ?>
  6. Pablo

    Thanks for the explanation, it is really clear. What I’m trying to do is to show on the homepage the latest post as full post, and the following ones as excerpts. I found in some places that they do this directly in index.php, but I’m having trouble implementing it with the get_template_part function. Any pointers?

  7. Adam

    Great article that solved my problem with twenty eleven excerpts. However I notice that your replacement text includes a line of code that is not part of the swap:

    I guess for 100% accuracy you should either remove it from the second code block or add it to the first…

    Thanks for the assistance!

    1. Adam

      Hmm, I bracketed my code excerpt with the “code” tag but it disappeared. It’s the last line in the “change it to this” code block that is superfluous (and might mess up an unwary cut-and-paster).

  8. Pingback: WordPress Tutorial For Beginners: Additional Screen Options In...

  9. Pingback: SEO Enterprise-WordPress Tutorial For Beginners: Additional Screen Options In New Post/Page Screens

  10. Pingback: wp-coder.net » WordPress Tutorial For Beginners: Additional Screen Options In New Post/Page Screens

  11. Pingback: A Free wordpress newsletter » WordPress Tutorial For Beginners: Additional Screen Options In New Post/Page Screens

  12. Daniel

    Hi,

    Very helpful post. I’ve added the code in each of the php files, however the featured image is not resized to 140×140. Can you please help? Also, when I try to update the functions.php (from the child theme) I get the following warning:

    /* This sets the dimensions for the thumbnails displayed on the homepage */ add_image_size(‘excerpt-thumbnail’, 140, 140, true);
    Warning: Cannot modify header information – headers already sent by (output started at /hermes/bosweb/web061/b615/ipg.augmentedtomorrowcom/smuchi/wp-content/themes/twentyelevenchild/functions.php:3) in /hermes/bosweb/web061/b615/ipg.augmentedtomorrowcom/smuchi/wp-admin/theme-editor.php on line 103

  13. Knuth Becker

    hi zeaks,
    The code doesn’t seem to work for me. I’ve created a child theme with the style.css, fuctions.php, and content.php. The funtions.php part seems to fail for me. When I try to upload and select the child theme, it at the top says

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

    just as the functions.php part, and didn’t displayed any excerpts. I also tryed to import the functions.php code from twenty eleven and then enter the

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

    then it displayed a “Fatal error”
    don’t know what to do :(
    -knuth

  14. Zeaks

    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.

    1. Brian

      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.

      (Haenchenb9@gmail.com)

  15. Mitch

    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.

  16. Stefan

    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

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

    1. Zeaks

      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 ' ' . __( 'Fortsetzen Lesen ', 'twentyeleven' ) . '';
      }

      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

      1. Stefan

        Thanks a lot Zeaks. :D

        German is worst for learning, even for German native people. The speeling might be correct, but correctly it calls “weiterlesen” ! ;)

        I’ll give your additional posted Code-Snippet a try, and if i had trouble with it i will come back, to ask for some help.

        If you not seen it, i post a translated Version of your original Post for all the German Users that arent not that good in English. And i made some Links, back to you and the article. :)

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

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

    1. Zeaks

      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.

  20. Hortensia

    Hello!
    And Great Learning!
    I just have one question…..
    I have included your code to show excerpts on my archive pages, bur how can I get the title to appear to the left to the image where the excerpt is located instead of having it above the image?
    Thanks!

  21. sonal

    hi Zeak,
    i am facing the problem regarding the thumbnail on static page.
    after so many trials ,still it is not working properly.i mean only excerpt is working no thumbnail is der.
    can u pls help.
    thnks

  22. thevode

    NIce!, thanks, but I have a question. I’m using the actual version of Twenty Eleven and the excertp works, and the Ajar Plugin too, but not show the thimb, where I have to paste this code?:

    // This sets the dimensions for the thumbnails displayed on the homepage
    	add_image_size('excerpt-thumbnail', 140, 140, true);
    
    I have pasted it just above:
    
    function twentyeleven_excerpt_length( $length ) {
    	return 100;
    }
    add_filter( 'excerpt_length', 'twentyeleven_excerpt_length' );

    Into the functions.php 336 line.

    Thanks and congrats for your site!

  23. Alex

    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.

  24. Ray

    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.

    1. Zeaks

      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.

      1. Ray

        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 Comment

Your email address will not be published. Required fields are marked *

*
*