How to use anchor links to help visitors navigate to specific text on a page

Create links within a page using anchorsAn anchor link refers to a special kind of link. Normal links always point to the top of a page.

Anchor links

  • act as a page jump pointing to a specific place within the 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 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 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. If the link doesn’t work, open your header.php file and add <a id=”top”></a> right after the <body> or <body <?php body_class(); ?>> line.

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.

[cross posted on the LearnWP blog]

3 comments on “How to use anchor links to help visitors navigate to specific text on a page
  1. jill says:

    Hi Ruth,
    I don’t get the Insert/Edit Link dialogue box that you are showing here. The one I get when I click Link says “enter the destination URL”.
    thanks,
    Jill

    • Ruth Maude says:

      Hey Jill,

      The advance box wasn’t clicked in the TinyMCEAdvanced plugin settings. You can enter the destination manually with #nameofanchor or tick the box in the plugin.

      ~ Ruth

  2. Kevin says:

    Great article I never tried this way.

Leave a Reply

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

*