Does your site feel overwhelming and congested? Adding a WordPress Read More Button may be the solution!
Attention spans are shorter than ever today, and if your WordPress site displays full-length posts on the homepage or archive pages, you might unintentionally overwhelm your visitors.
Long blocks of uninterrupted text can make your site look cluttered and uninviting. As a result, visitors bounce even before they engage with your content.
With a “Read More” button in WordPress, you can display concise excerpts for a cleaner and more navigable look. In this article, we explore easy steps to add the read more button so you can keep your audience engaged and your site looking appealing.
What is the WordPress Read More Button?
The “Read More” button is a simple web design element used on blogs and websites to keep things neat.
Instead of showing a whole post on the homepage, it shows a short preview with a button (like “Read More” or “Continue Reading”). When you click it, the full post opens up on a new page or expands right there.
When visitors click the read more button, they are taken to the complete content by expanding the text on the same page or navigating to a separate page dedicated to the complete article.
Confused About Choosing a Button Plugin? Discover the 5 Best WordPress Button Plugins to Improve Conversions
Why Should You Add the WordPress Read More Button?
Adding a “Read More” button in your website design offers several benefits that can enhance both the aesthetic appeal of your site and the overall user experience. The two main benefits include:
Clean Up Long Posts
Long-form content is great for sharing detailed information, but showing entire articles or long lists on a page can make it look messy. It might even overwhelm your users with too much to read at once.
By showing only a snippet or the first few paragraphs of each post, your pages look cleaner and more organized. With read more buttons, users won’t have to scroll endlessly to browse multiple articles.
Apart from the aesthetic benefit, shorter pages with less content load quicker. This improves your site’s performance and increases user retention.
Improve User Engagement
Engaged users are more likely to convert into paying customers. Offering visitors with a clear CTA invites users to click instead of passively scrolling.
Breaking your content into manageable pieces makes it less intimidating and increases the chances that they will stay on the site to read the full text.
As users stay longer on your site, click more, and visit new pages, search engines see this as increased engagement. This can be great for your SEO performance and potentially improve your rankings.
Looking for the right font for your website? Here are the 7 Best Websites for Downloading Fonts for Free!
How to Make a WordPress Read More Button
You can add a read more button in WordPress using the Gutenberg editor, the Classic editor or a dedicated plugin. Let’s take a look at each of these methods.
Method 1: Adding a Read More Button in the Gutenberg
You can use the Gutenberg block editor to add a read more button on a page or a post. Let’s see how it works on a post. From your WordPress dashboard, navigate to Posts>Add a New Post or edit an existing one.
Now, create/edit the post as you normally would. To add a read more button in the Gutenberg editor, click + and search for the More block.
Drag and drop the block to the desired spot on your post.
You can click on the block to edit it and add custom text like the one shown below.
You can also hide the text that comes after the read more button by switching the Hide the excerpt on the full content page toggle.
You can also add a read more button on a post listing page. To do this, use the Post Listing block from Nexter blocks. In the Gutenberg editor, add the Post Listing plugin and configure it.
Now, to add a Read More button, navigate to Layout>Extra Options>More Post Loading Options and select Load More from the drop-down menu.
In the Post View OnClick/OnScroll field, you can select how many posts will appear when the user clicks the Load More button. You can use the Button Text field to edit the text that appears.
To customize how many posts appear before the Load More button, navigate to Layout>Query and set the number of posts in the Display Posts field.
Well-designed landing pages can drive conversions. Here are 11+ High Converting Landing Page Examples [with Benefits].
Method 2: Add Read More Tag in Classic Editor
The second method to add a WordPress blog read more button is using the Classic Editor. Select the post you wish to edit or create a new post using the classic editor.
Now, in the Visual Editor, select where you want to add the Read More button and add it by clicking the button shown below.
If you are using the text editor, you can add a read more button label using the tags shown below.
Want to make your website more navigable? Here are 5 Best WordPress Menu Plugins [No More Boring Menus]
Method 3: Adding Read More Button with Plugins
The last method to add a Read More button is using plugins that offer button blocks. To use these, you simply have to install the plugin and then in your editor drag and drop the relevant block and configure it.
The Button blocks from Nexter Blocks give you more design flexibility compared to other plugins. With the Button Blocks, you can effortlessly create custom buttons for WordPress, adjusting colors, shapes, and sizes to your liking.
Customize button styles to perfectly match your website’s design. They are also responsive and mobile-friendly.
Apart from this, you can customize the button to give you more options than simply a read more button to display post excerpts.
You can customize these buttons to provide more options, such as linking to any page, triggering actions, or integrating with other functionalities.
To set up button blocks, install the Nexter Blocks plugin. From the WordPress dashboard, navigate to Nexter Blocks>Blocks. Search for the Button block and turn the toggle on.
Now, in the Gutenberg editor, identify where you want to add the button and add it from the block menu. You can use the layout settings in the right-hand menu to customize the text on the button and add the link that the button will take users to.
To further customize the style, such as typography, background colors, and more, you can use the style settings.
Stay updated with Helpful WordPress Tips, Insider Insights, and Exclusive Updates – Subscribe now to keep up with Everything Happening on WordPress!
Wrapping Up
With the three simple steps discussed in this article, you can add and customize read more button labels on your WordPress site.
Adding a read more button to display post excerpts gives you more control over how your webpage looks. Using post previews gives your website a cleaner look and increases engagement as users have to click to continue reading.
When you aim to create a user-friendly website that offers exceptional user experience, you have to consider both aesthetics and functionality. With 90+ customizable blocks to choose from, Nexter Blocks gives you complete control over creating the most stunning websites.
With Nexter Blocks, you can create websites that match your brand aesthetics, are visually appealing, easy to navigate, and look good on any device.
Gear up to offer your website visitors a richer user experience today by adding Nexter Blocks to your website design toolkit today!
Want to create a high-converting landing page, read this: How To Create High-Converting Landing Page With Gutenberg
FAQs on WordPress Read More Button
Can I control how much content is shown before the “Read More” button?
Yes, you can have full control over the amount of content displayed before the Read More button. In the Gutenberg or Classic editor, you can achieve this by inserting the Read More button exactly where you want to shorten your content. WordPress will automatically hide the remaining content from view.
Can I remove the “Read More” button from certain posts?
Yes, you can remove the read more button from specific WordPress posts. Simply do not insert the More Tag in posts where you want the full content to display. WordPress will then show the entire post. For certain themes that automatically display custom excerpts, turn on the full content display option.
Can I track clicks on my “Read More” button?
Yes, you can track clicks on your Read More button by setting up a relevant click trigger on Google Analytics using the Tag Manager. You can also use dedicated plugins like MonsterInsights, WP Google Analytics Events, and Hotjar, which let you track and visualize all user interactions on your WordPress website.
Can I add multiple “Read More” buttons within a single post?
While WordPress doesn’t support multiple “Read More” tags in a single post by default, you can achieve a similar effect by using a Page Break block in the Gutenberg editor or the Insert the <!–next page –> tag at the desired points in your content in the Classic editor. These options allow you to split your content, and users can click on Next Page to see more of it.
Why does my “Read More” button reload the page?
In WordPress, the default behavior of the “Read More” button is to navigate to the full post page, which causes a page to reload. The “Read More” link is a <a> tag that directs to the post’s permalink (the_permalink() function). Clicking it loads the single post page containing the full content.
Is it possible to style the “Read More” buttons differently on mobile and desktop?
Yes, you can style the “Read More” buttons differently for mobile and desktop. Some themes come with built-in settings for styling elements on different devices. Navigate to Appearance > Customize for any responsive design options. You can also use plugins dedicated to creating mobile-friendly sites where you can customize styles separately.
