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

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!