How to Show and Edit "Read More" Button Using Underscores.me
As a WordPress developer, you may have encountered the challenge of customizing the "Read More" button on your website. The default WordPress excerpt, which displays a summary of your post content, often includes a generic "…" to indicate that there is more content to read. While this works, it doesn't provide the user with a clear call-to-action to access the full article.
In this blog post, we'll explore how you can easily show and edit the "Read More" button using the Underscores.me WordPress starter theme. Underscores.me is a popular and powerful tool that provides a solid foundation for building custom WordPress themes, and it includes a variety of features and hooks that make it easy to customize the behavior of the "Read More" button.
Understanding WordPress Excerpts
Before we dive into the specifics of modifying the "Read More" button, it's important to understand how WordPress handles excerpts. When you create a new post in WordPress, the platform automatically generates an excerpt, which is a summary of the post content. By default, this excerpt is displayed on archive pages, such as your blog homepage or category pages, to give readers a preview of the content.
The default WordPress excerpt behavior is to display the first few sentences of the post, followed by a set of three dots (…) to indicate that there is more content to read. This is achieved through the use of the the_excerpt()
function, which is typically used within the WordPress loop to display the excerpt.
However, many WordPress users prefer to have a more prominent "Read More" button or link instead of the default three-dot ellipsis. This can be achieved through the use of a WordPress filter, which allows you to modify the behavior of the the_excerpt()
function.
Modifying the "Read More" Button with Underscores.me
Underscores.me, the popular WordPress starter theme, provides a convenient way to modify the "Read More" button. The theme includes a set of default functions and hooks that you can use to customize the behavior of the excerpt and the "Read More" button.
To modify the "Read More" button using Underscores.me, follow these steps:
-
Open the Underscores.me Theme: First, you'll need to set up the Underscores.me theme on your WordPress site. You can download the theme from the official Underscores.me website and extract the files to your WordPress themes directory.
-
Locate the inc/template-functions.php
File: Within the Underscores.me theme directory, navigate to the inc/template-functions.php
file. This file contains a variety of functions and hooks that you can use to customize the theme's behavior.
-
Modify the "Read More" Button: Look for the following code snippet in the inc/template-functions.php
file:
function _s_excerpt_more( $more ) {
if ( ! is_admin() ) {
$more = ' ... <p class="read-more"><a href="' . get_permalink() . '" class="more-link">' . esc_html__( 'Continue reading', 'underscores' ) . '</a></p>';
}
return $more;
}
add_filter( 'excerpt_more', '_s_excerpt_more' );
This code snippet defines a custom function called _s_excerpt_more()
, which is then hooked into the excerpt_more
filter. The function modifies the default "…" behavior of the excerpt by adding a "Continue reading" link that points to the full article.
- Customize the "Read More" Button: You can customize the appearance and behavior of the "Read More" button by modifying the HTML and CSS within the
_s_excerpt_more()
function. For example, you could change the text of the button, the class names, or the URL that the button links to.
Here's an example of how you could modify the "Read More" button:
function _s_excerpt_more( $more ) {
if ( ! is_admin() ) {
$more = ' ... <p class="custom-read-more"><a href="' . get_permalink() . '" class="custom-read-more-link">' . esc_html__( 'Read the Full Article', 'underscores' ) . '</a></p>';
}
return $more;
}
add_filter( 'excerpt_more', '_s_excerpt_more' );
In this example, we've changed the button text to "Read the Full Article" and added custom class names for the container and the link itself. You can further style these elements using CSS to match the design of your WordPress website.
Integrating Underscores.me with Other WordPress Plugins
While the built-in excerpt customization features of Underscores.me are powerful, you may also want to consider integrating your "Read More" button with other WordPress plugins. For example, you could use a plugin like Advanced Custom Fields (ACF) to provide more control over the excerpt length and the "Read More" button behavior.
Here's an example of how you could use ACF to customize the "Read More" button:
-
Install and Activate the Advanced Custom Fields Plugin: First, install and activate the Advanced Custom Fields plugin on your WordPress site.
-
Create a Custom Field for the "Read More" Button: In the WordPress admin panel, navigate to the "Custom Fields" section of the ACF plugin and create a new field group. Within this field group, add a new field of the "Text" type, and label it "Read More Button Text".
-
Modify the _s_excerpt_more()
Function: Update the _s_excerpt_more()
function to use the custom field value for the "Read More" button text:
function _s_excerpt_more( $more ) {
if ( ! is_admin() ) {
$read_more_text = get_field( 'read_more_button_text', get_the_ID() );
if ( $read_more_text ) {
$more = ' ... <p class="custom-read-more"><a href="' . get_permalink() . '" class="custom-read-more-link">' . esc_html( $read_more_text ) . '</a></p>';
} else {
$more = ' ... <p class="custom-read-more"><a href="' . get_permalink() . '" class="custom-read-more-link">' . esc_html__( 'Read the Full Article', 'underscores' ) . '</a></p>';
}
}
return $more;
}
add_filter( 'excerpt_more', '_s_excerpt_more' );
In this example, we use the get_field()
function from the ACF plugin to retrieve the value of the "Read More Button Text" custom field. If the field has a value, we use that value for the "Read More" button text. If the field is empty, we fall back to the default "Read the Full Article" text.
By integrating Underscores.me with other WordPress plugins, you can extend the functionality of the "Read More" button and provide even more flexibility for your website's content management.
Conclusion
In this blog post, we've explored how you can show and edit the "Read More" button using the Underscores.me WordPress starter theme. By leveraging the built-in excerpt customization features and hooks provided by Underscores.me, you can easily modify the appearance and behavior of the "Read More" button to match the design and user experience of your WordPress website.
Additionally, we've shown how you can integrate Underscores.me with other WordPress plugins, such as Advanced Custom Fields, to provide even more control over the "Read More" button and the excerpt functionality. By taking advantage of these tools and techniques, you can create a more engaging and user-friendly reading experience for your website's visitors.
If you're a WordPress developer or a website owner looking to enhance the way your content is presented, be sure to explore the Underscores.me theme and the various methods for customizing the "Read More" button. Flowpoint.ai can help you identify all the technical errors that are impacting your website's conversion rates and directly generate recommendations to fix them
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.