Displaying a read more link in WordPress custom excerpts

Excerpt is a short text of a your post. There are cases when displaying an excerpt in a post is very useful. It allows you to slim down long posts by showing short and custom summaries. WordPress provides a built-in function which makes it easier for you to decide what summary you want to show for your post. In this post, we are not going to focus primarily on the excerpt but rather on a read more link which comes after this excerpt.

Note, even though this a default functionality of the WordPress core – not all themes support it. To learn more about the excerpt functionality in your WordPress site, contact an author of your theme. In this post, I am going to use the Prosperity theme as an example of displaying a read more link in custom excerpts.

You can add your summary text in the Editor using the Excerpt option. It is a textarea which is located in the sidebar section in the Editor. By default, the excerpt function does not display any read more links when you fill the Excerpt option with any text in the Editor. It is not a bug. It is a default behavior of WordPress.

The Excerpt option in the Sidebar in the Editor.
Under the Document settings on the right of the editor click on Excerpt to add a custom excerpt to your post.

Once the Excerpt option is filled and your post is saved, the content area of your post will show only the text you have added to the Excerpt option. You can add a custom HTML to your summary to create links but WordPress will not output an automatic link to the original post. In short, it does not display a Continue or Read More link.

Example of the excerpt in the Prosperity theme.
This is an example of the excerpt used in the Featured Content in the Prosperity theme

Code snippet: display a read more link in the custom excerpt

Do not panic. There is a way to display a Continue link in the content area of your post. I will show you how to add this functionality to your WordPress site. We are going to use a small code snippet to display a read more link in custom excerpts.

if ( ! function_exists( 'themesharbor_more_link_custom_excerpt' ) ) :
	/**
	 * Prints a More Link in the custom excerpt.
	 */
	function themesharbor_more_link_custom_excerpt( $excerpt ) {
		if ( has_excerpt( get_the_ID() ) ) {
			$excerpt .= '<p class="more-link-container"><a class="more-link wp-block-button__link" href="'. esc_url( get_permalink( get_the_ID() ) ) . '">' . esc_html__( 'Read More', 'themesharbor' ) . '</a></p>';
		}

		return $excerpt;	
	}
	add_filter( 'the_excerpt', 'themesharbor_more_link_custom_excerpt' );
endif;

Note, I am using “themesharbor” as slug of my theme. You can use a different slug based on the name of your theme. If you have no idea what I just said then just use the code snippet shown above this paragraph.

There are several ways to include this code on your site. You can either use a functions.php file located in your child theme, or you can use a special plugin that allows to add code snippets. For example, you can use Code Snippets which is located in a WordPress plugin directory.

Posted in Guides, WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.