Skip to content



How To Display Manual Excerpts On Your Home Page

Code Is FunOver the last week or so, I’ve been talking a lot about using excerpts and More Tags on your blog, as well as customizing the Read More link displayed by the More Tag. Today I want to cover how to make your manual excerpts display on your home page, with a read more link, for every single post, so you get the benefit of both a More Tag and an Excerpt, without have to set up both every time you publish new content. I love things that save me time. :)

As I’ve previously discussed, there are a number of good reasons to limit the amount of each post that displays on your home page, and both the More Tag and manual excerpts offer their own advantages. Modifying your theme like we are doing today will allow you to gain the benefits of both.

Customizing Your Theme’s Code To Display The Excerpt

The goal here is to use conditional tags to basically tell your theme “If this post has an excerpt, display it. If it doesn’t have one, just show the entire post instead.” The reason we want to do it this way is because if we simply replace the the_content() with the_excerpt(), whenever you have a post without an excerpt, the default behavior is to simply display the first 55 words of the post. That’s not what you want. :)

Now, your theme may already contain the conditional tags we’ll be using, but for now we’ll proceed as if your blog calls just the_content(), which means you’ll be looking for something similar to this:

<?php the_content('Read on...'); ?>

Your code may (and probably does) look different depending on how your theme is set up, but this template tag basically tells WordPress to display the content of a given post. Either way, you’ll notice that the text your blog displays when you place a More Tag into a post is controlled by this tag. What we are going to do is replace this tag with the conditional tags I mentioned above, like this:

<?php
   if (function_exists('has_excerpt') && has_excerpt()) the_excerpt();
   else the_content('Read on...');
?>

Your original the_content() tag is still here, on the line that begins with “else.”

For some themes, the conditional tags shown above are already mostly in place, with one exception. If your theme has this structure but still isn’t displaying excerpts, the second line of the code shown above probably looks like this:

 if (function_exists('has_excerpt') && has_excerpt()) the_content();

The only difference is that it ends in the_content(), rather than the_excerpt(). Changing that will do the trick!

Hey! Where’s My “Read More” Link?

Now that your blog is displaying excerpts, you probably want to add a link that will make it clear to your readers that there is more to read, and entice them to do so (like the More Tag does).  All you need to do is add an anchor tag that includes the post’s permalink, like so:

<a href="<?php the_permalink(); ?>">Continue Reading</a>

Replace the “Continue Reading” with whatever you want to customize the text that is displayed. Placing this code just after the conditional tags we edited a moment ago will place the link at the bottom of each excerpt. If you want, you can even include the title of the post in the excerpt by calling the get_title() tag, like this:

<a href="<?php the_permalink(); ?>">Continue Reading "<?php the_title(); ?>"</a>

This tag will automatically grab the title of the post in question. The quotation marks around it are just so the title will appear in quotations.

Once you’ve got your link displaying the right text, you can fancy it up a bit by creating a CSS class for it to control color, size, alignment, etc.

The only “drawback” – and I use quotes here because I don’t really think it’s a big one – is that this link is not controlled by the conditional tags we entered earlier. That means the “Read More” link you just created will show up on the home page of your blog for every post, even if that post has no excerpt and the entire content is displayed. If you’re anything like me and plan to add an excerpt to every single post you write, then that’s not a big deal.

UPDATE: There is a small piece of additional code you can add in to create a link that will only display for posts with excerpts – it just took me a little longer than it should have to realize it. ;)


