How to Customize the “Read More” Text in WordPress Excerpts for Better User Experience and SEO

WordPress is a popular content management system that allows you to create and publish content quickly and easily. However, by default, WordPress automatically adds a “Read More” link or text to the end of each excerpt. If you want to customize this link or text to match your website’s branding or user experience goals, you can use the excerpt_more filter hook in your functions.php file.

In this tutorial, I’ll show you how to customize the “Read More” text in WordPress excerpts using the excerpt_more filter hook, and explain why using the rel="bookmark" attribute is a good choice for the link.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Access the functions.php file

The functions.php file is located in your WordPress theme’s directory. You can access it via FTP, or through the WordPress dashboard by navigating to Appearance > Theme Editor.

Add the custom function

Once you have accessed the functions.php file, add the following custom function:

function custom_excerpt_more( $more ) {
	$post_title     = get_the_title();
	$post_url       = get_permalink();
	$read_more_text = __( 'Continue Reading', 'your-text-domain' );
	$read_more_link = '<a class="read-more-link" href="' . esc_url( $post_url ) . '" title="' . esc_attr( $post_title ) . '" rel="bookmark" aria-label="' . esc_attr( $read_more_text ) . '">' . esc_html( $read_more_text ) . '</a>';
	return ' ' . $read_more_link;
}
add_filter( 'excerpt_more', 'custom_excerpt_more' );
Code language: PHP (php)

This function will replace the default “Read More” text with “Continue Reading” and add an arrow to indicate that there is more content to be read. We use the get_the_title() function to retrieve the post title, and get_permalink() to retrieve the post URL. We also use the esc_url() and esc_attr() functions to sanitize the URL and title attributes, respectively, which helps prevent security vulnerabilities and potential issues with special characters.

The rel attribute in HTML is used to specify the relationship between the current document and the linked document, and it can help search engines understand the context and purpose of the link. The bookmark value of the rel attribute indicates that the link points to a bookmark or anchor within the same document, which is often used to help users navigate long pages or articles.

In the code snippet that I provided, we use the rel="bookmark" attribute to indicate that the “Continue Reading” link points to the full post content within the same page. This helps search engines understand the relationship between the excerpt and the full post content, and it can also improve accessibility for users who may be using screen readers or other assistive technologies.

While there are other values that can be used for the rel attribute, such as nofollow or external, these are typically used for different purposes, such as indicating that the link should not be followed by search engines or pointing to a different domain. In the case of the “Continue Reading” link in the excerpt, the bookmark value is the most appropriate and informative choice, as it accurately reflects the relationship between the excerpt and the full post content.

The aria-label attribute is used to provide a label or description for a link that may not be immediately clear from the link text or surrounding context. This attribute is particularly important for users who rely on screen readers or other assistive technologies to navigate and interact with websites.

Save and test the changes

Once you have added the custom function, save the changes to your functions.php file. To test, visit a post or page on your website with an excerpt, and you should see the new “Continue Reading” text. If you don’t see the changes, try clearing your browser cache or refreshing the page.

That’s it! Customizing the “Read More” text in your WordPress excerpts can be a simple and effective way to improve the user experience on your blog. With the help of the custom function we provided in this tutorial, you can easily replace the default “Read More” text with your own custom text string, and also add the bookmark rel and aria-label attributes to provide additional context and accessibility for your users. Remember to always sanitize your data using the appropriate functions to prevent any security issues.