WordPress Anchor Links (AKA Jump Links) HTML Guide

Blog Champs is reader-supported. By following through with a purchase, I may earn a commission at no expense to you. Thank you for your support.

WordPress Anchor Links (AKA Jump Links) HTML Guide

Wondering how to create WordPress anchor links?

In this day and age, anchor links are pretty much mandatory. When visitors land on your page, they're already anxious after waiting two seconds for your page to load.

You can pat yourself on the back if you're even reading this introduction; you're one of a kind! By now, most users have already scrolled down to the Table of Contents, but you're still here reading this sentence.

If you don't have anchor links in your content, don't expect many visitors to read every word to find what they're looking for! Hopefully, you've got a table of contents because that's the first thing many people look for after the page loads.

Anchor links, also known as jump links or “jumplinks,” are types of links that link to other elements on the same page. They're usually found at the top of text-heavy posts, often in the form of a table of contents. For example, refer to the table of contents in this post. Those are anchor links!

Anchor links in WordPress can also be used outside of a table of contents. You could just have a stand-alone anchor link in the middle of your post that sends readers further down the post for more information. Anchor links are incredibly useful for improving the overall user experience.

Anchor text in WordPress is the specific text of the link. For example, the anchor text in Why Use Anchor Links? is “Why Use Anchor Links.” The anchor text should be descriptive to let the user know what they can expect when they click the link.

WordPress Jumplinks are typically used for long posts, allowing readers to jump to specific page areas to find the information they seek. Your visitors will appreciate the ease of navigation, and you'll retain their attention for longer periods.

Additionally, Search engines like Google love anchor links and will use the anchor text to learn more about your page.

Before using anchor links or implementing a table of contents, it's important to understand the downsides. Because anchor links will send your readers right to the information they are looking for, you can reasonably expect a reduction in average reading time and fewer ad clicks.

Personally, since I build for user experience first and monetary gain second, a table of contents is ideal for my situation. I simply prefer giving my readers the best experience I can offer.

Anchor links and jump links can be used interchangeably as they both refer to the same thing. There is no difference, so don't get confused.

Before we begin, it's important to understand how anchor links work. The anchor link itself will have a unique anchor name using the “#” symbol, for example:

#anchorlinkname

You can also add the previous code to specific page URLs. The anchor link will then navigate to the designated URL and the specified anchor point. It looks something like this:

example.com/#anchorlinkname

The target location will use the unique anchor name as the id, for example:

<h2 id=”anchorlinkname”>Header Text</h2>

It's as simple as that! Now, let's look at how we can utilize this in WordPress.

When creating anchor link IDs, there are a few basic rules to follow:

  1. All anchor link attribute names must be unique.
  2. You cannot use spaces.
  3. You can use hyphens and underscores.

While not a requirement, it's wise to use an ID that describes the element's purpose. You could also match the ID to the exact words in the anchor, for example:

The Anchor Link

#the-anchor-itself

The Anchor Itself

<p id="the-anchor-itself">The Anchor Itself</p>

As you can see, the ID describes or matches the actual anchor. Alright, now that you understand how WordPress jump links work, let's get down to business!

There are two main ways to create a page jump in WordPress. You can add them manually in the editor or with the help of a plugin, typically in the form of a table of contents.

Currently, Gutenberg is the default WordPress editor. If you're using Gutenberg (which I highly recommend over anything else), follow these steps to create WordPress anchor links:

Select the block containing the link.

WordPress anchor links (AKA jump links) tutorial - block selection.
wordpress anchor links

Highlight your desired link text, click the link icon button, or press Ctrl+K.

WordPress link icon button in the Gutenberg editor.
wordpress anchor links

Enter the anchor link HTML using the “#” symbol, and press ENTER.

WordPress Anchor Links (AKA Jump Links) HTML Guide | 0598f464 3454 4a75 84a6 bb1ab1b94eb6
wordpress anchor links

Lastly, select the target jump link location block, navigate to the block settings, expand the advanced options, and enter the unique jump link name without the “#” symbol into the HTML anchor field.

WordPress anchor links (AKA jump links) tutorial - setting the anchor.
wordpress anchor links

Alternatively, convert the header/paragraph block to HTML, and enter the id manually.

