How To Internal Create Anchor Links In WordPress

At this point, the Gutenberg WordPress editor is WordPress. The debate about whether or not it’s a good thing is long over, and I myself have come around to the view that Gutenberg is far better than what we had before. One of the features I find myself using constantly is the ability to create internal anchor links from one part of my content to the other. Using Gutenberg, this is extremely easy. Here’s how to do it.

Step 1: Create the “Linked To” Section and Assign an HTML Anchor

First, we have to create the content to which we want to link. Unless you can remember exactly what anchor text you’re going to use, I don’t recommend creating the link first. In this example, I’m going to create an anchor link to a heading on the page. So I first create the heading like this:

Then with my cursor still in the heading section, I select the “Block” property on the right-hand size of the screen. If you don’t see it, click the gear icon on the top-right of the page to deselect any other sidebar like Yoast.

Then scroll down to the “Advanced” section, and under “HTML anchor”, type in an identifier. No spaces, and just keep it simple. In the example above, I’m using the string “linked-heading”. Copy this exactly as you wrote it.

Step 2: Create the Anchor Link

Now we can create the link. Go to the text that you want to use as the anchor text, select it, and either select the “link” icon from the Gutenberg bar or type “Ctrl + K”. This will bring up the link insertion box. Type a hash (#) in the URL field, followed by the identifier that you copied earlier. Now insert the link by clicking the curved arrow icon. Here’s what it looks like:

And you’re done!

Now we can test this by previewing or publishing the page. Using the browser development tools page inspector, you can see that the <a> tag surrounds the anchor text with the heading identifier:

Click this link, and the page will scroll immediately to the linked block. You can repeat this procedure for any block – it doesn’t have to be a heading.

Benefits of Internal Anchor Links

Internal anchor texts are extremely useful while writing long-form content. Some articles are so in-depth and comprehensive that they can be overwhelming. The first use for anchor texts is in the form of a Table of Contents (TOC). However, I don’t recommend creating a manual TOC and suggest using a plugin instead. In fact, it’s important to make sure that your TOC plugin works correctly with any manual anchor links that you create.

But apart from TOCs, internal anchor links are great for users to navigate around your content. I use them all the time to refer users to a specific part of the article, and they can return to where they left off by clicking the back button.

I know for a fact that Google itself users internal anchor links within an article to link directly to portions of the page from within the search results. This might be a double-edged sword, but it will probably allow users to jump directly to a section of your site. In a way, it lets you optimize a single article for multiple keywords.

Thanks to Gutenberg, we can now do all sorts of fun things that weren’t possible before. I use internal anchor links as one of many tools to break up long-form content, and I suggest you make liberal use of them as well!