Blog: WordPress
Laptop computer on desk

Replace the_excerpt Ellipsis With Custom Link in WP

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

If you you are using the_excerpt() in your WordPress templates, you probably already know it cuts off at 55 words, and is followed by […]. Wouldn’t it be cool if you could replace that ugly trailing ellipsis with your own custom Read More link?

Never fear, that’s exactly what we will show you today. You can customize your link to say whatever you want it to.

You would normally use the_excerpt() inside of The Loop. This code snippet goes inside your functions.php file.


<?php
/**
 * Replace the_excerpt "more" text with a link
 *
 */

function ld_new_excerpt_more($more) {
    global $post;
    return '<p><a class="more-link" href="'. get_permalink($post->ID) . '">Continue Reading</a></p>';
}
add_filter('excerpt_more', 'ld_new_excerpt_more');
?>

What’s going on: First we access the global $post object. Instead of the normal three dots following our excerpt, we want to replace it with a new custom link.

We return a string of HTML that begins the link. We use the period to concatenate the next part, which is the permalink to our specific post or custom post type.

Next we concatenate the rest of the HTML that makes up our custom link.

Last, we add a filter to the excerpt_more function in WordPress core, and run that instead through the custom function we just added.

Now instead of the generic looking dot dot dot after our excerpts, we have custom links that we can style however we want. In this case, I made the link read Continue Reading, but you can add whatever text you feel is appropriate to your link.

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

4 comments on “Replace the_excerpt Ellipsis With Custom Link in WP

  1. Thanks for the great snippet and the detailed explanation.

    But now I’m facing the issue, that there is pretty big gap between the end of the excerpt and the actual “continue-reading” link.

    Do you know what to do?

  2. Hi Luke:

    You should be able to target that particular <p> tag with CSS. If you are seeing a large margin, it’s probable that your theme has a CSS rule where paragraph tags have a large top or bottom margin.

    That’s where I would look first.

    Thanks,
    John

  3. Hi John!

    Your solution is exactly what I need, but the code doesn’t seem to make any change to what is seen on the site’s blog page or post excerpts included anywhere on the site. Is it possible that I’m putting the code in the wrong place? I’m running a Divi Child Theme and have included this code in the functions.php of the child theme.

    Thanks for whatever insight you can share!

    1. Hi Jeff:

      There may be another function in Divi itself that overrides this. Normally I build themes from scratch, and I don’t normally mess with themes like Divi.

      There’s a Facebook Group for Divi here that may have a better answer for your question than I can provide, as they have specific knowledge of how that them interacts with random code snippets. (If you;re already part of that group, there are others on there as well.)

      Best of luck!

      Thanks,
      John

Join the Conversation

Your email address will be kept private. Required fields marked *.