How to Create Anchor Links in WordPress and Why You’d Want To

  • By Darrel Wilson
  • Last Updated: November 19, 2019
Create Anchor Links in WordPress

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.

Why You Should Consider Using Anchor Links

Using anchor links has several advantages that improve user experience and can even help boost your SEO.

  • Anchor links help your readers navigate your site better. They can be used in long form blog posts as well as long form pages such as sales pages or services page. Instead of reading through the entire page or post, your visitors can simply jump to the section that interests them.
  • Another reason why you should add anchor links to your longer posts and pages is that you can easily link to that section on social media, in your newsletter, and anywhere else you need to. Instead of sending your followers to a post and run the risk of them leaving because they don’t want to read the entire post, you can send them straight to the section that answers their question.
  • Anchor links tend to show up in Google search results when you add them to your posts and pages. This comes in handy as it can increase your click-through rate. Seeing a relevant section might entice users to click on that particular anchor link and land on your post or a page.

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.

How to Create Anchor Links Manually

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.

How to Create Anchor Links With a Help of a Plugin

As with anything WordPress related, there are a few plugins that you can use to create anchor links.

TinyMCE Advanced

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.

Easy Table of Contents Plugin

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.

How to Add Anchor Links to Your Menu

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:

yourdomainname.com/some-page/#heading1.

Click Save menu and you’re done. You can now check out and test that your anchor link works properly.

Final Thoughts

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.

Like This Article?

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!

One thought on “How to Create Anchor Links in WordPress and Why You’d Want To

Leave a Reply

Hi, Sign Up For Freebies And Wordpress News!

Hi, Sign Up For Freebies And Wordpress News!

Join My Mailing List For Tips, News, And Discounts!

You have Successfully Subscribed!