WordPress anchor links (AKA jump links) tutorial - convert to HTML.
wordpress anchor links

Enter the unique anchor link id.

WordPress anchor links (AKA jump links) tutorial - adding the anchor id.
wordpress anchor links

And that's all there is to it; you now have an anchor link between two pieces of content. You can also create jump links without text if you need.

If you prefer to use the classic WordPress editor, it's even easier, considering you just need to use a little HTML that we've already covered in this post.

WordPress anchor links (AKA jump links) tutorial using the classic WordPress editor.
wordpress anchor links

Using the same basic HTML and principles, you can also add WordPress jump links to WordPress menus.

From the WordPress dashboard, navigate to Appearance > Menus, select your menu and add your jump links using the Custom Links menu item.

WordPress anchor links (AKA jump links) tutorial - adding jump links to menus.
wordpress anchor links

If you wish to use WordPress anchor links for creating a table of contents, I recommend using a tables of contents plugin. These are usually in the form of lightweight Gutenberg blocks that can be implemented in seconds and automatically updated according to your title tags.

Simple Table of Contents

If you're looking for a WordPress anchor links plugin, I recommend Simple TOC because it's incredibly lightweight and doesn't alarm Google Lighthouse like other similar plugins I've tested.

Simple TOC is a Gutenberg block and can be easily placed at the top of your posts using the Gutenberg editor.

Hook Simple TOC Using GeneratePress

Some themes, like GeneratePress, allow you to attach elements/blocks to your theme using hooks. This means that you can hook your table of contents to each post automatically. The only caveat is that your placement is limited to hook locations.

Using GeneratePress Premium, ensure you have the elements module enabled.

WordPress anchor links (AKA jump links) tutorial - using GeneratePress.
wordpress anchor links

Click Elements > Add New element > Block > Create.

WordPress anchor links (AKA jump links) tutorial - creating GeneratePress element.
wordpress anchor links

Enter a title and add the TOC block in the Gutenberg editor as your normally would. Select your display rules and your hook location, and click Publish.

WordPress anchor links (AKA jump links) tutorial - GeneratePress element settings for a table of contents.
wordpress anchor links

In the above example, the tables of contents will be inserted right after the header for each blog post automatically. Use this visual representation to find the right hook. Another interesting idea would be to add the TOC to a sticky sidebar!

Easy Table of Contents

Easy Table of Contents is another interesting option that allows you to automatically add a table of contents to your posts with ease. It's highly customizable, insanely easy to set up, and has slightly better placement options (right before the first heading is my favorite).

After activating the plugin, navigate to Settings > Table of Contents to customize the appearance and functionality. It's that simple!

Easy Table of Contents plugin for creating WordPress anchor links.
wordpress anchor links

With Easy Table of Contents, you can automatically insert your table of contents anywhere and choose from four different placement options. You can also customize the colors and choose from many design and functionality options.

How To Enable Smooth Scroll

Normally, when clicking WordPress jump links, you're taken directly to the anchor location within the page without any noticeable scroll. A smooth scroll slows the jump down, making the jump look more like a “smooth” scroll.

Add the following CSS to your theme from the customizer menu (Additional CSS) to enable smooth scroll.

html 
{
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) 
{
    html
    {
        scroll-behavior: auto;
    }
}

*[id]
{
    scroll-margin-top: 25px;
} 

Because you should never force users to use a smooth scroll, the @media query is there for users who've selected to reduce motion effects in their browser. The last part isn't required but adds a bit of padding between the anchor and the top of the screen. It can be removed if you don't need it.

Conclusion

WordPress Jump links are crucial in this day and age and are practically expected. If you don't have a table of contents, you're doing yourself an injustice, especially because WordPress anchor links are so damn easy to implement.

In this post, you've learned what jump links are, why they're useful, and how they can be implemented in WordPress, s do yourself a favor and start using jump links today. Let me know if you have any questions in the comments below.

Did I answer all of your questions? Let me know in the comments below!

Photo of author

About the Author

Forced out of Colorado because of the housing market, Kyle now writes WordPress guides out of his Florida apartment, hoping one day to return to the mountains from which he came.
Why I Left SiteGround and How I Found My Next Hosting Provider

After many years with SiteGround, I finally made the switch, and I'm glad I did. Read the full story here.

Leave a Comment