Anchor links allow visitors to jump to certain parts of your page by clicking on a link. They are especially useful if you have a one-page website, a long sales page or if you publish long-form blog posts.
In this post, I’ll explain the benefits of using anchor links and show you how to easily add them manually and with the help of a plugin.
Using anchor links has several advantages that improve user experience and can even help boost your SEO.
Before I go into creating anchor links manually and with a plugin, there are a couple of things you need to keep in mind.
Adding anchor links improves user experience but they could also lead to users spending less time on your site. If you decide to use them, be sure to keep an eye on your analytics and pay attention to time spent on site and bounce rate.
Anchor links might also negatively impact add revenue as users skipping straight to the relevant section will entirely miss the ad so if you use Google AdWords or a similar platform, be sure to implement A/B testing to see if adding anchor links has a severe impact on your ad impressions and clicks.
Creating anchor links manually is not as difficult as it appears. You’ll have to switch between the Code editor and the Visual editor and use a bit of HTML so let’s take a look at how it’s done.
First, go to your post editor and create your post. At the beginning, make sure to create the actual links that will be used to allow visitors to jump to specific post sections. However, instead of linking to a URL, you will assign the link an anchor name that starts with the “#” symbol, such as #demo-anchor-name.
Another tip to make the links visually more appealing is to turn them into an unordered or ordered list.
Once you have your post written up and you’ve made the hyperlinks, it’s time to actually make them do what anchor links do. Switch to the Code editor and scroll down until you find the section you want to link to.
Add the ID attribute along with the anchor name you’ve assigned earlier to the header that marks the beginning of the section. Keep in mind that the anchor name and ID attribute have to be exactly the same for the link to work.
As with anything WordPress related, there are a few plugins that you can use to create anchor links.
The first plugin on the list, TinyMCE Advanced, has 4,5-star rating and over 2 million active installs. Once you install the plugin, it will add a bunch of useful tools to your post editor and even give you the ability to switch between the classic editor and the new Gutenberg editor.
Here’s how you can create an anchor link in your post with it. Start by creating your post and then inserting the links as usual. The difference is that instead of linking to a URL, you will assign the link an anchor name preceded by the # symbol.
Once you’ve created the link, you need to link it to the section of your post where you want your visitors to jump to. Scroll down to the appropriate header, and click on it if you’re using the Gutenberg editor. Look to the right-hand side of the screen and click on Advanced under Block settings. Under HTML anchor, enter the anchor name you’ve created earlier, without the # symbol.
If you’re using the Classic editor, scroll down to the appropriate header and click the Insert button at the top and select “Anchor” from the drop-down menu. Then, enter the anchor name, again leaving out the # symbol.
Another solution for adding anchor links is to use the Easy Table of Contents plugin. Once you install this plugin, you’ll need to go to Settings > Table of Contents and make sure that the box next to Posts is ticked.
You can also configure how many headings should be in the post for the Table of Contents to be created and whether the TOC should be inserted automatically. When you’re done, click save changes, then head on over to your post.
All you have to do is write your post, insert headings where appropriate and the plugin will take care of the rest. As you can see from the screenshot below, the table of contents was automatically added to the example post:
You can also insert the table of contents manually, if you want more control over where it appears in your post. To insert the table of contents manually, insert the [ez-toc] shortcode anywhere in the post.
In some cases, you might want to add anchor links to your menu. This is useful if, for example, you’ve decided to combine your about and contact page into one. The process is almost the same as creating anchor links manually. Start by assigning an id attribute to the page section or sections where you want your visitors to jump to.
Then, head to Appearance > Menus and select the navigation menu you want to edit. Click on Custom link and then paste the complete URL to the page the anchor link is on, followed by the # symbol and the anchor name. In the end, your link will look something like this:
Click Save menu and you’re done. You can now check out and test that your anchor link works properly.
Anchor links help improve user experience, make navigating your long blog posts and pages easier, and they can even boost your SEO. You can easily create them manually as well as using a plugin. Use the tips in this article to weigh the pros and cons of anchor links and to learn how to implement them on your WordPress website.
I have tons of great free content and giveaways! Join 10,000+ others and get access to coupons, freebies, and other great wordpress tips and tricksfor your wordpress website!