Grow your CSS skills. Land your dream job.

Last updated on:

Replace Excerpt Ellipsis with Permalink

This is useful if you would like to replace the ellipsis [...] from the excerpt with a permalink to the post.

functions.php addition:

function replace_excerpt($content) {
       return str_replace('[...]',
               '<div class="more-link"><a href="'. get_permalink() .'">Continue Reading</a></div>',
               $content
       );
}
add_filter('the_excerpt', 'replace_excerpt');

Comments

  1. Very useful, tried and tested, thanks.

  2. Aaron
    Permalink to comment#

    win!

  3. Permalink to comment#

    Useful snippet, thanks!

  4. Dee
    Permalink to comment#

    where do yo place this function?

  5. Ross
    Permalink to comment#

    I’ve been using:

    function new_excerpt_more($more) {
    global $post;
    return ‘… a class=”more-link” href=”‘. get_permalink($post->ID) . ‘”>’ . ‘Read More »’ . ‘/a';
    }
    add_filter(‘excerpt_more’, ‘new_excerpt_more’);

    But it kept showing the ” … ” at the end of the post.
    This is much cleaner. Thanks!

  6. Permalink to comment#

    Hello,
    Thank you for all your tricks, you save us so much time!

    Any impact on SEO when using this one please?

    Regards,

  7. Permalink to comment#

    Hey mate,

    Thank’s a lot for sharing this ,but I have a little problem…
    I have a website (www.laptopshelp.com) and on the main page, there is a huge padding from the text to the “Read more…” .

    Is there any way to solve that, and if yes , how ?

    Regards, Altin

  8. Alex
    Permalink to comment#

    that didn’t work in my theme, till I wrote this:

    <?php function replace_excerpt($content) {
    return str_replace('[&hellip;]', '... ', $content );
    }?>

    because &hellip is the appropiate HTML entity

    • Alexis
      Permalink to comment#

      Thanks! The combination of the snippet above and the &hellip worked. Saved me time, thanks Alex.

      And thanks CSS-Tricks, this site is often invaluable.

  9. I’ve updated this to work with HTML entities but still be backwards-compatible. See the Gist.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".