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:

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:

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:

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:

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:

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

Comments

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

  2. 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…

  3. hr says

  4. says

    @hr

    Nice job with the

    
    

    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?

  5. 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 (

    ) 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

    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!

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

  7. 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 tag into the excerpt.

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

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

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

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

    
    

    tags?

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

  12. 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 :-)

Leave a Reply

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