Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Create an Anchor Link in WordPress and When to Use Them

How to Create an Anchor Link in WordPress and When to Use Them

You’ve no doubt read or heard the term “anchor link.” Clicking an anchor link takes the visitor to another section of the same page.

Anchor links are used in a couple of different ways. The plugin we’re going to talk about automatically creates an anchor ID on every header in a page or post. That creates a copyable link to the header. It allows visitors to save a link to a specific section of one of your pages.

The other way anchor links are used is in a table of contents. So, for example, these anchor links create a (miniature) table of contents:

If you click them, you’ll see that you skip directly to that particular section of the article. In this case, the anchor links link to the <h> tags that create the headers.

An anchor tag doesn’t necessarily have to link to an HTML tag on the page. It can link to any location on a page you specify.

We’ll use the Add Anchor Links plugin to create our anchor links.

The plugin automatically creates anchor links on all the header tags on a page or in a post. Visitors can copy those links to specific parts of the page.

The plugin does not create a table of contents. But I’ll show you how to do that in the Creating Anchor Links in WordPress Manually section. You can also use the Easy Table of Contents plugin along with the Add Anchor Links plugin. However, I didn’t test the two together.

Log in to your WordPress admin panel.

In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.

In the “Search plugins…” box, enter, “Add Anchor Links.”

search for the WordPress Add Anchor Links plugin

When you find the plugin, click the “Install Now” button.

click to install the WordPress Add Anchor Links plugin

Now the plugin is installed, but it has to be activated before you can use it.

Click the “Activate” button.

click to activate the WordPress Add Anchor Links plugin

That’s all there is to it. Now let’s put the plugin to work.

In the left column navigation, mouse over the “Settings” link and click the “Add Anchor Links” link.

click the "Add Anchor Links" link

The configuration options are pretty simple.

add anchor links configuration

The first option, “Use your own CSS,” controls how the anchor links appear. If you check that box, the link icon will always be visible on all headers.

link icon visible on all headers

If you leave that box unchecked, the link icon will only be visible when a visitor mouses over a header.

The “Add anchors on” configuration lets you choose where the anchors will be created. You can choose any combination of posts, pages, or attachments.

Click the “Save Changes” button to save your configuration.

click the "Save Changes" button

When you mouse over a link icon, you can see the anchor link. The link is made up of the page URL, then a hashtag, and the anchor ID.

what the anchor link looks like

The anchor links created by the plugin are created “on the fly.” That means the code isn’t added to the page or post. It’s inserted into the code in the browser. So if you uninstall the plugin, the anchor links will no longer be generated.

The Add Anchor Links plugin is a convenient way to automatically add anchor links to HTML <h> tags. But it’s a bit limited in what it can do. To really take advantage of anchor links, you can create them manually.

I’ll use the table of contents at the beginning of this article to show you how to create anchor links.

Google likes linked tables of contents because it helps them understand the purpose of the page. As a side-benefit, using a linked table of contents improves your chances of getting sitelinks listed in search results. That’s a good thing.

We start with a list. It can be ordered (numbered) or unordered. I started with an unordered list.

<ul>
  <li></li>
  <li></li>
</ul>

Next, we add the links. The link text is the same text I’ll use in the header tags.

<ul>
  <li><a href="">Creating Anchor Links in WordPress With a Plugin</a></li>
  <li><a href="">Creating Anchor Links in WordPress Manually</a></li>
</ul>

Next, we add the anchor IDs. They start with a hashtag.

Take note of how I formatted them—all lower case, with hyphens in place of the spaces. You want to follow that format since the anchor IDs will become part of the URL (for that section). And since they will be part of the URL, you also want them to be descriptive.

<ul>
  <li><a href="#creating-anchor-links-with-a-plugin">Creating Anchor Links in WordPress With a Plugin</a></li>
  <li><a href="#creating-anchor-links-manually">Creating Anchor Links in WordPress Manually</a></li>
</ul>

That completes the table of contents. Now we’ll move down the page to create the anchors on the header tags.

Go to the header you’re linking to and add id=”” to the h tag.

Inside the id quotes, we’ll add the anchor IDs from our table of contents. But don’t use the hashtag here.

<h2 id="creating-anchor-links-with-a-plugin">Creating Anchor Links in WordPress With a Plugin</h2>

Then the second header.

<h2 id="creating-anchor-links-manually">Creating Anchor Links in WordPress Manually</h2>	

This is what the markup looks like when it’s complete.

markup complete

I mentioned that anchor links don’t necessarily have to point to a header tag. To link to a specific section of a page, you create your table of contents links the same way we did above. But instead of adding the anchor ID to an HTML tag, create a new ‘a’ tag and place it where you want the table of contents link to lead.

So, for example, instead of doing this to jump to the header:

<h2 id=”creating-anchor-links-with-a-plugin”>Creating Anchor Links in WordPress With a Plugin</h2>

You could do this:

<a id=”creating-anchor-links-with-a-plugin”></a>
<h2>Creating Anchor Links in WordPress With a Plugin</h2>

Note that there’s no anchor text in the ‘a’ tag.

You can place that ‘a’ tag anywhere on the page.

If you use the manual method, you can simply paste the link code into a WordPress Gutenberg block. WordPress will know they’re anchor links.

adding manual anchor links in Gutenberg

But if you still use the “classic” WordPress editor, you have to add the code in text mode, not the default visual mode.

adding manual anchor links in classic editor

Linking With Google in Mind

I mentioned that Google likes linked tables of contents, so adding them is beneficial. If you want to dig more deeply, Backlinko has a pretty comprehensive article on Google ranking factors.

And there’s a great article on SEMrush that goes into detail on the subject of anchor link text. The text you use in your anchor links can help with search result rankings.

As you can see in the Backlinko article, a lot of factors go into Google search result ranking. But everything you can do to give yourself an advantage is worthwhile.

A linked table of contents doesn’t have any more “weight” than a lot of other factors in the Google algorithm. But you can see for yourself in search results that articles with linked tables of contents regularly appear in higher positions than many other similar articles.

Have you ever used a WordPress plugin to create links (or a table of contents)? Do you think you’ll try adding tables of contents to any of your future or existing articles?

I’d love to hear from you. Let me know in the comments.

Author: Michael Phillips

Michael Phillips is a web hosting industry veteran, helping people make the most of their web presence since 1995.

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.