In this post, I’ll be sharing two ways you can easily create anchor links within a WordPress page without having to do any coding. One way is with a plugin and the other is with the Gutenberg block editor.
Jump to the section you’d like here:
- How to Create An Anchor Link in WordPress with a Plugin
- How to Create An Anchor Link in WordPress with Gutenberg
Let’s start by going 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 are linked to anchors.
What’s the Difference Between an Anchor Link and a Normal Link?
Normal links always point to the top of a page or post (like an About page or a Contact page).
Anchor links point to a specific spot within a page or post (like the links listed at the beginning of this post… they link to certain sections further down in the post).
A “#” in front of a link location specifies that the link is pointing to an anchor on a page.
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, making it easier to navigate long-form content.
In addition, doing this can help boost your SEO rankings with Google, which can lead to more website traffic, which can lead to business growth… and who doesn’t want that? 😉
Tip: Use anchor links sparingly. You don’t want links to 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!
How to Create An Anchor Link in WordPress with a Plugin
1. Enable the Anchor Button in the Plugin.
- Download the Advanced Editor Tools Plugin if you haven’t done so already.
- Go to the plugin Editor Settings.
- Click on either the Block Editor (Gutenberg) tab or the Classic Editor (Tiny MCE) tab, depending on which one you are using to build your website.
- To enable the Anchor button, drag and drop the bookmark symbol labeled “Anchor” from the “Unused Buttons” area into the editor menu.
BLOCK EDITOR
CLASSIC EDITOR
- Hit the blue “Save Changes” button on the top right.
2. Create Your Anchor.
- After you’ve installed and activated the plugin, open the page or post you want to use an anchor link in.
- Highlight the text you want to be your anchor (this is where the user will go once they click on the anchor link).
- Click on the anchor button in your toolbar (the bookmark icon).
- In the popup, name your anchor by giving it a unique ID (should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores) then click “OK.”
3. Create Your Anchor Link.
- Highlight the text you want to link to your anchor (this will be your anchor link).
- Hit the “Insert/Edit Link” button.
- In the field, type “#” and then the anchor name. Example: #header-1
- Click the blue arrow to apply it.
- 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!
How to Create an Anchor Link in WordPress with Gutenberg
1. Create Your Anchor.
- Open the page or post you want to use an anchor link in.
- In the Gutenberg block, highlight the text you want to be your anchor (where the user will go once they click on the anchor link).
- On the right-hand side of your page, click on the “Advanced” tab. You will then see an option to add an HTML Anchor.
- Give your anchor a name by entering a word or two without spaces.
2. Create Your Anchor Link.
- Highlight the text you want to link to your anchor (this will be your anchor link).
- Click the link button.
- In the field, type “#” and then the anchor name. Example: #header1
- Click the arrow to submit it.
- 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!
Let me know in the comments if you were able to create an anchor link or if you have any further questions!
Why You Shouldn’t Rush the Branding Process