How to Add WordPress Anchor Links: Simple Guide for 2025

Key highlights 

• Learn how to easily create WordPress anchor links using the block editor, Classic Editor or manual HTML anchor tags. 
• Understand how anchor links improve website navigation, boost user experience and help search engines understand your page’s structure. 
• Explore the best ways to add anchor links in long-form content, landing pages and one-page websites for better engagement. 
• Discover plugins that automatically add anchor links and generate a clickable table of contents from your heading tags. 
• Know how to avoid broken links, clutter and poor responsiveness when using jump links on your WordPress site. 

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

A high bounce rate might not be a reason to panic. The average bounce rate is approximately 50.9%, varying by industry. For eCommerce websites, 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 reliable” way to reduce your bounce rate and adding WordPress anchor links is one surprisingly impactful way to achieve this. 

What is a hyperlink?

Before we discuss anchor links further, let’s examine what a hyperlink is.

You probably already know about these links: coloured or underlined text that, when clicked, takes you to another web page. 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.uk/”>visit Bluehost</a> 

What is an anchor link?

Anchor links, also known as page jumps or jump links, enable users to 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 WordPress 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 organisation, 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 who struggle to navigate 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 optimisation (SEO): Anchor links are vital in organising your page in a way that search engine indexers can understand. Descriptive anchor text can enhance SEO by informing Google about the content of your page. Additionally, your anchor links may appear at the bottom of your Google Search results, providing you with more opportunities to generate 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.

In short, anchor links increase engagement and user satisfaction, potentially leading to more time spent browsing your website and a lowered bounce rate.

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 multiple individual sections, such as an index or an FAQ page, you may want to include anchor links that point 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 organised jump links, poorly written or blank anchor text or uncrawlable HTML code could hurt your SEO. 
• URL clutter: Poorly set up and organised anchor links can clutter the URL. Clean URLs are much more user-friendly. 
• Accessibility issues: While jump links can help with accessibility, they can be a hindrance if not implemented 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 behaviour, 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. 

1. 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 

You’ll find this in the Advanced tab. If it’s not visible. 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 can also 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 mode and you should jump instantly to the anchor point you set. This is the easiest method if you’re learning how to add an anchor link in WordPress using the block editor. 

2. Add anchor links in the Classic Editor 

This section shows you how to create a jump link in WordPress using the Classic Editor by editing the HTML directly. If you prefer the Classic Editor, creating anchor links in WordPress 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.

3. 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

You can edit HTML in multiple areas of your WordPress site. Some plugins offer even more flexibility. 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.

4. 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 

Refer to the instructions above for guidance on creating 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 an anchor link to the menu 

In the WordPress dashboard, navigate to Appearance > Menus. Create a menu, then click the Custom links dropdown. Insert the anchor ID you created, preceded by a hashtag and 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.

5. 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 explore one widely used option : Easy Table of Contents. 

This plugin works with Gutenberg, the Classic Editor and even page builders. You can manually insert a Table of Contents (ToC) or set it up to insert it automatically in every blog post and web page.

Anchor link best practices 

Now that you know how to create anchor links in WordPress, let’s follow the tips mentioned below to implement them well. 

1. Place anchor links strategically 

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

When implementing anchor links, place them on the correct pages. Whether it’s a ToC or a way to quickly skim FAQs, prioritise 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. 

2. Use the correct 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 categorise 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 to. Avoid generic wording like “click here”. 

3. Avoid clutter 

Maintain a structured layout by using anchor links to organise 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 table of contents (ToC) and a back-to-top link are usually sufficient. 

Additionally, ensure that your anchor links don’t open in a new tab, as this can be counterproductive. 

4. 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? 

5. Style your anchor links 

Distinguish anchor links from internal or external links by labelling or styling them. Consider using “sticky” anchor links that stay visible while scrolling or accordions that hide your ToC under a clickable element. 

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

Final thoughts

Enhancing UX is always worthwhile, it encourages visitors to stay longer and explore more. 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 enhance the user experience (UX) of your WordPress website. 

Another way to boost the UX is to use a faster hosting provider. This way,slow-loading pages don’t cause your visitors to leave your site prematurely.  

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

FAQs