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.
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:
Do this for every text that you want to have an anchor link, but use a different anchor name!
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
So, as you can see, the name in the anchor link (
a href="#introduction") matches the id in the subheading (
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.
Hyperlink the text like you normally would, but only add a number sign # followed by an anchor name (e.g. #introduction).
Do this for every text that you want to have an anchor link, but don’t use the same anchor name!
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.
So, the link has the
#introduction anchor name, and the Introduction subheading has an id that matches it –
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.
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.
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.
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!