21 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Adam says

    Hey thanks for writing this, it looks like this explains what I want to do and will try it out later tonight!

  2. Chad says

    Hey Adam! Glad to help!

    Keep me posted if things don’t work out like you expect :)

  3. pinky says

    Hi Chad,

    This seems exactly what I need to get manual excerpts to work with the theme I’m using but I can’t seem to get this to execute properly – I’ve posted about what I’m trying to do more extensively in the WordPress forums:
    http://wordpress.org/support/topic/381487?replies=1

    Thanks for any help in advance.
    pinky

  4. hr says

    It took several hours of searching but I was fortunate enough to stumble onto your blog and find these great helps. Thanks so much for your help.

    The only think I am having trouble working out now is the gap that was introduced into my posts before the “Continue Reading” link. For the life of me I am unable to figure out how to drop it. For reference, here is the code I am using. Any way to get rid of the annoying line break that was introduced before the “Continue Reading” link?

    <a href="”>Continue Reading

  5. hr says

    My apologies, it looks like it won’t show my code. Sure wish I knew how to create those nifty scroll boxes you used in your post above…

  6. hr says

    <?php
       if (function_exists('has_excerpt') && has_excerpt()) the_excerpt();
       else the_content('Read on...');
    ?>
    <?php
     if (function_exists('has_excerpt') && has_excerpt()) { ?>
    <a href="<?php the_permalink(); ?>">Continue Reading</a>
    <?php  } ?>

  7. Chad says

    @hr

    Nice job with the <pre> tags :) I need to make a mental note to add instructions for that below my comment box ;)

    At first glance, your code looks good… is there any chance I can take a look at the page your working on so I can see what’s going on?

  8. hr says

    http://www.windgenenergy.com/news/ is the site in question. Before I made these changes the “Continue Reading” link was a continuation of the last line of the excerpt, but now it has created that line break in there. Thanks again for your great help!

  9. Chad says

    @hr

    I see what you mean – it’s actually being caused by the fact that you’re now using the_excerpt, where you weren’t doing so before. That particular function automatically adds paragraph tags (<p></p>) to your excerpt – this is done to preserve the formatting of longer excerpts that might have more than one paragraph.

    Here are links to two (potential) solutions I have found after a little searching (note: I haven’t had a chance to test them myself, but the look like good options so far!) The first is a plugin that you can install to eliminate the <p> tags – the second is a function you can add to your theme to do it without the use of a plugin (In case you’re like me and prefer to do things “manually” when possible ;))

    http://benpartch.org/downloads/no-excerpt-p-plugin/
    http://codeleet.hub.ph/removing-the-paragraph-tags-of-wordpress-post-excerpt-and-category-description/

    Now, using these means you’d have to add your own paragraph tags if you ever needed them, but that’s easy enough :)

    Let me know how these work!

  10. hr says

    Chad, you’re a saint. Using the second link you provided I was able to make my site look exactly as I wanted. Thanks so much for all your great help!

  11. Scott says

    How do you get it to show your excerpt and the image for the post?

  12. Chad says

    Hey Scott

    If you’re theme doesn’t support Post Thumbnails (which were added to WP 2.9) then you can add the html for the image directly to the excerpt (which is what I’m currently doing here at Welcome To WordPress :))

    Simply add the image at the beginning of your post, and then switch over to the HTML view of the post editor. You can then copy and paste the <img> tag into the excerpt.

    Good luck – let me know if you need any more help!

  13. Maya says

    This is brilliant! Thanks so much!

  14. ysidnem says

    Hi, I am desperately trying NOT TO SHOW manual excerpts after changing my theme. Is there a way to do this if authors have entered manual excerpts? I only want to show the automatic excerpt. Thanks

  15. Chad says

    @ysidnem

    You’d basically want to do the opposite of this post. If your code has something like

    if (function_exists('has_excerpt') && has_excerpt()) the_excperpt();

    you would want to change the last “excerpt” with “content” – to display the post, rather than the excerpt.

    Or you could just use the more basic loop demonstrated in the first code on this page – that is a simple loop designed to call just the content of the post, without even looking for an excerpt.

  16. Kristl Story says

    Help! Your instructions seem simple enough, but my code looks a bit more complex! Any suggestions on what to replace? Thanks!

  17. Chad says

    @Kristl

    Sorry you’re having trouble. Unfortunately, the code you pasted didn’t come through properly. Could you try posting it again inside of some <pre> tags?

  18. Kathy Alice says

    Thanks for the helpful post, I referenced it in my post I just published on adding manual excerpts to my category pages.

  19. KHOKON says

    Hey, this code working fine to my site. Thanks a lot for such a helpful post.

  20. Brummie Biker says

    I have my blog setup to display the page excerpts but I need to control the points between where the excerpt is chosen from. I have some text before the headline of each post which I want to omit from the excerpt. Do I just add tags to the start and finish of my intended excerpt?

  21. Chad says

    @Brummie

    your best bet is probably going to be using manual excerpts. I would just copy and paste the desired section to the excerpt field and you should be good to go :-)



Some HTML is OK

or, reply to this post via trackback.



css.php