How To Create WordPress Anchor Links (Jump Links)

As a business owner, you’re always looking for ways to improve user satisfaction on your WordPress website. The next metric in your sights: Your bounce rate.

A high bounce rate might not be a reason to panic. The average bounce rate is around 50.9%, depending on your industry. For eCommerce websites, it’s 54.54%.

For instance, maybe your website is so well-designed that users quickly get the information they need and leave. This still counts as a bounce.

But too many bounces could also indicate a poorly laid-out website, so it’s a good idea to improve this metric as much as possible.

Enhancing user experience (UX) is a surefire way to bring down your bounce rate, and adding anchor links is one surprisingly impactful way to do this.

What is a hyperlink?

Before we talk more about anchor links, we need to look at what a hyperlink is.

You probably already know about these links: colored or underlined text that, when clicked, transports you to another webpage. These are differentiated by internal links, which link to the same website, and external links, which link to a separate website.

The anatomy of a hyperlink includes the visible text, known as the anchor text, and the Uniform Resource Locator (URL) it links to. For example, in the phrase “visit Bluehost for fast web hosting,” the underlined phrase “visit Bluehost” is the anchor text.

In HyperText Markup Language (HTML), that hyperlink would look like this:

<a href=”https://www.bluehost.com/”>visit Bluehost</a>

What is an anchor link?

Anchor links, often called page jumps or jump links, can help users quickly navigate a page. Unlike internal and external links, anchor links keep you on the same page while moving you to a specific section.

The anatomy of an anchor link is very similar to that of a typical hyperlink. While we’ll go in-depth into how to create an anchor link manually later, here is an example of anchor links in action from our article about how to structure a website:

Once you click a link in the table of contents, you’ll jump right to that section on the page and see the URL in the address bar change. In this example, clicking on the “What Website Structure Is” anchor link changes the URL from https://www.bluehost.com/blog/website-structuring to https://www.bluehost.com/blog/website-structuring/#What-Website-Structure-Is.

Why you should use anchor links

Including anchor links in your articles and pages is a small change, but it can have a significant impact. Here are just a few of the benefits:

• Improved UX: Anchor links streamline website navigation menus and organization, enabling users to find whatever they’re looking for quickly. Good UX satisfies visitors and increases the chance they’ll stay on your website.
• Increased engagement: Frustrated users struggling to get around your website tend to bounce. Even if it takes one second too long to find what they’re looking for, they may leave. Anchor links allow them to quickly and easily find what they want without having to scroll a huge page, and they’ll stay longer on your website as they read and browse.
• Better search engine optimization (SEO): Anchor links are vital in organizing your page in a way that search engine indexers can understand. Descriptive anchor text can improve SEO by telling Google what your page is about. Additionally, your anchor links may appear along the bottom of your Google Search result, giving you more opportunities to get clicks.

• Accessibility and responsiveness: Navigational aids can greatly help those who need them. People who use screen readers and other assistive devices will find your website more accessible when you use anchor links. They even help visitors on smaller mobile screens navigate a long page with ease.

When you should use anchor links

Need help determining where to place anchor links on your website? Here are a few ideas:

• Table of contents (ToC): On long pages broken up with various headings, such as articles, it’s a good idea to have a ToC that can jump right to any section.
• Lists and indexes: When you have a document with many individual sections, such as an index or an FAQ page, you may want to have anchor links pointing to each entry or group of entries.
• Back to top/bottom: A quick link that jumps users to the top or bottom of the page is often appreciated, especially if you don’t have a menu or a sticky header, which stays in place as they scroll.
• Jump to call to action (CTA): Direct users to essential CTAs. For example, let users jump right to your contact form.
• Landing pages: Simplify navigation on landing pages or one-page websites with anchor links.

Challenges of using anchor links

While anchor links are handy, you must implement them properly or risk impacting UX, SEO and accessibility. Look out for these potential issues:

