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 ?>

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 ?>

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);

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">

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>

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(); ?>

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">

Below it add

<!-- Adds 140x140 featured image to single post view -->
<div class="excerpt-thumb">
	<?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 »</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.

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.

226 thoughts on “Display Excerpts in Twenty Twelve Theme

  1. Rogger

    hello, its really nice to have a blog for all our needs on wordpress. i want some guidelines from you on twenty twelve. I am facing some problems.
    1. I had made a child theme of twenty twelve now how to add all this code in my child theme because there are no files of function.php and content.php. i tried my best to read the tutorials but no success.Hope you will help me in a better way.
    thanks

  2. Rogger

    Thanks alot Zeaks for your immediate response. Can i ask you the style sheet that you used for fonts and links showing on your site or if possible ( not hurts you) then please pass me the code. i love your fonts and links style. :-)

    1. Zeaks

      Add it to your child theme.
      Add this near the top of your css under the @import call for twenty Twelve
      @import url(http://fonts.googleapis.com/css?family=Titillium+Web);

      Then use font-family: ‘Titillium Web’, sans-serif; for whatever area you want to use that font.

      I used a different way of doing it, I was trying to make the fonts look better IE and Chrome. I used http://www.fontsquirrel.com/ for this, it’s a bit more complicated for almost the same results.

    1. Zeaks

      If you’re referring to the child theme I’ve created using the tutorial, just upload it to Appearance > Themes > add new, install it like any other theme. Or extract it and upload it to wp-content/themes.

  3. Sarah

    Is there a way to make it so the featured image that shows up on the main page does not appear in the single post? I already have images in my post and do not need the extra featured picture in there. Since I’m modifying the theme here I cannot find anything in the single.php about it. Thanks! Last question.

  4. Zeaks

    Sorry Sarah, I thought you were using Twenty Plus Lite for some reason so that line would not be in single.php.
    Could you link your site so I can take a look? The CSS should of worked for Twenty Twelve as well.

  5. Ken de Baker

    Hi Zeaks,

    First off; I really like your blog and I used it a lot modifying my own site.
    I managed to insert the excerpt, but now I would like to remove the Meta (‘this entry was posted in XX on YY’) information below the excerpt. But I do want this information under the complete content page. Do you know how to do that?

    1. Zeaks

      Hi Ken.
      To edit the meta information, you’ll need to copy the entire meta function from twenty twelve theme and add it to your child theme. Open functions.php of twenty twelve, and search for

      function twentytwelve_entry_meta() {

      copy the entire function right down to just before the endif and paste it into your child theme functions.php file.

      Twenty Twelve does not use classes around each section of the meta information, and the call for it in content.php is

      < ?php twentytwelve_entry_meta(); ?>

      so there’s really not much you can do with it as is.

      The way to get around this is to add classes around each section of the meta info, or just around the section you want to hide. Then use display:none in your CSS to hide it on the front page while allowing it to show on the single post page.

      Here’s a Pastebin link for the function with the class .meta-info already added for you. Add it to your function.php
      http://pastebin.com/YdXzGCrW

      Once you do that, you can use this in your style.css to hide it

       .home .meta-info { display: none; }

      You could probably just remove the call in content.php, but doing it this way gives you complete control over the information displayed.

  6. Arif

    Hello zeaks, i’m arif and thanks for the tips, but after i practice this tutorial, it’s still not work for 140×140 thumbnail. Something wrong? where i have to put the code in “function php”? see my blog at nggak.com, and thanks for you help :)

  7. joecart

    Thank you for this it works great and as usually your instructions are very clear and informative.
    Only strange effect is that after it is implemented only new blog post excerpts float to the right of the thumbnail. I can get others to do the same only by deleting the previous featured image and selecting a new one.
    This is not a major issue for me as I have only just recently started setting featured images – though I intend to continue to do so. Currently I am only trialling these mods on my development machine using WAMP – not sure if that is of any significance.
    Thanks again.
    Joe

  8. Eric Stauffer

    Hi Zeaks,

    Great post! This helped me out immensely!

    Question – I followed the instructions to create a thumbnail on the homepage, but when I hover over the image it says “Permalink to (post title)” Is there anyway to remove the “Permalink to” text?

    Also, is there a specific reason you chose 140×140 for the thumbnail size, or is that just preference?

    Thanks!
    Eric

  9. Richard

    Firstly, a big thanks for posting this tutorial. It’s exactly what I needed to get twenty ywelve just the way I want it.

    Just one question. Could you explain why there is no closing question mark and bracket at the end of your functions php? I thought it was necesary to close these commands (just tryng to learn here !)

    Thanks again for sharing and keep up the good work.

      1. Dena

        Amazing, your instructions were so simple, I did it on my own.

        However, just a note, the php line (in stars below) at the top of function code to resize the featured image was messing things up. Once I removed that, it was all good.

        *** < ? php ***

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

  10. Zeaks

    Hi Dena, the opening php tag would conflict with you functions if you already had one in your functions file. This tutorial assumes your working with a new empty file. Thanks for pointing it out though, glad you got it working :)

  11. Marc

    Thanks a lot for this post and your other tutorials ;)

    I was just wondering, why choose 140×140 size when there is already a 150×150 size existing by default ?

    For a similar size, we just have to change excerpt-thumbnail by thumbnail in this line “” in content.php.

    Then we don’t need to create the new size in functions.php and there is no need to resize existing thumbnails with an extension ;)

    Am I good with this or is there some possible issue I don’t know ?

    Thanks a lot.

    1. Zeaks

      Hi Marc. You’re free to use whatever size thumbnail you want. I wanted to include the information on how to add the new image size because not everyone will want to use the default sizes. Some users like a large image above the excerpt, some prefer a very small image, whatever the size might be the tutorial shows how to add it.

      If 150×150 works for you then yes you can leave the add image size out of functions, I’ll add that information to the post. Thanks!

  12. Jame

    Thanks! It ticks to my point that I need. I have some more issue need to ask:
    – How could I apply this to all my pages such as author, category, date, tag, and archive pages?
    – I have a sticky post/featured post on my front page; how could I except this post to show full not excerpt like other posts?

    Regards,
    Jame

    1. Zeaks

      Hi Jame, in the second part change

      < ?php if ( is_search() || is_home() ) 

      add the conditionals for where you want excerpts to display. http://codex.wordpress.org/Conditional_Tags
      example

      < ?php if ( is_search() || is_home() ) || is_category()

      You'll need to use a similar method to display the sticky post as full, while the rest are excerpts,. jere's a forum post that explains how to do it, you;'ll need to know a bit about php and the WordPress loop to add it to your theme.
      http://wordpress.org/support/topic/how-do-i-change-the-excerpt-setting-for-a-sticky-post

      If you can't get it to work, open a forum post and I'll take a look.

      1. Jame

        It works like a charm for this code, and it is show the excerpt style for all of the pages including tag, category, author, date page because is_archive() is including all of those pages.

        <?php if ( is_search() || is_home() ) || is_archive()

        For the sticky to show full post, I can’t make it to work, so I’ve posted in the forum with my codes.
        Thanks so much!

        Jame

    1. Zeaks

      Hi Pim, a few comments above explains how to display excerpts with thumbnails for categories using the is_category() conditional. If you’re unable to figure it out, please open a forum post and paste your code to pastebin.com so I can view it.

  13. Brandon

    Zeak!

    Thanks again for another great tutorial!!!

    I do not usually set featured images. Instead I usually just upload an image to the post, is there a way to have the first image used as the thumbnail?

    thanks!
    Brandon

    1. Brandon

      Ucesy,

      Did you read the tutorials? He starts off explaining that it is recommended to use a child theme, this will ensure that the tweak is not lost during a theme upgrade. Also it ensures that your site is not compromised, if you do cause an error when adjusting css files.

  14. Andrew

    Hi, thank you for a great post! I actually used the Download you suggested – thank you.
    However, I encountered 2 issues:
    1. when I upload image via Set featured image, the image shows up in excerpt, BUT on a post page it also looks like thumbnail (same size as in excerpt)
    2. when I upload image via Add media, it shows up in a single post page like it should be (not thumbnail), BUT the excerpt does not contain the image thumbnail :)

    What should I do? I would like to have thumbnail in excerpt, but when a post opens – image shows as usually

    BR, Andrew

    1. Zeaks

      Hi Andrew. Thanks for bringing this up, this is something I should of mentioned in the tutorial. Check back later today and I’ll update the post and include this option.

      **I quickly just checked this out. In the tutorial I’ve used the left aligned 140×140 image on single post view. I probably should of left it and used the default size image. Here’s how to change it back so it displays the large featured image on single posts.
      Open content.php find this around line 19

      < ?php if ( is_single() ) : ?>

      Directly below it add

      < ?php the_post_thumbnail(); ?>

      Scroll down to around line 44 and find

      Below it remove this section of code

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

      Save and close content.php. Now your single posts should display the large featured image at the top as usual. If you don’t want it to display at all, skip the first part where you added the post thumbnail under if is_single

  15. nev

    Brilliant - thanks for this. But one question:

    You write, “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.” – and you give the instructions.

    What do I do if I want the full-sized featured image to show at the top of the single post view (instead of the 140px square thumb)?

  16. nev

    I’m wondering if you have any idea how I would achieve this alternative approach to the twentytwelve homepage.

    How I’d like to present each post on the home page, is to have, for each one:

    • The post’s title (obviously a link to the post) – as the twentytwelve displays this by default.

    • The first image in the post (as my twentytwelve theme displays by default, since I always start my posts with an image anyway) – and have this image as a link to the post, too.

    • The “excerpt” text beneath that (with its “continue…” text).

    Any ideas?

  17. nev

    I guess I mean – just make Twenty Twelve theme show excerpts instead of the full post (as you describe at the beginning), but also, above that excerpt, show the first image used in the post, full-size.

    Possible?

    1. Zeaks

      Hi Josh. This is true, thanks for pointing it out. The only problem with that is each post would need that tag in it, that can become very tedious if a site has hundreds of posts. It does allow a more customized excerpt though.

  18. Sarah

    I just updated my wordpress and now the images from my excerpts are showing up again in the actual post. Do you know how I can fix it back to not showing the featured image in the post?

    Thanks

  19. Adam Knell

    I am having problems with getting the thumbnail to work on the Home article preview page. I have entered all the code and refreshed the page (even clearing the cache) and it still doesn’t display.

    Have I missed anything else out?

  20. James

    Hi!
    I just did as you said.
    I copied the code below the in content.php but the problem is that the featured images next to the post look very large.
    I want it to look small i.e 150×150 pixels
    please tell me what to do

  21. joecart

    Hi Zeaks,
    This is working very well other than one small point which I am not sure if you can help me with. If I select a featured image from a normal wordpress gallery then the excerpt thumbnail is displayed with its text on the right. However if I select a featured image from a NextGen Gallery image as a featured image then the excerpt text appears below the thumbnail.
    Not sure if you have run into this before and if there is a possible solution?
    Joe

    1. Zeaks

      Hi Joe, the Nextgen gallery might be adding or removing a class to the thumbnail. If you have firebug , inspect the Nextgen image and view the class, it should be alignleft. If you don’t know how to do this, link me an example and I’ll take a look.

  22. joecart

    Thanks for your help Zeaks,
    It took a bit of hunting but after adding the code below to my style.css the problem was fixed! :

     img.wp-post-image{
    	float: left;
    	margin: 0.857143rem 1.71429rem 0.857143rem 0;
    	} 
  23. Ryan

    Hi Zeaks,
    Great post here, but a couple funky things I found after implementing.
    See dev site http://66.117.14.56/~bibleg6/
    -there are 3 posts, the first I put in a More Tag directly in the post.
    -the second seemingly took on the change_excerpt_more() function and it is working properly, but the
    content is not formatting according to the full post formatting (no More Tag in this one)
    -the third has neither the More Tag or the correct output of change_excerpt_more()

    Why is it that the function is not working for the first and third posts but is for the second? I want them
    to all behave like the second one with the Continue Reading in place.

    Thanks
    Ryan

    1. Zeaks

      Hi Ryan, using the more tag defeats the purpose of using this code, this code also does not add a continue reading link to the more tag excerpt. It’s designed to display excerpts automatically. and cut them off at a certain word limit.

      I’m not really sure what’s up with the third post, but you’re using long stings of XXXXXXXXXXXXXXXXXXXXX so it may be considering that to be one word and causing issues. Try creating tests posts using dummy text from http://www.lipsum.com/ then review your results and let me know.

      1. Ryan

        Wow, thanks so much for the prompt reply.
        I know about the More Tag, just wanted to see how it compared.

        I deleted the other two dummy posts I had, then added a more formatted one and it worked.
        Interesting, seems the lack of words and line breaks does something funky to break it. Oh well, it
        works now!

        Another quick question for ya—–how can I set the max length of the excerpt to show?

        Thanks again

  24. Ryan

    Nevermind, figured out both my questions. http://codex.wordpress.org/Glossary#Excerpt
    Little did I know there is a built in admin function for excerpts, as a screen option that is hidden by default
    on the edit post screen.
    With your addition the excerpt is default of 55 words, and will not render markup. However it is automatic.
    With the admin excerpt function in use when editing a post, you have to put in the exact text for the excerpt, however it allows for markup and a more precise snippet.
    This was way more in depth than I realized.
    http://codex.wordpress.org/Excerpt, poses problems with child themes cause the parent is read second and redefines the functions.

    Anyway, thanks very much for your insight, I got it working both ways.

    1. Zeaks

      Great to hear. The tutorial was more or less aimed at displaying simple excerpts on a site that already has posts. Adding custom excerpt functions to your theme can go a long ways, display shortcodes, html, links, images and control the length, but creating them manually always gives much more control as you’ve discovered.

  25. Lukeup

    Hi, thanks for the help with the code. Works great but I had to use Thumbnail for Excerpts to get the thumbnails to show even after using Ajax Rebuild Thumbnails. One issue I need help with, several of my posts have a youtube video and a Nextgen slide show. Is there any way to ignore these posts so the entire post still shows?? The code only shows the title of the post and does not show the slideshow or video. Appreciate your time, Luke.

  26. Dave

    Hi and thanks for a great tutorial! Im buildning my site offline so I dont have a link. I did what you wrote but instead used a 600×140 image and positioned it with aligncenter instead of alignleft. Looks ok! BUT is there a way to have the .entry-title, the title of the post to show up in the top right corner of my image as an overlay with a backgroundcolor of light grey and opacity of 0.7?

    Thanks!

    Dave

  27. Adam Green

    Hello there – great tutorial, really helpful.

    I find that when the featured images are different sizes and proportions, they all resize along one side only, so they are all 140px wide but some are 87px high or 60px, etc. Any way to regularise them? Thanks.

    1. Zeaks

      At the bottom of the article where it talks about Ajax Rebuild Thumbnails. Install that and run it once, it will create proper image sizes. The reason the images are not all the same size is because your WordPress hasnt created this particuar size yet and that is just what this plugin wil do.

      After that any new images will be created with the new size.

  28. Mike Turco

    That was an excellent tutorial! I’m using quite a bit of your code on my site and it works great.

    One quick comment: I had a functions.php file in my main twenty-twelve theme. The way WP seems to work is that it executes the man theme functions.php and then the child form file of the same name. In other words, both files are executed.

    Therefore, I created a new (blank) file, functions.php, in my child theme and added code to that.

    Mike

  29. Rachel Krusic

    Hi Zeaks!

    Thanks for pointing me to this tutorial. I have everything working great now except the images still are not showing. The excerpts are working and the Continue Reading link works and i can also see the 140×140 thumbnail images are being generated on the server fine in the same folder as the large images.

    The only thing i changed on this tutorial was I added to the excerpts conditional line like this so it will work on the category page:

    As soon as i add that line to my content.php and publish it the images all disappear although the excerpts work fine.

    Any idea what i might be doing wrong? Thanks a bunch for your help!

  30. Rachel Krusic

    Hi again,

    For some reason you can’t see the line of code I pasted for the excerpts conditional in my above post. It’s the same code though that you told Hybnost to use in the Default Category Tutorial.

    Thanks

  31. Cindy

    Thanks so much, that was exactly what I was looking for….. I have also been searching on how to have the first post on the page full and the rest excerpt but couldn’t find that…. interested in giving us the instructions for showing a full post for the first post on the page?

    1. Zeaks

      Hi Ali, You can create your own excerpt on the post editor page. Create a new post, at the top click “Screen Options” checkmark “excerpts” then a new text area should be displayed under the post editor, add your excerpt there. If your theme supports it, it should display it.

  32. Kristin

    Hi! I just wanted to ask if you ever have any issues with hackers?
    My last blog (wordpress) was hacked and I ended up losing several weeks of hard work due to no data backup.
    Do you have any solutions to stop hackers?

    my blog post :: Kristin

  33. James

    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.

    1. Zeaks

      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

          
              

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

  34. Martin

    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’ );
    

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

  35. Niels

    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

  36. acrobat

    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!!!

    1. Zeaks

      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 ?>

      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;
      }
  37. ameliahallsworth

    Thank you for the post! However, i’m very new to wordpress and have been trying to find where my template (twenty twelve) is so that i can edit it. When you say “open content.php” etc.. I dont know where to find any of things, iv’e been searching for hours, would appreciate your help

  38. felix

    hi zeaks, thank you so much, i´ve succesfully worked in your code,also for the categorys, but now the content on my other “normal” pages won´t be displayed anymore… i am new to WP and i didn´t find something working for me under the conditional tags codex…you may got an idea?

  39. Nicki

    Awesome tutorial! I can’t seem to get my thumbnail in a smaller size. When I add the code you specified to functions.php I get an error and my whole site goes down? Do you know why?

    1. Zeaks

      I would have to see the error, open a forum post, copy there error it will be easier to help.

      Usually the thumbnails need to be regenerated to display the proper size as mentioned at the bottom of the post.

  40. bonica

    Hi, thank you for posting this.

    I added this code to my content.php file: )

    My blogroll now displays excerpts, but there are no images displayed with the excerpts.

    How do I enable images to show up when my blogroll is set to excerpt?

    1. Zeaks

      You’ll need to set a featured image for your posts to display a thumbnail. Click edit on an existing post or create a new post, on the right side of the post editor page look for “Set Featured Image”

  41. Bodhost

    On which line we have to put this code in functions.php. I am able to see only post with Excerpts effects but not the thumbnail. I have included all other code vey carefully.

    <?php

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

  42. Andrew

    Hi Zeaks,
    Helpful post, thanks a bunch. I can’t believe the default theme would need this tweaking though.. I’m having a issue with the permalink from the continue reading link or the link from the featured image. It takes me to the Post with the Post title, and comment, but no content..?

    I can’t share a link, unfortunately as it’s on a secure site. I’m looking into my content.php to check things out. I haven’t made any other edits that what you’ve described above.

  43. Colleen Greene

    Correction…works perfect in Chrome, Firefox, and Safari — on both OSX and Windows 7. Doesn’t work right in IE 10 on Windows 7. The images don’t resize (see example here, using IE). I assume this is that whole IE issue with Twenty Twelve? Any idea on a fix, while I’m trying to fix all of the other IE issues?

    1. Zeaks

      NomNom theme is a child theme of Twenty Eleven with many options. Other than that there are a few free ones of twenty Twelve but none with any options Twenty Plus pro doesn’t already have.

      I do plan on creating more in the future

  44. Adam

    Thanks – I had to do a lot of searching to find this information. Tons of people asking the question, but not many detailed answers! It baffles me that the developers of WordPress haven’t added an easy way to enable the excerpts on the homepage… seems like something that should have been done years ago!

  45. lossecorme

    I’ve been searching for a day to any article on how to change the size of the featured image. Thanks to your article I not only manage to do this, but also got a ‘continue reading’ link and excerpt view (which was next on my todo list). Thanks! :D

  46. Andy

    Hi, I am using your instructions and it works very well! Need to change thumbnail to 200×200, but changing in Twenty Twelve Excerpts functions.php file – does not change the size on the site. Where could be a problem?

  47. Zeaks

    Id have to view your template files this tutorial is for Twenty twelve. If it works like Twenry Twelve then you could just add is_archive to the line in content.php

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

    If not then you may need to modify the archive or category.php file.

  48. Mark Hemmingson

    Thanks for this tutorial, Zeak. Its taught me a lot.

    Everything works perfectly, although I have one small thing to fix. When I use a sticky post on the front of my blog the Read More does not appear on my sticky only. Can you Help? Thanks if you can.

    I’m on a localhost, so I can’t post a website address.

  49. Zeaks

    It is possible, just change the size of the post thumbnail in functions to whatever you want

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

    Then to change the image size on single posts you’ll need to create a new image size like this in functions.php (put it right below your excerpt thumbnail code)

    Create a new image size like this, also creating a new image size name such as single-thumbnail

    add_image_size('single-thumbnail', 300, 325, true);

    The single code for twenty Twelve is also in content.php, around line 21 look for

    		
    < ?php the_post_thumbnail(); ?> < ?php if ( is_single() ) : ?>

    the_post_thumbnail part is the section we need to change. Change it to

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

    I haven’t tested this, but it should work.

  50. Mark Hemmingson

    Hey Zeak – Thanks to you I have formatted my Twenty Twelve excerpts to display with a 140 x 140 thumb, then open to the article with a 225 x 300 image using the featured image. It works great and I’m really happy with this format for my blog role.

    I am using one sticky post as an introduction to my site. Sort of a low-key landing page. Is there a way to make the image in the sticky post bigger? Say, 225 x 300, so the sticky looks a little more special than the rest of the excerpts?

    If you have time to help me with this, great. If not, no worries. You’ve helped me tons already. Thanks.

  51. Zeaks

    Hi mark, I haven’t tried changing the size of the sticky post featured image but the first section of content.php deals with sticky posts.

    	
    > < ?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
    < ?php _e( 'Featured post', 'twentytwelve' ); ?>

    You could probably create your own sticky post in that area.Here’s a forum post that might help you out a bit, it’s dealing with sticky post meta info http://wordpress.org/support/topic/twenty-twelve-child-theme-sticky-post-removing-entry-was-posted

    As for doing it for post format you would have to edit the templates for them such as content-aside.php

    You could probably also do it for a category using something like

    < ?php if (is_category('Category A')) : ?>
  52. 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.

  53. 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!

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

      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

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

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

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

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

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

  60. 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?

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

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

      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.

  62. 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!

  63. 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!

Leave a Comment

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

*
*