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

<?php if ( is_search() ) : // Only display Excerpts for Search ?>

1	<?php if ( is_search() ) : // Only display Excerpts for Search ?>

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.

<?php if ( is_search() || is_home() ) : // Display Excerpts for Search and Homepage ?>

1	<?php if ( is_search() \|\| is_home() ) : // Display Excerpts for Search and Homepage ?>

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

<?php

// Add 140x140 image size 
add_image_size('excerpt-thumbnail', 140, 140, true);

<?php

// Add 140x140 image size

add_image_size('excerpt-thumbnail', 140, 140, true);

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

<div class="entry-summary">

1	<div class="entry-summary">

Below this line add

	<!-- Adds the 140x140 thumbnail/featured image -->
		<div class="excerpt-thumb">
			<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
			<?php the_post_thumbnail('excerpt-thumbnail', 'class=alignleft'); ?>
			</a>
		</div>

<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">

<?php the_post_thumbnail('excerpt-thumbnail', 'class=alignleft'); ?>

</a>

</div>

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.

<?php the_post_thumbnail(); ?>

1	<?php the_post_thumbnail(); ?>

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

<div class="entry-content">

1	<div class="entry-content">

Below it add

<!-- Adds 140x140 featured image to single post view -->
<div class="excerpt-thumb">
	<?php the_post_thumbnail('excerpt-thumbnail', 'class=alignleft'); ?>
</div>

<?php the_post_thumbnail('excerpt-thumbnail', 'class=alignleft'); ?>

</div>

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.

// Remove the ... from excerpt and change the text
function change_excerpt_more()
{
  function new_excerpt_more($more)
	{
	// Use .read-more to style the link
	  return '<span class="continue-reading"> <a href="' . get_permalink() . '">Continue Reading &raquo;</a></span>';
	}
  add_filter('excerpt_more', 'new_excerpt_more');
}
add_action('after_setup_theme', 'change_excerpt_more');

// Remove the ... from excerpt and change the text

function change_excerpt_more()

{

function new_excerpt_more($more)

{

// Use .read-more to style the link

return '<span class="continue-reading"> <a href="' . get_permalink() . '">Continue Reading »</a></span>';

}

add_filter('excerpt_more', 'new_excerpt_more');

}

add_action('after_setup_theme', 'change_excerpt_more');

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.
Download

139 thoughts on “Display Excerpts in Twenty Twelve Theme”

It’s in maintenance mode but i can deactivate if you need to see.
I have code I added for the caption of he featured image to show.
How do I not allow that to show on index page.

Also, the continue reading link is gone when I use the excerpt option.

Also, if I use an ordered list in the post, the format is gone in the index page.

Hi James, the continue reading link should automatically display. If it’s not, make sure you’ve added the code mentioned under “Adding the Continue Reading Link”

All html is stripped from the excerpt, that’s a WordPress feature. Check the old forums (link in the sidebar) for posts on adding live links to excerpts, or allow html in excerpts, there are a few posts that explain how to allow html within it.

If you don’t want thumbnails displayed then skip the part that says to add

    <!-- Adds the 140x140 thumbnail/featured image -->
        <div class="excerpt-thumb">
            <a href="<?php the_permalink(); ? rel="nofollow">" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
            <?php the_post_thumbnail('excerpt-thumbnail', 'class=alignleft'); ?>
            </a>
        </div>

<a href="<?php the_permalink(); ? rel="nofollow">" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">

<?php the_post_thumbnail('excerpt-thumbnail', 'class=alignleft'); ?>

</a>

</div>

Open a forum post if you need any more help with this, the comments are becoming overwhelming

Hi, thanks for a fantastic tutorial, I have one quick question – How can I set the length of the excerpt?

I’ve tried using the traditional way that seems to be on all the forums

function twentytwelve_excerpt_length( $length ) {
return 40;
}
add_filter( ‘excerpt_length’, ‘twentytwelve_excerpt_length’ );

function twentytwelve_excerpt_length( $length ) {

return 40;

}

add_filter( ‘excerpt_length’, ‘twentytwelve_excerpt_length’ );

but it doesn’t seem to work since adding in the rest of your code. Any help would be appreciated.

Zeaks says:

2013/05/11 at 10:40 pm

Sorry for the late reply, I just noticed your comment. Check the forums, search for “live links in excerpts” there’s some code that will help you modify the excerpt any way you want.

Reply

Hi tnx allot for your help! I learned alot. Still something went wrong when i added the code for: reading more text it doensn’t appear. I did exactly what you did.

// Remove the … from excerpt and change the text

Zeaks says:

2013/05/01 at 4:55 pm

Hi Niel, are you trying to create manual excerpts or allowing the theme to create them for you?

Reply

Thanks. Very useful information

Hey awesome guide. It made my site look great. I had two questions to ask you:

1) How can you make a small boarder (either white or black) around the thumbnail picture?

2) How can you make it so when people click on “archive” or a category, all your posts there also are displayed the same way with an excerpt and thumbnail? Instead of the full post as it is by default.

Thanks a million!!!

Zeaks says:

2013/05/10 at 8:32 pm

You can use is_category to display them on category pages like this

<?php if ( is_search() || is_home() || is_category() ) : // Display Excerpts for Search and Homepage ?>

1

<?php if ( is_search() || is_home() || is_category() ) : // Display Excerpts for Search and Homepage ?>

Read here for more info on displaying them in other areas of your theme http://codex.wordpress.org/Conditional_Tags

You can add a border or style the image by using the .excerpt-thumb class like this

.excerpt-thumb img { border: 2px solid #000000; padding: 2px; }

1
2
3
4

.excerpt-thumb img {
border: 2px solid #000000;
padding: 2px;
}

Reply
1. acrobat says:
  
  2013/05/12 at 9:57 pm
  
  Awesome! That worked like a charm.
  
  What about changing the color of the “continue reading” to a custom color?

You can use .continue-reading a { color: #000; } to change the color of the link.

Hi. Been using this for a month or so know and love it. One question though,

If there is no “featured image”, how do I remove the blank space on the excerpt where the image shoul dbe: see http://www.inmotionphysio.ie/wip/category/physiotherapy/

Zeaks says:

2013/05/14 at 4:34 pm

Hi Noel, in your CSS you’ve used
.entry-summary p {
padding-left: 165px;
}
Remove it and add a right margin or padding to the thumbnail image instead if you need to adjust.

Reply
1. Noel O'Connor says:
  
  2013/05/14 at 6:22 pm
  
  So sorry, how stupid of me. Totally missed the obvious CSS change I made myself. Thank you for your reply and help.

Thank you so much for this useful post

Zeaks Blog

Wordpress Themes Tips and Code Snippets

Display Excerpts in Twenty Twelve Theme

Use a child theme

Edit Template files

Use a smaller thumbnail

Add new thumbnail to the loop

Adding the Continue Reading Link

Like this:

139 thoughts on “Display Excerpts in Twenty Twelve Theme”

Leave a Reply - Use <pre>YOUR CODE</pre> when posting code. Cancel reply

Use a child theme

Edit Template files

Use a smaller thumbnail

Add new thumbnail to the loop

Adding the Continue Reading Link

Share This

Like this:

139 thoughts on “Display Excerpts in Twenty Twelve Theme”

Leave a Reply - Use <pre>YOUR CODE</pre> when posting code. Cancel reply