• Damaged SEO: Links are essential to SEO, and anchor links are no exception. However, links have to be used in a certain way to help your search engine ranking. Poorly organized jump links, poorly written or blank anchor text or uncrawlable HTML code could hurt your SEO.
• URL clutter: Poorly set up and organized anchor links can clutter the URL. Clean URLs are much more user-friendly.
• Accessibility issues: While jump links can help with accessibility, they could be a hindrance if you don’t implement them in line with the Web Content Accessibility Guidelines (WCAG). For example, you may want to add a “skip navigation” link that allows users with screen readers to jump right to the main page content.
• Poor responsiveness: Jump links may function differently on different devices. If you don’t make sure these links work on multiple devices, some users may have a bad experience.
• Broken links: Updating jump links when adding or removing sections to your content is important to avoid broken links and bad UX.
• Technical issues: Jump links can introduce problems like conflicting scrolling behavior leading to visual glitches or page elements like sticky headers covering part of the content.
• Anchor link overuse: While anchor links can be helpful, using them on short pages that don’t need them or adding too many on one page can become overwhelming.

Luckily, many of these issues have easy fixes. Keep them in mind as you add anchor links to your website.

How to create anchor links in WordPress

There are several ways to add anchor links in WordPress, from creating them manually with HTML to simply using the built-in editors. Here are several tutorials to walk you through it.

Create anchor links in the Gutenberg Block Editor

First, let’s create an anchor link using the Gutenberg Block Editor, step by step.

Step 1: Add the block you want to jump to

This can be a heading, paragraph block, image or anything.

Step 2: Open the Settings tab and click the Advanced dropdown

You can find the Settings tab in the top-right corner and the Advanced dropdown in the open panel.

Step 3: Find the HTML Anchor input box

This will be in the Advanced tab. If you don’t see it, try a different block type, like a heading.

Type in a name in the HTML anchor box, making sure it’s unique from any other anchor on the page. You also can use some symbols, like hyphens and periods. Remember that this will appear in the URL when the anchor link is clicked.

Step 4: Link to your anchor

To do this, add the text, image or button that will become your clickable jump link.

Highlight it, select the link button and type in the HTML anchor you set before, with a hashtag in front. If your anchor tag was “example,” type in “#example.”

Test it out in a preview, and you should jump instantly to the anchor point you set.

Add anchor links in the Classic Editor

If you prefer the Classic Editor, creating anchor links in WordPress here is also possible. The process is a little more involved but still relatively simple.

Step 1: Switch to the Text editor

In the top-right corner of the editing area, you’ll see two tabs, Visual and Text. Click Text to switch over.

Step 2: Add the anchor ID

Find the element you wish to jump to. In this example, we’re using a heading that looks like this:

<h2>Anchor Link 2</h2> 

Add an “id” tag with the desired name for the anchor. Here’s how it should look:

<h2 id="anchor-link-two">Anchor Link 2</h2> 

You can use this ID tag similarly in most HTML attributes. Here’s how it would look in a typical paragraph.

<p id="anchor-link-two">Anchor Link 2</p> 

Step 3: Link to your anchor

Switch back to the Visual editor and add the element users will click on to jump to the desired section.

Highlight it, select the link button and then type in the anchor ID you set before, plus a hashtag. In this example, we type in “#anchor-link-two.”

Like with the Gutenberg editor, use the preview screen to test it out and ensure it’s working.

Create anchor links manually with HTML

Similarly to the above example, you can use HTML to create an anchor link directly. Here’s how you do it.

Step 1: Create an anchor tag

First, name the anchor. You can do this with the HTML “id” tag, which can be placed almost anywhere. Here are a few examples:

• <a id="anchor-example"></a>
• <h1 id="anchor-example">Heading example</h1>
• <p id="anchor-example">Example text.</p>
• <span id="anchor-example"></span>

Step 2: Link to the anchor tag

Create a link that will jump to the anchor you specified when clicked. Make sure to use a hashtag symbol in front of the ID. An example:

<a href="#anchor-example">Example link.</a> 

Step 2: Link to the anchor tag

Create a link that will jump to the anchor you specified when clicked. Make sure to use a hashtag symbol in front of the ID. An example:

<a href="#anchor-example">Example link.</a>

Step 3. Insert the HTML code

