WP Rocket - WordPress Caching Plugin

If you write a really long post and want to create a table of contents for it, for example, so that the readers can quickly jump to a specific section, then you’ll need to add anchor links.

In this tutorial, I’ll show you how to add anchor links in WordPress using both Classic and Gutenberg editors.

Create Anchor Links in the WordPress Classic Editor

Let’s say you’ve already created your table of contents and you want to add anchor links to it.

Step 1

Hyperlink the text like you normally would, but only add a number sign # followed by a descriptive (preferably) anchor name (e.g. #introduction), like this:

creating anchor link in wordpress classic editor

Do this for every text that you want to have an anchor link, but use a different anchor name!

Step 2

After you finished creating the anchor links, switch to the Text editor to connect them to the sections you want your readers to jump to, by assigning a matching id.

For example, you can add the corresponding id to the section’s <h2> tag. In my example, it will be id="introduction".

anchor id classic wordpress editor

So, as you can see, the name in the anchor link (a href="#introduction") matches the id in the subheading (<h2 id="introduction">).

Now, when the readers will click on the Introduction link, they’ll jump to the Introduction section.

Repeat this process for every anchor link that you want to create in WordPress.

Create Anchor Links in the WordPress Gutenberg Editor

Using Gutenberg will be easier because you don’t have to switch to a Text editor and add HTML.

Step 1

Hyperlink the text like you normally would, but only add a number sign # followed by an anchor name (e.g. #introduction).

anchor link gutenberg

Do this for every text that you want to have an anchor link, but don’t use the same anchor name!

Step 2

Select the block which contains the section where you want the readers to jump to when they click on the anchor link.

Go to Advanced, in the right sidebar, and add the id that matches the anchor name.

In my example, I’ll add the introduction id to the Introduction subheading.

html anchor gutenberg

So, the link has the #introduction anchor name, and the Introduction subheading has an id that matches it – introduction.

The anchor name and the section’s id always have to match in order to work!

Now, when the readers click on the Introduction link, they’ll be sent to the Introduction section.

Repeat this process for every anchor link.

Adding Anchor Links to Sections in Other Posts

In the above examples, the anchor links send the readers to sections that are on the same post or page.

But what if you want the readers to click on an anchor link that sends them to a section on another post?

Well, you have to follow the same example as above, but instead of only adding the # sign and the anchor name to the link, also add the URL of the post.

creating anchor link to another post in wordpress

Now, go to the other post and add the matching id (#anchor-name) to the section that you want, as you see in the above examples.

Click this link to see how it works. This will send you to a section on my WordPress resources page.

That’s a Wrap

I hope the post was comprehensive enough, and you understood how to create anchor links in WordPress!

If you need help setting up your WordPress site, my WordPress installation service is at your disposal!

On-going WordPress support and maintenance services are on the menu as well!

You can quickly subscribe to my newsletter by using this link.

You can also hit the follow button on Twitter and subscribe to the YouTube channel.

If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.

Don’t forget to share the post to help out others!