Key highlights
- Discover how to add an anchor link in WordPress to make site navigation smoother.
- Follow steps on how to create anchor links in WordPress with editors or plugins.
- Use WordPress anchor links to build a table of contents for long-form articles.
- Apply HTML anchor WordPress techniques for precise jump links and unique IDs.
- Learn how to add a hyperlink in WordPress and when to use anchor links instead.
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 in WordPress is one surprisingly impactful way to do this.
With simple steps, you can add an anchor link in WordPress or even use the WordPress editor to create jump links that improve your site’s navigation.
What is a hyperlink?
Before we talk more about WordPress 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 WordPress site, 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>
Just like learning how to add a hyperlink in WordPress, understanding hyperlinks is the first step toward using HTML anchor WordPress tags effectively when creating jump links.
What is an anchor link?
Anchor links in WordPress, often called page jumps or jump links, can help users quickly navigate a page. Unlike internal and external links, WordPress 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 anchor links in WordPress 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.
This demonstrates how easy it is to add an anchor link in WordPress with a unique identifier (using an id attribute) to guide readers directly to the right part of your content.
Also read: How to Design a Web Page
Why you should use anchor links
Including anchor links in WordPress 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 WordPress site’s 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 scrolling through the entire article, which keeps them engaged.
- Better search engine optimization (SEO): Anchor links are vital in organizing your page in a way that search engines 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 when you add 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
Not sure where to add anchor links in WordPress? 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 table of contents. You can add anchor links automatically using plugins like Easy Table of Contents or insert them manually to let users jump to specific sections.
- Lists and indexes: If your page includes FAQs or indexes with multiple entries, you can use anchor link select options to help readers move quickly to their chosen section.
- Back to top/bottom: A quick link that jumps users to the top or bottom of the single 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: On landing pages or one-page websites, WordPress anchor links are essential for a smooth site’s navigation experience.
Challenges of using anchor links
While anchor links in WordPress 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, they need to be structured correctly so search engines understand your content. Poorly written anchor text, uncrawlable code, or incorrect use of the id attribute could hurt rankings.
- URL clutter: Poorly set up and organized anchor links can clutter the URL. Always use a unique identifier for each anchor link to keep things clean and 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. Always test them on desktop and mobile for a smooth site’s navigation 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 in WordPress to your content.
Also read: Beginner’s Guide to Higher Rankings & Organic Traffic
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
Enter a unique identifier (an id attribute) in this box. For example, “features” or “about-section.” This will be the anchor name that appears in your URL.
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.
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.
By following these practices, you’ll ensure that WordPress anchor links enhance user experience, SEO, and accessibility while keeping your WordPress site organized.
Final thoughts
Improving UX is always a good goal. Happy users stay longer, browse more pages and are ultimately more likely to become loyal customers.
Adding anchor links in WordPress may seem like a small step, but it can make a big difference in navigation, engagement, and SEO. By learning how to add an anchor link in WordPress, whether through the WordPress editor, HTML, or plugins, you make your content easier to read and your site’s navigation more intuitive.
Bluehost offers reliable 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.
Ready to grow online? Start with Bluehost Hosting and enjoy simple setup, reliable speed, and expert support anytime you need it.
FAQs
To learn how to add an anchor link in WordPress, start by assigning a unique HTML anchor ID to the heading or block you want to link to. In the WordPress block editor or Classic editor, add this ID in the advanced settings or in text mode. Next, highlight the text where you want to create links and insert a hyperlink with the hashtag prefix (e.g., #features). This setup lets users jump directly to the relevant section of your long article without endless scrolling.
Yes. You don’t always need coding skills to know how to add an anchor link in WordPress. Using the block editor, you can simply assign an HTML anchor in the advanced settings. You can also use a contents plugin like Easy Table of Contents to generate a clickable table of contents for a long article automatically.
These plugins help you create links to each relevant section and even let you add a menu item that jumps directly to a specific part of your page, giving visitors the exact information they’re looking for.
Several plugins make it simple to learn how to add an anchor link in WordPress without touching code. Popular options include Elementor, Easy Smooth Scroll Links, and Page Scroll to ID. If you’re working with long form content or a long article, the Easy Table of Contents plugin is a favorite because it can create links automatically for every heading.
These plugins offer more features like smooth scrolling, customizable designs, and support for adding anchor links to any menu item, ensuring visitors can quickly reach the relevant section they want.
Yes, WordPress supports smooth scrolling for anchor links, which improves navigation on long-form content. Smooth scrolling is typically enabled through WordPress themes or plugins that animate the scroll action when users click jump links. This feature provides a seamless and user-friendly experience on a single page.
Add a unique anchor name as an HTML ID to the target section via the WordPress block editor’s advanced tab. Then, create a hyperlink using the link icon or chain link icon that references the anchor name with a hashtag (e.g., #section-id) to navigate within the same page.
Use the entire URL of the external page followed by the anchor name, prefixed with a hashtag (e.g., https://example.com/about#team). This creates an anchor link that directs users to a specific section on a different WordPress page or external web page.
Use clear, descriptive anchor text that helps users find relevant content and assists search engines in understanding page structure. Avoid overusing anchor links to prevent clutter. Ensure accessibility by following web standards and test anchor links across devices to maintain SEO value.
In the Classic Editor, you can manually create anchor links, making it easy to navigate long-form content on your WordPress site. Follow these steps:
– Add an anchor ID: Switch to the HTML or Text view in the editor. Locate the heading tag or section where you want the anchor link to jump. Add an id attribute to it, for example: html <h2 id=”anchor-id”>Your Heading</h2>
– Create the link: Switch back to the Visual editor. Highlight the text or element that will serve as the clickable link. Click the link icon (chain link icon) and enter the anchor link using a hashtag followed by the anchor ID, like this: #anchor-id
– Save and test: Save your changes and preview the page to ensure the anchor link works correctly.
Yes. Anchor links improve content organization, making it easier for search engines to crawl and understand page hierarchy. They enhance user experience by helping site visitors navigate long-form articles, which can reduce bounce rates and increase engagement.
A hyperlink connects to any page or resource, internal or external. An anchor link is more specific, it’s used when you want to jump to a relevant section within a long article. In practice, knowing how to add a hyperlink in WordPress helps with general navigation, while learning how to add an anchor link in WordPress is best for creating a table of contents or linking to exact points in your content.
To easily create anchor links in the WordPress Gutenberg editor, follow these steps:
1. Select the block (heading, paragraph, image, etc.) you want to jump to.
2. In the Block Settings panel, located in the upper right corner, open the Advanced tab.
3. Find the HTML Anchor input box and enter a unique anchor name (without spaces).
4. Highlight the text or element that will serve as the clickable anchor link.
5. Click the link icon and input the actual link by typing the anchor name prefixed with a hashtag (e.g., #example-anchor).
6. Save and preview your page to test the anchor link.
Follow these helpful tips when using anchor links in WordPress:
– Place anchor links strategically on long pages, such as tables of contents, FAQs, or landing pages, to enhance the user experience.
– Use clear, descriptive anchor text that helps site visitors find content quickly and assists search engines in understanding page structure.
– Avoid clutter by limiting the number of headings that receive anchor links; a single table of contents and a back-to-top link are usually sufficient.
– Regularly test anchor links across devices and browsers to ensure accessibility and responsiveness.
– Keep anchor names unique and consistent to prevent broken links.
– Style anchor links distinctively so users recognize them as navigation aids.
– Ensure anchor links open within the same page to maintain a smooth navigation flow.
Write A Comment