WordPress allows you to edit HTML in various areas across your website, and WordPress plugins may offer even more options. We already covered how to get to HTML in the Classic Editor. There are a few more ways.

You can edit HTML in the Block Editor by adding a block, selecting it, clicking the three vertical dots and selecting Edit as HTML.

You can also open the Code Editor by clicking the three vertical dots in the top-right corner of the screen and choosing the editor from the dropdown menu.

Finally, you can edit theme HTML by navigating to Tools > Theme file editor, though it’s not recommended you edit this directly. Instead, you can set up a child theme.

Add anchor links to a WordPress menu item

It’s also possible to add anchor links to a WordPress menu. These will work just like any other jump link. The use of this is somewhat limited, but you may find it helpful on one-page websites.

Combining this with the Conditional Menus plugin allows you to create menus with anchor links on specific pages, like your homepage or landing pages. Here’s how to set it up:

Step 1. Create an anchor ID

See the instructions above for how to create an anchor link manually. Find the heading, text or image you wish to jump to and add the anchor ID attribute using HTML.

Step 2. Add anchor link to menu

In the WordPress dashboard, navigate to Appearance > Menus. Create a menu, then click the Custom links dropdown. Insert the anchor ID you created, with a hashtag in front, then click Add to menu.

Remember, this won’t work properly on pages without the anchor ID, so creating a global menu like this on a multipage website is not a good idea.

Step 3. Set up conditions

Once you’ve created your menu, click the Manage locations tab. Under one of the provided menu locations, click + Conditional menu, then + Conditions. You can set the conditions so the menu only appears on certain pages.

Use a WordPress plugin to add anchor links

Lastly, you can install a plugin if all the methods above are too time-consuming.

Plenty of plugins can help you create anchor links, including return-to-top links, but let’s highlight one of the best: Easy Table of Contents.

This plugin works with Gutenberg, the Classic Editor and even page builders. You can manually insert ToCs or set it up so it inserts them automatically in every blog post and page.

Anchor link best practices

Now that you know how to create anchor links in WordPress, follow these tips to implement them well.

Place anchor links strategically

When implementing anchor links, place them on the correct pages. Whether it’s a ToC or a way to quickly skim FAQs, prioritize UX first and foremost.

Also, consider UX across devices and where anchor links might benefit mobile users. Something that fits nicely on a computer monitor may feel much more overwhelming on a phone.

Use the right anchor text

Anchor text is as important here as for any internal or external link. Good anchor text will improve SEO by helping search engines categorize your page’s structure and keeping things intuitive for visitors.

Use clear and direct wording so users know exactly where a jump link will take them. For example, if you’re using a ToC, use identical wording to the headings each link jumps you to. Avoid generic wording like “click here”.

Avoid clutter

Maintain a structured layout by using anchor links to organize your content. Resist the urge to overuse anchor links on pages that don’t need them or use too many anchor links on one page. A single ToC and a back-to-top link are usually enough.

Additionally, ensure your anchor links don’t open in a new tab, which is counterproductive.

Test your anchor links

Regularly test your anchor links, especially after updating content or altering headings. Try the anchor links on multiple devices and browsers, including screen readers.

Consider overall UX here. Does the screen feel cramped or cluttered after scrolling? Do you need more whitespace? Is text hidden under your sticky top header?

Style your anchor links

Distinguish anchor links from internal or external links through labeling or styling. Consider setting up “sticky” anchor links that follow users as they scroll rather than ones in the content itself or creating accordions that neatly hide your ToC under a clickable element.

Overall, make clear that these jump links help the user navigate the page.

Final thoughts: How to create anchor links in WordPress

Improving UX is always a good goal. Happy users stay longer, browse more pages and are ultimately more likely to become loyal customers.

Anchor links, though a minor feature, can have a significant impact. This is just one small but effective way to improve the UX of your WordPress website.

Another way to boost the UX is to use a faster hosting provider so slow-loading pages don’t have your visitors clicking away.

Bluehost offers affordable WordPress hosting that includes a Cloudflare content delivery network (CDN) for top performance and speeds. We also offer a quick and easy setup plus 24/7 support, so you always have access to help when you need it.