Adding a Read More link to excerpts of StudioPress Whitespace Pro

A user of the StudioPress Whitespace Pro theme told me that, generally, he was happy with the theme. What he found missing though, was a Read More link at the end of post excerpts.

Is it possible to include a Read More link in post excerpts? Well, yes.

Displaying Read More in post excerpts is what most Genesis child themes do.

The Whitespace Pro theme suppresses that link in favor of a changing background color when hovering over the post excerpt. So, it is a matter of design.

When you prefer to have a Read More link included in excerpts – read on!

Displaying Read More

First you need to open the functions.php file of the Whitespace Pro theme.

We are only interested in the code that modifies the read more link. That is this code block:

//* Modify the Genesis content limit read more link
add_filter( 'get_the_content_more_link', 'whitespace_read_more_link' );
function whitespace_read_more_link() {

    return '';
    
}

Search for ‘read’. This will bring you to line #134 of the functions.php.

Now we have to comment out the code suppressing the Read More link. Comments are ignored.

To open the comment, put ‘/* ‘ at the beginning of line #135, so before add_filter.

To close the comment, add ‘ */’ add the end of line #140 after the ‘}’. This is important, otherwise all code following will be ignored.

You code block should look like this one:

//* Modify the Genesis content limit read more link
/* add_filter( 'get_the_content_more_link', 'whitespace_read_more_link' );
function whitespace_read_more_link() {

    return '';
    
} */

Of course, the code coloring depends on the settings of your plain text editor.

Everything between the /* and */ is considered a comment, and comments are displayed differently than actual code.

Save the functions.php. You are done!

Now that the original code is now commented out, you will see that the Read More link has made its comeback in the post excerpts.

Modifying Read More

A disadvantage of Read More is that these two words need a lot of space, compared to the width of the excerpts that is.

A way to handle this is by replacing Read More, by simply More. What does it take to achieve that? Only one line!

When you have commented out the original code block, first remove the /* and */. That brings us back to the initial situation:

//* Modify the Genesis content limit read more link
add_filter( 'get_the_content_more_link', 'whitespace_read_more_link' );
function whitespace_read_more_link() {

    return '';
    
}

To display a More link, we only have to replace the line with the return in it.
Replace it with:

return '<a class="more-link" href="' . get_permalink() . '">[More]</a>';

Here is the entire code block:

//* Modify the Genesis content limit read more link
add_filter( 'get_the_content_more_link', 'whitespace_read_more_link' );
function whitespace_read_more_link() {

	return '<a class="more-link" href="' . get_permalink() . '">[More]</a>';
	
}

Of course, you can replace the [More] part by any text you want.

To include the ellipses (the three horizontal dots), use:

return ' &#8230 <a class="more-link" href="' . get_permalink() . '">[More]</a>';

The HTML entity for the ellipses is ….

Read More on a new line

Suppose you prefer the words Read More, but not appended to the excerpt, but on its own line?

Just replace the line with return in it by this one:

return ' &#8230; <br /><a class="more-link" href="' . get_permalink() . '">[Read More]</a>';

In this situation, the excerpt ends with the ellipses, followed by a new line – forced by the break <br /> tag – and Read More on that new line.

Of course, there are a lot more possibilities. The purpose of this post was to show you a few, and supply you with the means to code your own. Happy coding.