How to create jump links to page sections in WordPress

Are you wondering how to create jump links to a section of a WordPress page? Linking is a great way to help users navigate through your content. If you have a long page you may wish to create an index at the top of a page or post.

You can create jump links with anchor bookmarks. An anchor bookmark link refers to a special kind of link. Normal links always point to the top of a page.

Anchor bookmark links

• act as a page jump, pointing to a specific section of page content
• are used to create an index at the top of the page for long pages

In this post we’ll look at

• how to add the anchor button to the WordPress Visual Editor,
• how to create a link anchor within the page that you will link to
• how to link to the anchor

How to add an anchor button to the WordPress Visual Editor

If you don’t want to get into the code, the easiest way to create page jump links with WordPress is to use a plugin. The TinyMCE Advanced Plugin will enhance the WordPress visual editor by adding an anchor link functionality.

1. Install and activate the TinyMCE Advanced Plugin
2. Navigate in the wp-admin to Settings -> TinyMCE Advanced
3. From the list of inactive buttons click on the anchor button and drag and drop it to the active buttons at the top of the screen – I suggest that you position it beside the link icons

4. Scroll down to the Advanced Options and tick the advanced link box.  Unfortunately we currently need to replace the WordPress internal links feature
5. Click to save changes

Create an anchor to link to

1. Position your mouse within your text at the place you want the link to point
2. Click on the anchor icon that you added to the editor
3. Give a unique id to the anchor
4. Click insert

Link to the anchor

1. Highlight the text in your page that you want to link from
2. Click on the link icon
3. If you ticked the advanced  link box you will see a insert window (like the screenshot below) that provides a field called “Anchors”
4. Click on the dropdown to see all the anchors you have created on the page. Select the anchor and click insert

Add a back to top jump by typing #top in the link URL field.

You can also link to an anchor on a different page by changing the link url and adding an anchor on that page. The url of the link would look like this http://domain.ca/otherpage#anchor.

In a WordPress menu you can add jump links to a specific page section by adding the page URL and id to a custom link. This is often done with themes using parallax design.

Please add your comment below if you still have questions about how to create page jumps linking to specific text on a page.

[cross posted on the LearnWP blog]