How to Create an Anchor Link in WordPress
If you’re a WordPress site owner, ensuring that your visitors always have a smooth and impeccable user experience when browsing through your website should be one of your priorities. A typical user won’t spend too long on your page before they determine whether they want to keep browsing or if they want to leave altogether. So, you actually have no longer than a few seconds to get them to stay.
Of course, this can be achieved using many different strategies, but when it comes to improving user experience on your site, nothing beats solid website navigation. Now, when we say website navigation, we mean the creation of different navigation menus, CTA buttons, and spreading different types of navigation links throughout your site, including anchor links. And this time around, we are going to focus on anchor links in particular.
Anchor links have the power to enhance the user experience of your visitors since they allow them quick access to the section they are interested in. Stay tuned as we further discuss the importance of these types of links and show you some of the best ways to add them to your WordPress site – both in the Gutenberg and Classic editor.
We will cover:
As we already mentioned, anchor links are quite useful navigation elements since they have the ability to bring users to a specific area on the same page, which allows them to quickly get to the section they are interested in. Otherwise known as table of contents, these types of links are often used in longer forms of content, such as different types of articles, FAQ sections, or lists of products or services, for example.
Aside from largely improving your website’s UX in general, anchor links can also have a positive influence on your website’s SEO. Namely, Google has a tendency to show your anchor links in a form of a “jump to” link in search results especially if users type in the keywords contained in your anchor link. All this can improve your click-through rate, and by extension, bring more traffic to your website.
Also, if you list your anchor links as a table of contents, Google may decide to display them as a rich snippet, like this:
Now that we’ve covered some of the basic reasons why anchor links can be valuable for a website, let’s take a look at how you can add them in WordPress.
To get your anchor links to work, there are two things you should do – first, you need to add a # sign before your anchor text, and then add the ID attribute to the text that you want users to be led to when clicking on the anchor link.
To create your anchor link in Gutenberg, you should select the text you want to have as your anchor and hit the Link button.
A popup will appear where you are usually able to add a link URL.
But instead of doing that, you need to include a # prefix and insert the keywords for the specific area you want users to jump to when clicking on this type of link. Of course, you should use the keywords related to the anchor section you are creating a link for. We also recommend using hyphens and/or capitalization to make your anchor text more readable in general. Here’s an example of a # prefix:
#Hair-Products
Hit the Enter button to finish adding your anchor link. After you do this, you will be able to see the anchor link in the editor, but won’t be able to click on it as you still need to create an ID for it.
To add an ID to the anchor link, you should find the section you want users to be led to when clicking on your link.
To link to a heading section, select the desired block, and choose the Advanced tab. Then, in the HTML anchor field, you should add the same text you used for your anchor link – the only difference being that you should leave out the # prefix.
Then, you can hit the Publish/Update button (or Save Draft) and preview your anchor link to see what it looks like live.
If you want to link to any other section other than a heading (like a paragraph, or other block types), click on a three-dotted menu icon (in the block itself) and then select the Edit as HTML button.
Now, find the HTML tag for the specific section or element. For instance, <p> is a paragraph, <h2>, <h3>, etc. are headings, and so on.
Once you find your element, simply attach an ID attribute together with your anchor to the HTML tag.
Like this:
<p id="Hair-Products">
Once you see a message telling you that this block contains content that is unexpected or invalid, you should click the Convert to HTML button.
And that’s it – you’ve successfully added an anchor link to a specific section in your paragraph, or any other block of your choice.
Qode Themes: Top Picks
View Collection
In case you prefer to use the Classic editor, you can, of course, create anchor links from within this editor as well. Here’s how you can do it.
First things first, select your desired anchor link text and hit the Insert/Edit link button.
Then, add a # prefix as well as a slug for your link.
Once you’re done with this step, you should add your ID attribute to the section you want your users to navigate to when clicking on your link.
Change your mode to Text first, and then find the HTML tag of the section you want to add the ID attribute to (like <h2>, <p>, and so on).
Add your ID attribute together with the slug of your anchor link, but without the # prefix. For example:
<p> id=“Hair-Products”>
Make sure to hit publish/update your page/post and then preview it to see what your anchor link looks like.
If you prefer to write and edit your content using the Text mode entirely, then you can also use it to create your anchor links using HTML from scratch.
Once in the Text mode, you can create your anchor link using the <a href-“ “> tag. Here’s an example of what your anchor link can look like in HTML:
<a href="#Hair-Products">Hair Products</a>
Then, find the area where you want users to be taken to when clicking on the anchor link (a heading which is usually marked as <h2> and <h3>, a paragraph marked as <p>, etc.) and add your ID attribute to the HTML tag (once again, without the # prefix):
<p> id="Hair-Products"> Hair Products</p>
After saving your changes, go ahead and preview what your anchor link looks like.
If you regularly create and post long-form content on your site (like particularly lengthy articles, for example), then you also might want to consider adding anchor links automatically to speed up the process. Fortunately, WordPress has a vast online community that regularly creates many useful tools and plugins – many of which can be used for free. Among such plugins is also a plugin called Easy Table of Contents, which you can use to create anchor links on your website automatically.
As its name suggests, this plugin will allow you to easily create a table of contents with a list of anchor links and add it to your pages, posts, and/or custom post types. You can either enable the auto-insert option to add your anchor links automatically, or you can uncheck this option and set the table of contents for specific pages/posts only.
We’ve already got an article that talks in depth about adding a table of contents in WordPress using this practical plugin, so we recommend that you check it out if you want to break your pages or posts into different sections for better navigation.
Wrapping Things Up
Anchor links can be a great addition to any website as they allow users to quickly and easily jump to the section they wish to read. In turn, they can help improve your navigation and enhance your website’s UX as a whole. Adding these types of links to your pages or posts may seem complex at first, but when you take a closer look at the instructions we presented above, you will realize that this process isn’t difficult at all. Just make sure to carefully follow all the steps and you’ll be all set.
