Anchor links are a simple yet powerful tool for improving navigation on longer WordPress pages or posts. They allow users to quickly jump to specific sections on the same page by clicking a link without the need to scroll through large amounts of content. Anchor links can enhance user experience and SEO, making them a must-use feature for long-form content or single-page websites.
This guide will walk you through creating anchor links in WordPress using the Classic Editor, Gutenberg Editor, and WPBakery Page Builder. We’ll also discuss the structure of anchor links, best practices, and common use cases.
What is an Anchor Link?
An anchor link is a hyperlink that directs the user to a specific section on the same page instead of taking them to a different page. For example, in a lengthy blog post, you can create a table of contents at the top, and each link will jump to the relevant section of the article.
Example:
<h2 id="section1">Section 1: What is an Anchor Link?</h2><a href="#section1">Go to Section 1</a>In this example, when users click on “Go to Section 1,” they are taken directly to the part of the page where the heading “Section 1: What is an Anchor Link?” is located.
Benefits of Using Anchor Links:
- Improved Readability: In long articles, readers can quickly jump to the part that interests them without scrolling endlessly.
- Better Navigation: Anchor links can be used to create easy-to-navigate sections on single-page websites, such as “About,” “Services,” and “Contact.“
- Enhanced User Engagement: Users are more likely to stay on your page longer if they can quickly find the information they want.
- SEO Boost: Search engines like Google use anchor links to understand your page’s structure better, potentially improving your SEO rankings.
The Structure of Anchor Links
An anchor link consists of two essential parts: the ID (identifier) and the link.
- ID (Identifier)
The ID is a unique identifier you add to the HTML element you want to link to (like a heading or paragraph). For example:
<h2 id="section1">Section 1: Technical SEO</h2>The id= “section1” makes this heading identifiable as an anchor point.
- Link
The clickable part that directs the user to the ID. It’s created using the hashtag # followed by the ID. For example:
<a href="#section1">Go to Section 1</a>The href=” #section1″ tells the browser to scroll down to the element with the ID section1.
Example in Action:
If you’re writing a detailed article about SEO, you could add anchor links to each major section:
<h2 id="on-page-seo">On-Page SEO</h2>
<h2 id="off-page-seo">Off-Page SEO</h2>
<h2 id="technical-seo">Technical SEO</h2>At the top of your article, you can then add a table of contents that links to these sections:
<ul>
<li><a href="#on-page-seo">On-Page SEO</a></li>
<li><a href="#off-page-seo">Off-Page SEO</a></li>
<li><a href="#technical-seo">Technical SEO</a></li>
</ul>
Users who click “On-Page SEO” will be taken straight to that section.
Why Use Anchor Links?
- Enhanced User Experience
Readers can easily navigate to the content they are interested in, which is especially useful for long-form content. This reduces frustration and makes your website more user-friendly.
- Better Navigation on Single-Page Websites
For single-page websites, anchor links can be used to simulate navigation menus. Clicking a menu item will smoothly scroll the user to the corresponding section, creating a seamless browsing experience.
- Improved SEO
Anchor links contribute to internal linking, which helps search engines like Google better understand the structure of your page. This can improve the indexation of your content and lead to better rankings.
- Increased User Engagement
Enabling users to find the content they’re looking for quickly can increase their time on your site and reduce bounce rates, which is beneficial for user engagement metrics.
- Accessibility
Anchor links also make your site more accessible, allowing users with disabilities or those using screen readers to navigate your content more efficiently.
How to Create Anchor Links in WordPress
Here’s how to create anchor links using different WordPress editors.
Creating Anchor Links in the Classic Editor
If you’re using the Classic Editor， you must manually edit the HTML to add anchor links. Here’s how:
Step 1: Add a Unique ID to Your Target Element
- Open the post or page you want to edit in the Classic Editor.
- Switch to the “Text” mode to edit the HTML.
- Find the element (like a heading or paragraph) you want to link to and add a unique ID. For example:
<h2 id="section1">Section 1: What is an Anchor Link?</h2>
Step 2: Create the Anchor Link
- Switch back to the “Visual” mode.
- At the top of your post (or wherever you want the link), highlight the text you want to make clickable.
- Click the “Insert/Edit Link” button in the toolbar.
- In the URL field, enter #section1 (the ID you set earlier).
<a href="#section1">Go to Section 1</a>Step 3: Save and Preview
Once you’ve saved the changes, you can preview your page to ensure the link works as expected. Clicking the link should scroll the page to the section with the matching ID.
Creating Anchor Links in the Gutenberg Editor
Gutenberg is WordPress’s block editor, offering a more streamlined way to create anchor links.
Step 1: Add an ID to a Block
- Open the post or page you want to edit in Gutenberg.
- Select the block to which you want to add the anchor (such as a Heading block).
- In the right-hand sidebar, under “Advanced,” find the “HTML ANCHOR” field.
- Enter your unique ID (for example, section2).
Step 2: Add the Anchor Link
- Go back to the top of your post or wherever you want to add the link.
- Highlight the text you want to make clickable and click the link icon in the toolbar.
- In the URL field, type #section2.
- Press “Enter” to create the link.
Step 3: Save and Test
Save your post and preview it. When you click it, the link should jump to the section with the anchor ID.
Creating Anchor Links in WPBakery Page Builder
WPBakery is a famous drag-and-drop page builder for WordPress. You can easily create anchor links using this tool.
Step 1: Add a Unique ID to the Element
- Open the page or post in WPBakery Page Builder.
- Click on the element you want to link to and go to its settings.
- In the settings, find the “Element ID” field and enter a unique ID (e.g., section1).
Step 2: Create the Anchor Link
- Select the text or button that you want to link from.
- Open the link settings and enter #section1 as the URL.
- Save the changes.
Step 3: Save and Preview
After saving your work, preview the page to test the link.
Best Practices for Using Anchor Links
To get the most out of anchor links, follow these best practices:
- Ensure Unique IDs
Each ID must be unique within a page. If two elements have the same ID, the browser won’t know where to scroll, and the link may not work properly.
- Avoid Special Characters
IDs should not contain spaces, punctuation marks, or special characters. Stick to letters, numbers, and hyphens. For example, section-1 is fine, but section 1 or section#1 could cause issues.
- Use Clear Anchor Text
Avoid vague anchor text like “Click here” or “Learn more.” Instead, use descriptive text that tells users exactly where the link will take them. For example, “Go to the On-Page SEO section” is much more informative.
- Test Your Links
Always test your anchor links before publishing. Make sure that each link scrolls to the correct section. Your browser’s developer tools can help diagnose any issues.
- Avoid Naked URLs
Avoid displaying raw anchor URLs in your text (like https://example.com/#section1). Instead, use clear, descriptive link text that provides context to the user.
Use Cases for Anchor Links
Anchor links are helpful in many scenarios. Here are a few common examples:
- Table of Contents
For long blog posts, adding a table of contents at the beginning allows users to jump to specific sections without scrolling. This improves navigation and makes the content more digestible.
- Single-Page Websites
Anchor links are a great way to create navigation menus on single-page websites. Clicking on menu items like “About Us” or “Services” will scroll the user to those sections on the same page.
- Call-to-Action (CTA) Buttons
Use anchor links to direct users to specific actions, such as filling out a form or viewing a product. For example, a “Learn More” button can link to a detailed section further down the page.
- Scroll to Top Buttons
Adding a “Scroll to Top” button allows users to quickly return to the top of a long page without manually scrolling.
Frequently Asked Questions
- How are anchor links different from regular links?
Anchor links navigate within the same page, whereas regular links usually take you to a different page. Anchor links often enhance navigation within long-form content or single-page websites.
- Do anchor links help with SEO?
Yes, anchor links can be part of a good internal linking strategy, helping search engines understand your page’s structure and improving your page’s accessibility and user experience.
- How do I test anchor links?
The simplest way is to click the link and see if it takes you to the correct section. You can also use browser developer tools to inspect and troubleshoot any issues with your anchor links.
- Are there any plugins for creating anchor links?
Yes, many page builders like WPBakery and Elementor allow you to create anchor links easily. You can also use dedicated table of contents plugins that automatically generate anchor links for headings.
Conclusion
Anchor links are essential for improving user navigation, especially on long-form content and single-page websites. Allowing users to jump directly to specific sections enhances readability, boosts engagement, and positively contributes to SEO. Whether you’re using the Classic Editor, Gutenberg, or WPBakery Page Builder, adding anchor links is a simple process that can significantly improve the user experience on your site. By following best practices—such as using unique IDs, clear anchor text, and testing your links—you can ensure smooth navigation and better usability for your visitors.