Custom WordPress “more” link

If you’re displaying excerpts of your posts on a blog index page, by default WordPress will show the rather arbitrarily truncated 55 words of your entry followed by an ellipses ensconced between square brackets [...] to indicate that there’s more “after the jump”.

Forgetting for a moment that what really matters is the actual excerpt i.e., how to increase or decrease the length of the truncated article—to make it more relevant and entice to reader to follow through and finish the full entry—we’ll focus solely on the appearance and behavior of the “more” link.

As opposed to settling for [...] after our excerpt, it would be nice to have a link that instructs our visitor to click through and finish reading the post.

You will most likely want to define how this “more link” looks. By default, WordPress has a rather unexciting more link that you don’t even have to think twice about. It appears if you’ve set your theme to truncate index content at a certain length or arbitrarily when you use the visual editor UI to break content up ( <!--more--> ).

With a simple function we can define this appearance but for the sake of argument, lets assume that our design calls for something as random as two break tags after ellipses and before the link to the full post? How do we achieve this?

Defining the function

Well, to do this we create a function in the functions.php that looks like this:

function butter_excerpt_more($more) {
  global $post;
  return '…<br /><br /><a href="'. get_permalink($post->ID) . '" class="custom-more-link">read more →</a>';
}
add_filter('excerpt_more', butter_excerpt_more);

This function outputs ellipses ‘. . .’ (thanks to the html entity) right after the excerpt and then includes a read more link after two break tags. You can rename and style the custom-more-link CSS class for the link as desired.

Using the function

Now, in the front-end, e.g. in the content.php template part that’s included in the index.php, where we have the <?php the_excerpt(); ?> function, our excerpted content will be followed by our newly defined break tags and link. That’s all that’s required.

Custom excerpt length

One way to manage the length of your entry excerpt is to use the WordPress admin UI-provided <!--more--> tag. If content as well as context is import to your implementation, this is perhaps the best way to go; your excerpts can be long or short depending, in context, on how you need them to be. This actually seems the more intuitive approach for WordPress themes built for clients. This way, depending on how verbose they are, they can choose to truncate their content in the native WordPress provided fashion or altogether ignore it.

In this approach, your index.php would output the entire <?php the_content(); ?> of your entry and truncate only when and where you used the <!--more--> tag.

If, however, you’d like to set a fixed length, whether longer or shorter than the WordPress default of 55 words, then you’ll need to define and use a function.

Though unlikely, if you have a little less than 55 words to offer before you instruct your visitor to “read more” — specifically, 30 words — then, the excerpt_length filter is your dearest friend.

To filter your content to truncate your excerpt to 30 words, your function would look like this:

function butter_custom_excerpt( $length ) {
  return 30;
}
add_filter( 'excerpt_length', 'butter_custom_excerpt', 999 );

Now, every time you use the_excerpt() in a template, WordPress will truncate your content to no more than 30 words.