Normal links let you navigate from one webpage to another by clicking. Links have a start and a finish. The place where a link starts – the part you click – is called the referrer. The place where a link ends – where you end up after you click the referrer – is called the target.
Anchor links are unique because the referrer and the target are on the same page. Rather than being used to navigate from one page to another, anchor links are used to navigate to different places within a single webpage.
Anchor links are commonly used to create a clickable table of contents. On longer articles, this lets readers quickly navigate to specific locations (sections) within the longer article.
Here’s a simple table of contents for this article to demonstrate how anchor links work
- Method 1: Using HTML to Make a WordPress Anchor Link
- Method 2: Using Gutenberg to Make a WordPress Anchor Link
A WordPress anchor link functions the same way as anchor links in a non-Wordpress website, but you set them up a little differently.
There are two easy ways to set up anchor links in your WordPress posts.
Method 1: Using HTML to Make A WordPress Anchor Link
This method uses an html anchor tag to identify the target of the anchor link. It’s pretty easy to set up, but requires you to do a little bit of basic html editing
Highlight the text you want to use as the referrer and use the built-in WordPress editor to create a link to your desired anchor. This is where you decide what to call the anchor. You can call the anchor anything you want, but when you build the link you need to put the # symbol in front of the anchor name. In our example, the anchor name we’ve chosen is topic1, so the link we enter on the referrer is #topic1
With our link created and our anchor name chosen, we now need to pick where the referrer is going to point. This is our target. Here, we’ve chosen the heading Topic 1 as our target. Select your target. From the block settings menu, choose “Edit as HTML”
Your block will be replaced by something that looks like this:
<h3> Topic 1 </h3>
To define the anchor target, you need to add a small bit of html to identify that this is where your referrer should end up. To do this, edit the html so it looks like this:
<h3 id="topic1"> Topic 1 </h3>
And that’s it. You now have an anchor link that lets your readers skip from Topic 1, in the text, down to the actual subsection of your article called “Topic 1.”
Method 2: Using Gutenberg to Make A WordPress Anchor Link
Gutenberg is the newest incarnation of the WordPress visual text editor. It’s the interface through which you create and edit the text of your blog posts.
Gutenberg added the ability to create anchors directly from the visual editor, with no html editing required
As with the html method, we need to highlight the referrer and create a link to our anchor. You can name the link anything you want, but make sure to put the # in front of the name.
Select the heading text that you’d like to use as your target. Now, over on the right hand side of the screen, Gutenberg has added a new option to define an anchor.
Add the name you used in step 1 to the HTML Anchor box (without the # symbol) and your link is done.
All About WordPress Gutenberg
This article is part of our Smarter in 60 Seconds series. Articles from the Smarter in 60 Seconds series are designed to quickly give you an overview of a topic. They link to more in depth discussion and resources so you can explore further.