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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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