We occasionally use anchor links in our longer WordPress posts to help users quickly jump to the section they want to read. Anchor links are often used in the table of content sections because they help users move up and down a lengthier article without reloading the page. It can also help with SEO as Google may show them below your search listings for easy navigation (more on this later). In this step by step guide, we will explain what are anchor links and show you how to easily add anchor links in WordPress. Ready? Let’s start with a live example of anchor…
We occasionally use anchor links in our longer WordPress posts to help users quickly jump to the section they want to read.
Anchor links are often used in the table of content sections because they help users move up and down a lengthier article without reloading the page. It can also help with SEO as Google may show them below your search listings for easy navigation (more on this later).
In this step by step guide, we will explain what are anchor links and show you how to easily add anchor links in WordPress.
Ready? Let’s start with a live example of anchor links.
Below is a list of all the topics we will cover in this guide. Go ahead and click on any of these links, and you’ll be taken to that specific section.
- What is an anchor link?
- How to manually add anchor links in WordPress?
- How to manually add anchor links using Classic Editor in WordPress?
- How to manually add anchor links in HTML?
- How to automatically add headings as anchor links in WordPress?
What is an Anchor Link?
An anchor link is a type of link on the page that brings you to a specific place on that same page. It allows users to jump to the section they’re most interested in.
Take a look at the animated screenshot below:
As you can see, clicking on the anchor link takes the user to the specific section on the same page.
Anchor links are commonly used in lengthier articles as the table of content which allows users to quickly jump to the sections they want to read.
Why and when you should use anchor links?
An average user spends less than a few seconds before deciding if they want to stay or leave your website. You have just those few seconds to convince users to stay.
The best way to do that is to help them quickly see the information they’re looking for.
Anchor links make this easier by allowing users to skip the rest of the content and jump directly to the part that interests them. This improves user experience and helps you win new customers / readers.
Anchor links are also great for WordPress SEO. Google can display an anchor link in the search results as a “jump to link”.
Sometimes Google can also display several links from that page as jump to links, and this is proven to increase the click-through rate in search results. In other words, you get more traffic to your website.
Having said that, let’s take a look at how to easily add anchor links in WordPress.
How to Manually Add Anchor Links in WordPress
If you just want to add a few anchor links in your article, then you can easily do so manually.
Basically you need to add two things for an anchor text to work as intended.
- Create an anchor link with a # sign before the anchor text.
- Add the
idattribute to the text where you want the user to be taken.
Let’s start with the anchor link part.
Step 1. Creating an anchor link
First you need to select the text that you want to link and then click on the insert link button in the WordPress Gutenberg editor.
This will bring up the insert link popup where you usually add the URL or look for a post or page to link.
However, for an anchor link, you’ll simply use # as prefix and enter the keywords for the section you want the user to jump to.
After that click on the enter button to create the link.
Some helpful tips on choosing what text to use as your anchor # link:
- Use the keywords related to the section you are linking to.
- Don’t make your anchor link unnecessarily long or complex.
- Use hyphens to separate words and make them more readable.
- You can use capitalization in anchor text to make it more readable. For example:
Once you add the link, you will be able to see the link you have created in the editor. However, clicking on the link doesn’t do anything.
That’s because the browsers cannot find the anchor link as an ID.
Let’s fix that by pointing browsers to the area, section, or text that you want to show when users click on the anchor link.
Step 2. Add the ID attribute to the linked section
In the content editor, scroll down to the section that you want the user to navigate to when they click on the anchor link. Usually, it is a heading for a new section.
Next, click to select the block and then in the block settings click on the Advanced tab to expand it. You can simply click on the ‘Advanced’ tab under the heading block settings.
After that, you need to add the same text that you added as the anchor link under the ‘HTML Anchor’ field. Make sure that you add the text without the # prefix.
You can now save your post and see your anchor link in action by clicking on the preview tab.
What if the section you want to show is not a heading but just a regular paragraph or any other block?
In that case, you need to click on the three-dot menu on the block settings and select ‘Edit as HTML’.
This will allow you to edit the HTML code for that particular block. You need to select find the HTML tag for the element you want to point to. For example,
if it is a pagraph, or