How to Add a WordPress Read More Button (4 Easy Methods)

Key Takeaways

  • Defines the WordPress Read More Button as a web design element that displays a short preview of posts with an option to view the full content.
  • Highlights benefits of adding the Read More button, including a cleaner site appearance and improved user engagement.
  • Describes three methods to add a Read More button: using the Gutenberg editor, Classic editor, and dedicated plugins like Nexter Blocks.
  • Explains how to customize button styles using Nexter Blocks for better design flexibility and responsiveness on WordPress sites.
  • Mentions tracking clicks on the Read More button through Google Analytics or plugins like MonsterInsights for enhanced user interaction insights.

Ask three WordPress users what a “Read More” button is and you get three different answers. One means the preview cutoff on the blog page. One means a button that loads more posts. One means a styled link they drop anywhere on the site.

They are all called read more, and they are set up in completely different ways. This guide sorts out which one you actually want, then gives you the exact steps for each. Most of these methods need no plugin at all.

Table of Contents

What a Read More Button Actually Means in WordPress

In WordPress, “read more” covers three separate things. Picking the right method starts with knowing which one you need.

  • The excerpt cutoff (the More tag). This trims a single post on your homepage, blog page, or archive so visitors see a short preview plus a “Read more” link instead of the full article. It is built into WordPress core, no plugin required.
  • A Load More button on a post grid. This sits under a list of posts and pulls in more posts when clicked, without reloading the page. You need a block or plugin for this one.
  • A standalone button. This is a styled link you place anywhere, labeled “Read more” or anything else, pointing wherever you want. A button block handles it.

Once you know which of the three you want, the setup is quick. The sections below cover all three, plus the Load More option for post grids.

Why Add a Read More Button in WordPress

Clean Up Long Blog and Archive Pages

Showing full articles on your homepage or blog index makes the page long and hard to scan. A reader has to scroll past one entire post to reach the next.

Cutting each post to a short preview fixes that. Visitors can see several posts at a glance, pick the one they want, and click through. Shorter index pages also load faster, since the browser is not rendering every full article at once.

Keep Readers Engaged

A preview plus a clear “Read more” link gives the reader a small decision to make, and a reason to click. That click takes them onto the full post page, where they are more likely to keep reading and explore related articles.

When people click through and stay longer, search engines read that as a sign your content is useful, which can help your rankings over time.

How to Add a Read More Button in WordPress

There are three native ways to add one, plus a Load More option for post grids. Match the method to the type from the section above.

Method 1: The More Block in the Gutenberg Editor

This is the native way to create the excerpt cutoff. From your WordPress dashboard, go to Posts > Add New Post or open an existing post. Write the post as usual, then place your cursor where you want the preview to end. Click the + icon and search for the More block.

Adding the More block in the WordPress Gutenberg editor
Search for and add the More block in the Gutenberg editor.

Drag the block to the exact spot where the preview should stop. Everything above it shows on the blog and archive pages, everything below it stays hidden until the reader clicks through.

A Read More button preview in the WordPress block editor
The More block creates a Read More link, and the text on it is editable.

Click the block to edit the link text, for example “Continue reading.” You can also switch on the Hide the excerpt on the full content page toggle so the preview text does not repeat once the full post opens.

The Hide the excerpt on the full content page toggle on the More block
Toggle Hide the excerpt on the full content page to control what shows after the cut.

Method 2: The Read More Tag in the Classic Editor

If your site still runs the Classic Editor, the same excerpt cutoff is one click away. Open or create a post, place your cursor where the preview should end, and click the Insert Read More tag button in the visual toolbar.

Adding the Read More tag from the Classic editor visual toolbar
The Classic editor inserts the Read More tag straight from the visual toolbar.

Prefer to work in code? Switch to the Text view and type the More tag where you want the cut. It is a simple comment tag that WordPress reads as the cutoff point.

Adding the Read More tag in the Classic editor text view
In Text view, the cutoff is added as a More comment tag.

Method 3: A Custom Button with Nexter Blocks

If you want a standalone “Read more” button that you can style and point anywhere, the native More tag is not the tool. A button block is. The Button block from Nexter Blocks lets you set the label, link, colors, shape, and size, and it stays responsive on mobile.

To set it up, install the free Nexter Blocks plugin. From the dashboard, go to Nexter Blocks > Blocks, find the Button block, and switch its toggle on.

Enabling the Button block in the Nexter Blocks settings
Enable the Button block under Nexter Blocks > Blocks.

Back in the Gutenberg editor, add the Button block where you want it. Use the layout settings to set the button text and the link it points to. Then open the style settings to adjust typography, background color, and spacing so the button matches your design.

Styling a Read More button with Nexter Blocks style settings
Customize typography, colors, and spacing in the Button block style settings.

Bonus: A Load More Button on a Post Grid

This is the third meaning of read more: a button under a grid of posts that loads more posts on click, without a full page reload. The Post Listing block from Nexter Blocks handles it. Add the block in the Gutenberg editor and set up your post grid.

To turn on the button, go to Layout > Extra Options > More Post Loading Options and choose Load More from the dropdown. In the Post View OnClick/OnScroll field, set how many posts load per click, and use the Button Text field to edit the label.

Setting the Load More option on the Nexter Blocks Post Listing block
Choose Load More and set how many posts load per click in the Post Listing block.

To control how many posts show before the Load More button appears, go to Layout > Query and set the number in the Display Posts field.

Setting the number of posts to display before the Load More button
Set how many posts appear before the Load More button under Layout > Query.

How to Change the Read More Button Text

The default link just says “Read more,” which works but is generic. Where you change it depends on the method you used.

  • More block (Gutenberg): click the block and type your own text, such as “Continue reading” or “See the full guide.”
  • Classic editor tag: in Text view, add your label right after the word “more” inside the tag, so the cutoff carries custom text.
  • Theme-generated excerpts: if your theme auto-trims posts and adds its own read more link, the text usually lives in the theme Customizer, or you can change it with a small snippet using the excerpt_more filter in your child theme.
  • Nexter Blocks button: just edit the Button Text field. No code needed.

How to Remove the Read More Button

Removing it is just as method-specific.

  • You added a More tag or block: delete that block or tag. The post then shows its full content wherever it appears.
  • Your theme auto-truncates with excerpts: switch the blog and archive layout to show full content, or turn off the excerpt option in your theme settings or Customizer.
  • It is a button or Load More block: select the block and remove it like any other block.

Read More Buttons in Elementor and Page Builders

If you build with Elementor instead of Gutenberg, the read more setting lives inside the widget that outputs your posts. Elementor’s Posts and Loop Grid widgets include a Read More option where you can toggle the link on and edit its label.

For finer control over how each post card and its button look, The Plus Addons for Elementor adds dynamic listing widgets with per-element styling, so you can design the read more button to match the rest of your layout.

Wrapping Up

Start by deciding which read more you actually want: the excerpt cutoff for cleaner blog and archive pages, a Load More button for post grids, or a standalone styled button. The native More tag handles the first, and it needs no plugin. For the other two, a block gives you the control you need.

With 90+ blocks including the Button and Post Listing blocks, Nexter Blocks covers both the styled button and the Load More grid, and it is free on WordPress.org. It is a solid way to get read more behavior that matches your design without touching code.

Suggested Reading

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.

Stay updated with Helpful WordPress Tips, Insider Insights, and Exclusive Updates – Subscribe now to keep up with Everything Happening on WordPress!

Have Feedback or Questions?

Join our WordPress Community on Facebook!