Support » Themes and Templates » Breaking “read more” excerpt link out of the paragraph tag?

  • Resolved ericcarl


    By default, the excerpt link is placed at the end of the last sentence, directly before the closing of the paragraph tag, like this:

    ... More after the jump. <a href="http://theurl" class="more-link">Read more &raquo;</a></p>

    However I’m trying to build my theme so that the “read more” link is it’s own block element below the parapraph, so I would want something like this:

    ... More after the jump.</p>
    <a href="http://theurl" class="more-link">Read more &raquo;</a>

    How would I go about making this modification? Thanks!

Viewing 15 replies - 1 through 15 (of 15 total)
  • Sorry to nag, but does anyone have any ideas on this? Thanks!

    Since we’re working on a similar problem, here’s the answer.

    As we know, there is no ‘more’ link when using the excerpt() function, so the obvious solution is to cheat.

    <?php the_excerpt(); ?><br>
    <div class=”readmore”>“>CONTINUE READING </div>

    There may be other solutions. See Lorelles blog for a number of other choices including a way for wordpress to automatically know if you post by <!-more-> tag, optional excerpt or neither.

    Hope that helps.

    Just another thought…

    You could also try styling the ‘more’ link using

    <?php the_content(‘<span class=”more’>Read More</span>’) ?>

    and give .more a declaration of display:block. Not sure if that would work, but thought I’d mention it anyway. 😉

    Thanks, I actually ended up going for the latter approach. It still keeps the Read More link inside the paragraph tag, but it at least works for display purposes.

    Moderator Samuel Wood (Otto)

    (@otto42) Admin

    The read more link gets a surrounding anchor link anyway, with a class of more-link. Putting a span inside that is silly. Just style the more-link class however you like, no need to stick an extra span in there.

    I don’t want to be “silly” and I’d love to style .more-link if I could find it! I looked through style.css and it’s not there. Any ideas where that class lives?

    Using WP v.2.5


    make it!

    seriously, if you don’t see:

    .more-link {

    just put it in there.

    Until I can find the class, I “cheated” by adding a
    tag in post-template.php:

    $output .= '<br /><a href="'. get_permalink() . "#more-$id\" class=\"more-link\">$more_link_text</a>";

    The line break, IMO, puts too much space between the post body and the “More” text. Ideally, I only want a 10-15px margin-top to break out the “More” from the post body, but not shove it down too far.


    Thanks. I did that but it had no effect:

    .more-link {margin-top:10px;}

    Any other ideas?

    no other ideas… just the same idea — you should google yourself a CSS reference by the way.

    .more-link {
    display: block;
    margin-top: 10px;

    > Ivovic

    adding display: block; did the trick.

    btw, — i have plenty of css references bookmarked — i just missed adding the display property. how stupid of me to assume that a style called in default WP files would actually exist.

    maybe one day i’ll grow up to be a real CSS coder like you, and uber-cool enough to snark at n00bs. The next time I post to the Forums, do us both a favor and save your breath and the bytes.

    Common courtesy (remember that?) requires me to say “thank you”.

    Justin Tadlock


    WordPress God

    InfoGeek, you should be a bit more courteous to the people helping you.

    How do you do that? The first thing is trying a bit more to help yourself out by researching.

    The next is to stop your reply here:


    adding display: block; did the trick.

    With an added “Thank you” at the end.

    Running a blog means that you have to “grow up” a bit and start learning how to do things on your own. That’s the whole point of creating and running your own blog.

    It’s rare that I’ve actually had to ask questions on this forum since day one of using WordPress three years ago. Why? Usually, the question has already been answered somewhere. The Web’s a pretty big place with lots of useful information.

    InfoGeek, if you detected some snarkiness on my part, it was probably because of your response to Otto.

    >I don’t want to be “silly”

    for someone who is a self-acknowledged noob, who refuses to spend 3 to 5 minutes reading about how to make style sheets, you sure you do allow yourself a lot of attitude.

    Why would you quote for emphasis there? – his response wasn’t even directed at you… and yet your first post in this thread has attitude.

    this forum is like god — it helps those who help themselves.

    For the record, yes, I will pass your threads by in future — nice of you to tell me that AFTER you get my help.

    This thread has helped me set up excerpts on my sites homepage. Thanks! It works great in Firefox (3), but the formatting is messed up in IE 7 (I haven’t tested other versions yet). I’m searching for a solution, but nothing yet.

    I’m learning, but for now my php knowledge is poor. Help!

    Site link is over on my username. Here’s the code I used:

    <div class="tabbertabright">
    <h1><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
    <p style="font-size:11px; margin:0px 0px 10px 0px;"><?php the_time('F j, Y'); ?> &middot; <?php comments_popup_link('Leave a Comment', '1 Comment', '% Comments'); ?>&nbsp;<?php edit_post_link('(Edit)', '', ''); ?>
    <?php the_excerpt(); ?>
    <div class="more-link"><a href="<?php the_permalink(); ?>">[Read the full story]</a></div>

    Looks like I won’t be able to edit my profile for awhile. My site is

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Breaking “read more” excerpt link out of the paragraph tag?’ is closed to new replies.