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.
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.
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.
- 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.
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!
JOIN THE CLOUD9 NEWSLETTER
Enter your email to get new insights, wisdom + ideas sent straight into your inbox. Plus be the first to know of any news, secret promos, sweet treats and other fun surprises!