Once Coupled
  • About Us
    • Confident
    • Charming
    • Champion
  • Ongoing Support
  • Work With Us!
Home » Welcome » Two Ways to Ensure the WordPress “Read More” Button Links to the Top of Your Post
Home » Welcome » Two Ways to Ensure the WordPress “Read More” Button Links to the Top of Your Post

Two Ways to Ensure the WordPress “Read More” Button Links to the Top of Your Post

Author:

Lauren Gray

Published:

September 22, 2016
December 2, 2016

This site runs ads and generates income from affiliate links. Read my disclosure policy.

Feature Fest is your 6-day crash course to train your team (or future team) and finally glow up your site.

Join Feature fest

When you’re using the WordPress <!–more–> tag, there are two ways you can prevent the “read more” button on your home and archive pages from linking within your post.

  1. Don’t use the tag in the first place (probably not the answer you were looking for)
  2. Work around it with some code (getting warmer?)

Don’t use the <!–more–> tag

Why would you use the “more” tag in the first place?

  • Control: when we manually place the “more” tag in our articles, we’re able to specify exactly where our content breaks.
  • Rich formatting: the “more” tag allows us to show HTML-rich snippets on our home or archive pages without displaying ALL of the post content.

Arguments against the “more” tag

  • Difficulty changing: one day you change your theme and now you want your posts to show the first 500 characters. Only… you put your “more” tag earlier in your content. Now, you’d have to go back and edit all your posts to remove this manual tag.
  • Pesky “jump” (anchor) link: clicking the “read more” link when using post excerpts takes you to the top of the page. When using the “more” tag, that same link will jump users down in the content – without your permission! Now we’ve got to use tactic #2 to gain control again.

Add code to your functions.php file

As explained in the WordPress Codex, you can prevent page scroll when clicking the “more” link. To do so, you need to paste the following snippet into your functions.php file. Please read this warning before editing your functions file!

Two Ways to Ensure the WordPress "Read More" Button Links to the Top of Your Post

pssst.. Check out our sister brands!

Small Plugins: optimized custom blocks
Creator Theme: DIY version (coming soon)

Leave a Reply Cancel reply

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

6 responses

  1. Ken
    May 29, 2018

    Nice, but where will i put the code in my Function.php

    Reply
    1. Lauren Gray
      May 30, 2018

      Anywhere after the opening `` tag at the end (if there is one).

      Reply
  2. Paul Craig
    September 8, 2018

    I kinda sorta adore you for this code. Thank you for solving a most vexing and annoying problem.

    Reply
    1. Lauren Gray
      September 12, 2018

      I’m glad it’s helpful to you, Paul! We’ve had about a million Gutenberg questions – I’m sure more code will come as we near a release date. 🙂

      Reply
  3. Eduardo Paz
    February 15, 2019

    Quick read, very well orginized, to the point and works like a charm. Great Job!

    Reply
  4. Fernando M
    July 7, 2020

    2 years after you posted this, it´s still as valuable and incredible easy to use as the first day. You are a superstar!

    Reply

Hey, we’re Once Coupled!  We empower publishers to create great content without tech headaches.

  • YouTube
  • TikTok

Customization Tiers

Confident
Charming
Champion

Our Brands

Contact Once Coupled
Creator Theme
Small Plugins

Legal

Privacy Policy
Disclosure Policy
Cookie Policy