Optimizing read more link in WordPress

If you use more link in the posts or have set WordPress to display post excerpts on the homepage, the read more link will be used to encourage visitors to continue reading your posts or article. This post shows you some techniques to optimize the code for read more link.

Don't use the_content() with more text

Usually, we see the following code in theme's template files:

the_content( __( 'Continue reading', 'theme-slug' ) );

The problem with this is you have to repeat the read more text in all template files! That takes you (a little) time coding and make your code longer. And when you want to change the read more text, you have to change in all template files!

To keep the code cleaner, you can omit the read more text using the_content_more_link filter, as follows:

add_filter( 'the_content_more_link', 'prefix_content_more' );
function prefix_content_more() {
    $text = __( 'Continue reading', 'theme-slug' );
    return sprintf( '<a href="%s" class="more-link">%s</a>', esc_url( get_permalink() ), $text );
}

Then, if you want to change the read more text, you have to change the code in only 1 place!

Make read more link better for screen readers

If you put the only text "Continue reading" into the read more link, the screen readers will read it. But it doesn't give any meaning of which article it's talking about.

To avoid this problem, a recommended way is adding the post title to the read more link and hide it with CSS. This is how default WordPress themes do.

function prefix_content_more() {
    $text = sprintf( __( 'Continue reading &raquo; %s', 'theme-slug' ), '<span class="screen-reader-text">' . get_the_title() . '</span>' );
    return sprintf( '<a href="%s" class="more-link">%s</a>', esc_url( get_permalink() ), $text );
}

The CSS to hide screen reader text is recommended here:

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
.screen-reader-text:focus {
    clip: auto !important;
    display: block;
    height: auto;
    left: 5px;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}

This is a requirement if you want your theme Accessibility Ready.

Put read more link into a P tag to better style

Sometimes you want the read more link just a plain link, but sometimes you want to style it as a button. The problem is the link itself is an inline element and thus, you cannot make it display below the post content and the post looks like this:

To solve this problem, simply wrap the read more link by a P tag. Don't worry if that makes your markup invalid HTML. WordPress automatically parses the text, applies the_content filter and makes the markup valid.

The code for it is as follows:

function prefix_content_more() {
    $text = sprintf( __( 'Continue reading &raquo; %s', 'theme-slug' ), '<span class="screen-reader-text">' . get_the_title() . '</span>' );
    return sprintf( '<p><a href="%s" class="more-link">%s</a></p>', esc_url( get_permalink() ), $text );
}

Conclusion

These techniques are really simple, but they make your theme much better and easier to maintain. You might also want to check some best practices developing WordPress themes that I wrote before. Love to know what you think in the comments!