Anchor links are a very useful part of web design. They let you improve the User Experience by directing users to a specific part of a page, rather than making them search for the information. They make it easier for you to write more comprehensive information and combine multiple small, related pages, without compromising the users' experience.
How do you add anchor links in WordPress? Add a unique ID to any html element on a page. To jump to that part of the page from another part of the same page, use a hashtag followed by the ID. To jump there from another page, use the URL of that page, followed by a hashtag then the ID.
What is an anchor link or a jump link?
An anchor link, also called a "jump link", let you jump to a specific part of a webpage.
They are particularly useful for long articles, glossaries or technical documents.
Wikipedia uses anchor links extensively. You often see them in a table of contents as well.
The basic idea is that the link goes to a specific page, then to a specific part of the page. The form of that combination follows this convention:
https://www.domain.com/specific-page/#specific-part-of-page
The three parts of an anchor link are:
- https://www.domain.com/specific-page/
- #
- specific-part-of-page
Part 1 is the regular URL pointing to the page which has the anchor link.
Part 3 is the name of the specific part of the page, which we'll setup later.
If you've worked with CSS, you'll know that we use the hashtag (#) to refer to an id.
You might use:
#specific-part-of-page {
color: #000000;
}We're doing the same thing with the anchor links, just with HTML.
Difference between internal and external anchor links
If you're linking to a specific part of the same page, you use #specific-part-of-page.
If you're linking to a specific part of a different page, you use https://www.domain.com/different-page/#specific-part-of-page.
The difference is that you drop the url when you're linking to the same page.
The full external anchor link will still work if you're linking to a different part of the same page. The reason we don't use it is because the external anchor link will cause the page to be reloaded, whereas the internal anchor link will just move the view to the desired part of the page.
Adding an anchor link to WordPress is a two-part process. First you need to add the anchor, then you need to link to it.
Let's go through those steps now.
How to add an anchor
First, let's clear up some confusion. Adding an anchor used to be done with the "name" parameter of an anchor tag, hence the name. The code to set the anchor was:
<a name="example"></a>The "name" parameter of the <a> tag became obsolete with HTML5 (read the discussion on obsolete tags here).
So you may see older articles telling you to do it that way, but that's not correct any more.
With HTML5, we now can use the ID of any html element.
As a quick refresher, all elements can have one or more "classes" and can have up to one "ID".
An ID must be unique to that element on a page. It doesn't have to be unique across the site. Just as long as there's only one element with that ID on the page.
A heading with an ID might look like:
<h2 id="example" class="fancy-heading">My Example Heading</h2>In this case, "example" is the ID.
You would link to that specific heading with #example.
It can be any text you want, but it can't have spaces. Use a hyphen or an underscore instead. You can use numbers in the ID too, if you like.
Don't use capitalization in your IDs. You technically can use capitalization, but HTML5 treats it as case insensitive, while XHTML treats it as case sensitive.
We conventionally use either hyphens (-) or underscores (_) to separate words in our IDs for ease of reading.
For your own peace of mind, pick either hyphens or underscores and stick with that. Otherwise, you'll have to keep remembering which one you used.
If you view the source of your page, you might already have IDs in place for things like the content, sidebar or footer. This will depend on your theme.
How to add an ID in Gutenberg
Of the default Gutenberg blocks, only the heading block allows you to add IDs.
You can add an ID for any of the heading levels.
Make sure the Settings sidebar is visible.
Add a Heading block, then look in Settings->Block for Advanced. You probably have to click to expand it.
Add your unique ID to the HTML Anchor field.
How to link to an anchor
We've already gone through what anchor links are. Now you just need to decide if you need an internal or external anchor link. Click here to jump to the section above for a refresher (see how that works?).
Once you know which link you need, linking to the anchor is as simple as putting that link in where you would put a regular link.
