Adding anchor links to a WordPress page is super simple! I'm going to show you how to do it in just 3 steps and without having to do any kind of coding!

But first, let's go over what anchor links are and how you can use them.

What is an Anchor Link?

An anchor link is a link on a page that brings you to a specific spot (an anchor) on that same page.

What is an Anchor?

An anchor is an invisible position marker that you can place anywhere on your site.

Anchor links link to anchors.

Why Use Anchor Links?

Anchor links improve the UX (user experience) of your site. They help visitors find answers to their questions quickly, without having to scroll through sections that don’t interest them. A single click on an anchor link will take them exactly where they want to go.

What's the Difference Between an Anchor Link and a Normal Link?

Normal links always point to the top of a page.

Anchor links point to a specific spot within a page.

A "#" in front of a link location specifies that the link is pointing to an anchor on a page.

Anchor links are generally used when you create pages with considerable amounts of text. Typically, you'd make an index at the top of the page linking to the anchors that have been added to key places in the text that follows.

How to Link Within a Page Using Anchor Links

1. Enable the Anchor Button Plugin.

  • Download the TinyMCE Advanced plugin if you haven't done so already.
  • Go to the plugin's Editor Settings.
  • To enable the Anchor button, drag it from the "Unused Buttons" into the editor menu.
  • Hit the "Save Changes" button.

Enable anchor button in TinyMCE Advanced Editor Settings in order to create anchor links

2. Insert + Name Your Anchor.

  • Open the page or post you want to apply an anchor to.
  • Make sure you're in the "Visual" tab of the editor.
  • Click on the spot where you want the visitor to go once they click on the anchor link.
  • Click on the anchor button in your toolbar (bookmark icon).
  • In the popup, name your anchor by entering an ID (should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores) then click "OK."

3. Insert the Link to the Anchor

  • Go to the text you want to link to the anchor and highlight it.
  • Hit the "Insert/Edit Link" button.

Go to the text you want to link to the anchor and highlight it, then click the insert link button.

  • In the field, type "#" and then the ID you used for the anchor. Example: #Anchor-ID
  • Click the "Apply" button.
  • Save your draft.
  • Preview your page and test your link. 
  • When you click the anchor link, it should jump to the spot where you inserted your anchor.

Done!

Tip: Use anchor links sparingly. You don't want links jump all over the page as it can be a bit of a turnoff to your visitors. However, if used with care, they can be a great additional navigational tool for your website!

Did you find this post helpful?

Comment below or let me know if you get stuck and have any questions!

SaveSave

GET THE LATEST FROM WHIPPED DREAM

Delivered once a week to your inbox.