Display Excerpts in Twenty Twelve Theme

Here’s how you can make Twenty Twelve theme show excerpts instead of the full post. I’ll also show you how you can display a smaller thumbnail on the homepage, and remove the featured image from the single post view as well as add and customize a “Continue Reading” link.

Use a child theme

As always, it’s a good idea to create a child theme when making modifications to Twenty Twelve (or any default WordPress theme). Here’s a help article on how to crate one, there’s a blank child theme you can download at the bottom of the post. How to create a WordPress Child Theme

Once you’ve done that, copy content.php from Twenty Twelve to your child theme folder and open it.

Edit Template files

Open content.php and around line 33 find

This conditional tells your theme to display excerpts only for the search page. To make it also display them on the home page add is_home to it like this.

Save and close content.php and refresh your site. You should see posts displayed as excerpts, but there’s more you can do.

The next part is totally optional. I’ll show you had to add a 140×140 thumbnail instead of the large one Twenty Twelve uses, and also how to display a “Continue Reading” link at the end of the excerpt.

Use a smaller thumbnail

Create a file called functions.php (if you already have one, add this next code to it) and open it.

We’re going to use a 140x140px size thumbnail so we need to tell WordPress to create this thumbnail size for any images that are uploaded.
Add this to your functions.php

Save functions.php but leave it open, there’s more code to add to it later.

Add new thumbnail to the loop

Open content.php and on line 34 fine

Below this line add

This adds the thumbnail to the excerpt, aligns it to the left and links to the post. I’ve also added a css class so you can style the thumbnail if you want. Use .excerpt-thumb to style it.

If you save content.php and refresh your site, you should see a smaller post thumbnail, but also see the normal featured image above the posts as well. This needs to be removed, so in content.php go to line 18 and remove this line.

Save and close content.php and refresh your site. The large featured image should be gone, leaving only the left aligned 140x140px thumbnail. If you click on a post, the featured image should also be gone from there as well.

If you do want the featured image to display on the single post view as it does in the excerpt here’s how you can add it.

In content.php just below where we added the post thumbnail code, around line 41 find the line

Below it add

Save and close content.php. You should see the left aligned post thumbnail in the content on the single posts page.

Adding the Continue Reading Link

By default the excerpt will only display […] at the end of the text. If you want a linked “Continue Reading” link instead, open functions.php and add this below the code we added earlier for the new image size.

This removes the […] and replaces it with our own text, hyperlinks it to the post, and also adds a css class so you can style the link if you like.
Modify the text however you want, and use .continue-reading in your style sheet to customize the link.

Save and close functions.php and view your website. Here’s a preview of what it the finished results should look like.

twenty-twelve-excerpts

If your thumbnail images are not displaying the proper sizes, it’s because WordPress hasn’t created that size images yet. You can fix this by installing one of my favorite plugins Ajax Rebuild Thumbnails and running it once. It can be deactivated after that.
This plugin simple creates the 140×140 image size (or whatever image size you selected) needed for previously uploaded media.

Hope this tutorial was helpful to you. Here’s a child theme with the above code already added, use it however you like.

228 thoughts on “Display Excerpts in Twenty Twelve Theme

  1. Pingback: HOW TO DISPLAY EXCERPT ON BLOG PAGE – WORDPRESS TWENTY FOURTEEN THEME | Sociology Remix

  2. Pingback: How to display excerpt on blog page – WordPress Twenty Fourteen Theme | Sociology Remix

  3. Jameela

    Hi and thanks for the tutorial, i’ve followed your instructions and i’m getting there slowly. However this part (below) doesn’t work for me because there is no such code on line 18 or anywhere else apart from the one we inserted oursleves on line 34:

    “If you save content.php and refresh your site, you should see a smaller post thumbnail, but also see the normal featured image above the posts as well. This needs to be removed, so in content.php go to line 18 and remove this line.

    Save and close content.php and refresh your site. The large featured image should be gone, leaving only the left aligned 140x140px thumbnail. If you click on a post, the featured image should also be gone from there as well.”

    The large featured image is still there and i would like to remove it what can i do please? here is my email: newtoblogtown@gmail.com

    Thank you so much again

  4. Pingback: Display Excerpts in Twenty Twelve Theme | Jimmy Knoll

  5. Venkat Sure

    I really appreciate this post. I was trying to find a solutions for all the above. I found the 3 solutions that are needed for my blog. twenty twelve looks really professional for normal content blogs.

    Thanks for the share.

  6. Henk

    Hey, great tutorial… The only problem is that i only get 1 post on the FrontPage…. Normally i can change it at settings > reading… but if i change it there and i save it … it just doesn’t respond :O i’m just looking if i can change it in the code… but can’t really find it :( Anyone with the same problem?

  7. Jamie Graham

    This was fantastic help, thank you very much, I really like the way you always write “Find the line” before telling us where to put the code.

    It is very useful as some people overlook the fact that a lot of people trying to edit their files are completely new to it!

    I have now successfully implemented it all into my posts page making my twenty twelve theme look neat and tidy!

    Many Thanks :)

    1. Zeaks

      Hi Vivian, make sure you’ve added

      under the entry title code.

      Also make sure you’ve selected a featured image for your posts.

      If you can’t get it working, post your code from functions.php, and content.php to pastebin.com and I’ll have a look.

  8. Karen

    Thank you! I had a problem with WordPress after I installed a plugin. Deactivating the plugin didn’t fix it. Must have been a problem with the theme because when I activated the default 2012 theme, the site was back up, though not nice looking.

    Some parts of my wp-admin pages were locking up so I decided to just do a fresh install. Your tutorials really helped! I’m glad I’m relying on the twenty twelve theme now instead of some free theme that was showing its age. And I finally learned how to make a child theme so I’m not as worried anymore if something goes wrong again, as long as all my posts are backed up. I have about 40% work left, but most of that is installing plugins and configuring plugin settings.

    Thank you again. Your site has been a great help!

  9. Karen

    Your site has helped me when I had to create a child theme from scratch! Thank you. Special mention here: http://www.baratako.com/barat-ako-is-back-online/

    If you don’t mind, how can I make sure the post excerpt on the front page doesn’t cut off the thumbnail? If you scroll down the front page, you’ll see that posts with not enough text have the horizontal lines cutting off the picture on the left. I’m using the Twenty Twelve theme and I followed your instructions above. The only changes were I set the image to 200 x 150 and 500 x 375. To reduce work, I’m setting all of my pics to 4:3 ratio moving forward to avoid cropping problems.

    Thank you again. You’ve been such a great help.

    I’m going to get some rest. I’ve been at this for 3 days straight with minimal sleep. I’ll be back in a few hours in case you have follow up questions. Thank you!

  10. Nicki W.

    This helped me TREMENDOUSLY!! I accomplished within 10 minutes what I’d been trying to find out how to do for an entire day!

    Only question I have left is, how do you accomplish the following:

    1. Place the title of the blog post at the top of the excerpt.
    2. Place the title of the blog post at the top of the post?

    1. Zeaks

      Hi Nicki. The post title should already be there. The section in content.php that controls that looks like this starting around line 24

      This basically says if it’s a single post (after you click the post) show the unlinked post title, otherwise display the post title linked to the post.

      If you do not have this in your content.php you may have removed it by accident. You can post your content.php file at http://pastebin.com and link it here and I’ll take a look for you if you want.

Leave a Comment

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

*
*