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.

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.

206 thoughts on “Display Excerpts in Twenty Twelve Theme

  1. Mark Hemmingson

    At the moment I’m using an Aside, and have hidden the meta with css, So, I have control over the image size. Works for now, but I’ll follow up on the other ideas, because I’d like to figure out how to do it. Thanks again, Zeak.

    Reply
  2. John Girdwood

    Thanks! I like to just use built in themes now because I’m getting older and lazier and already learned all I need to about frequent updates and code editing. This little trick will help me adjust whenever I update my WordPress Theme automatically. Thanks, again!

    Reply
  3. neal

    hi, I just want to clarify that I can do this with my page as I have tried to implement this and all I get is an error. The page in question is the one linked to in my name. This is the default post page on my site as my home page is a static page. I just changed the code to

    replacing home with news.

    At the moment to posts that show a small excerpt are done so by adding the read more funciton into the post. Also I have the changed the setting to “summary” in “settings > reading”

    any help appreciated

    Many thanks.
    Neal

    Reply
    1. Zeaks

      Post author

      Hi Neal, could you open a forum post and explain a bit better, I can’t see any error on your site and the code you posted isn’t showing in the comment.

      Reply
      1. neal

        Hi Zeaks,

        I reverted it back so as to not have an error as I didnt want potential clients seeing it.

        I shall reinstate the error so you can see. If you are still unsure i’ll of course open a forum post.

        Thanks

Leave a Reply