How to create Page Jumps with HTML Bookmarks

WordPress tutorial: Use anchor links to navigate to text within a pageHow to use anchor bookmarks to help visitors navigate to specific text on a page

An anchor link or HTML bookmark refers to a special kind of link. Normal links always point to the top of a page.

HTML bookmarks are used to allow readers to jump to specific parts of a Web page and are useful to create an index at the top of the page for long pages.

In this post, we’ll look at

  1. how to add the anchor button to the WordPress Visual Editor,
  2. how to create a link anchor within the page that you will link to
  3. how to link to the anchor
  4. how to code this without using a plugin
  5. how to link to an anchor point on a different page

How to add an anchor button to the WordPress Visual Editor

The easiest way to create page link anchors 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

  1. Scroll down to the Advanced Options and tick the advanced link box. Unfortunately we currently need to replace the WordPress internal links feature
  2. 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 name 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

Anchor linking without a plugin

If you don’t want to use the plugin you can switch from visual to text view and assign id’s to the page elements you want to link to <h4 id=”myidname”> then just link to this id <a href=”#myidname”>Link</a>

Link to an anchor point on a different page

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.

Please add your comment below if you found this helpful or have any questions.

One thought on “How to create Page Jumps with HTML Bookmarks

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.