WordPress Tips: Customizing the ‘Read More’ – Link Jumps to Top of Page

If you are using WordPress, maybe you are familiar with the ‘more’ (<!–more–>) tag. If this tag sounds unfamiliar, here’s a short description on its usage:

more – <!–more–> WordPress tag that breaks a post into “teaser” and content sections. Type a few paragraphs, insert this tag, then compose the rest of your post. On your blog’s home page you’ll see only those first paragraphs with a hyperlink ((more...)), which when followed displays the rest of the post’s content.

Source: WordPress Codex

How to use

1. While writing your post, just click the area where you want to end the excerpted content of your post and click the ‘more’ button on the Quicktag area
   The quicktags are the little buttons found above the editing window in your Administration -> Write -> Post SubPanel. 

   

2. You can now continue with the rest of your post. When viewed on your site’s front page, your entry will now appear as an excerpt of your post up to the ‘more‘ point. Your readers can now continue reading the entire article by clicking the link generated by the ‘more’ tag, pointing to the rest of your post (default).

Link Jumps to Top of Page

By default, clicking the read more link will load the page and jump to the area where you placed the <--more--> tag. But there are some instances that you want to change its default behavior (just like this blog). Here’s How:

NOTE: Applicable in WP 2.1 and higher only. When you upgrade wordpress to a higher version, it is most likely that the file will be overridden so just take note of the changes you had done and apply it to the new version (where applicable).

1. Open the file wp-includes/template-functions-post.php
2. Look for the following code:

$output .= ' <a href="'. get_permalink() . "#more-$id\"
class=\"more-link\">$more_link_text</a>";

3. Change the above code to the following code:

$output .= ' <a href="'. get_permalink() ."\">$more_link_text</a>";

4. The next time you click the ‘read more’ link, it will point and jump to the top of page.

Part 2: Customizing the ‘Read More’ – Designing the Read More Link

Upcoming Post(s):

• Customizing the ‘Read More’ – Adding image to the Read More link