Anchor links, also known as jump links or skip links, improve navigation and user experience on longer or text-heavy WordPress pages and posts by reducing scrolling. They allow users to quickly jump to specific sections of content on the same page by clicking on a link.

In this guide, we'll go over all the steps and considerations for adding anchor links in WordPress, includingClassic Editor, Gutenberg Editor and WPBakery Page BuilderThe implementation method in the

What is an anchor link?

Anchor links are ahyperlink, link, which doesn't take you to a new page, but jumps to a specific part of the same page. For example, if you're reading a longer article and there's a table of contents at the top, you can click on the link to go directly to the section you're interested in.

Typically, anchors are added to text elements such as headings or paragraphs, but they can also be added to menu items, buttons, images, or forms.

Why use anchor links?

Using anchor links improves the user experience of your website, allowing users to quickly find what they are looking for without endless scrolling, and also facilitates web accessibility. Anchor links help search engines such as Google to better understand your page structure, which in turn improves your website's ranking.

Structure of anchor links

To understand anchor links, let's break down their structure. Anchor links consist of two main parts:

1. ID (identifier)

This is the unique identifier you add to the element you want to link to. In HTML, you can add an ID to an element like this:

<code><h2 id="section1">section1</h2>

Here.id="section1" is the unique identifier.

2. Links

This is the clickable section that jumps to the ID you created. use the well number (#) followed by the ID. for example:

<code><a href="#section1">Go to Part 1</a>

href="#section1" section tells the browser to jump to the element with the ID "section1" when clicking on the link.

How to Create Anchor Links in WordPress

Using the WordPress Classic Editor

The first step is to introduce the method of adding anchor links in TinyMCE's classic editor, which is the classic way of editing posts and pages in WordPress.

1. Add a unique ID for the element

1. Open the post or page to which you want to add an anchor link.
2. Switch from visual mode to text mode for direct editing of HTML.
3. Find the section of content to which you want to attach an anchor.
4. Adds a unique ID to the element, for example:

<code><h2 id="section1">Section 1</h2>

If you want to add an ID for a specific word or phrase in a paragraph, you can add it like this:

<code><p>It's a <a id="specificWord">specific word</a> Examples of.</p>

2. Link to Anchor

1. Switch back from text mode to visual mode.
2. Select the text that will be used as the link and click "Insert/Edit Links".
3. In the pop-up window, use the well number (#) followed by the ID you created:

<code><a href="#section1">Go to section 1</a>

Click "Add link", save the changes, and you're done creating anchor links in the Classic Editor.

3. Add anchors from the navigation bar

1. In the WordPress Info Center, go to "exterior condition" and then go to "menu".
2. In the menu editor, click "Customized links"Unfold it.
3. To add a link to the target page, add the well number (#) to your link along with the element ID:

<code><a href="#section1">Go to section 1</a>

Save the changes and view the results.

Using the Gutenberg Editor

Next up is how to create anchor links in the Gutenberg editor, which is the newer block-based editor in WordPress.

1. Add a unique ID for the element

1. Open the post or page to which you want to add an anchor link.
2. Select the block to which you want to add an anchor point.
3. In the block settings, scroll down and click on "Edit in HTML".
4. Find the content section to which you want to attach the anchor and add a unique ID to the element:

<code><h2 id="section1">Section 1</h2>

Alternatively, you can select the block by going to the right-hand block settings in the "high level" section and enter your unique HTML anchor point there.

2. Link to Anchor

1. Click on "Visual Editing" to switch back to the text block.
2. Select the text that will be used as the link and click "Link" in the toolbar.
3. In the pop-up window, use the well number (#) followed by the ID you created:

<code><a href="#section1">Go to Part 1</a>

Press "Enter" button, save the changes, and you're done adding anchor links to Gutenberg.

Creating anchor links in the WPBakery page builder

Finally, let's explore how to add anchor links in WPBakery Page Builder, which allows you to add anchors to any element in a WordPress page or post.

1. Add a unique ID for the element

1. Select and add the element to which you want to add the anchor (or in other words, the destination to which the link will jump).
2. Opens the element's edit window.
3. Scroll down to the "Element ID" section and add your unique ID:

section 1

2. Link to Anchor

1. Select and add the element to which you want to add an anchor link (in other words, the element that will jump to the destination when clicked), e.g. "buttons".
2. Opens the element's edit window.
3. Navigate to the "URL (link)" section and click "Select URL".
4. In the pop-up window, use the well number (#) followed by the ID you created:

<code><a href="#section1">Go to section 1</a>

Click "Set Link" to save the changes and check how your anchor link works!

Best Practices for Anchor Links

Here are some best practices for using anchor links in WordPress:

1. Ensure unique IDs

When creating element IDs, make sure they are unique on the page (or the same HTML document). Duplicate IDs can lead to unexpected jump behavior.

2. Avoid using special characters in IDs

Element IDs cannot contain spaces, punctuation, or special characters, nor can they begin with a number or a dash (-). While HTML allows this, it can cause problems in other contexts, such as CSS and JavaScript, so it's best to avoid it as much as possible.

3. The link starts with "#" but does not contain "#" in the ID.

For example, the link should be "#section1" and the ID should be "section1". This is a common error that can cause anchor links to not work properly.

4. Avoid using bare anchor links

A bare or raw anchor link is a link that uses the URL itself as an anchor, for example https://example.com. While they may be needed in some situations, they lack context and do not provide the same descriptive anchor text as the SEO Advantage.

5. Make anchor text clear and descriptive

Do not use vague phrases such as "learn more", "click here", or "continue"!Instead, use more specific text, such as "Click here to download the user manual PDF" or "Learn more about our team". This improves web accessibility and helps users understand where the link will take them.

6. Test anchor links for proper functioning

Always test anchor links to make sure they are working properly. Ineffective links can frustrate users and hurt your SEO.

When to use anchor links? (Example)

Anchor links in WordPress are very useful in many situations. Here are some examples:

1. Table of contents

If you have a long article, a table of contents with anchor links at the top can help readers jump to the section they want to read.

2. Single-page navigation

For one-page websites, anchor links help users to quickly reach different sections such as "About", "Services" and "Contact".

3. Call to Action (CTA)

Use anchor links to direct users to perform specific actions, such as filling out a form or viewing a product.

4. Long-form content

Break up long content into sections with anchor links so readers can easily find the information they need.

5. Scrolling back to the top

Introducing a "scroll back to top" button (usually located in the bottom right corner of a website) can help users return to the top and take quick action.

Frequently Asked Questions

1. What is the difference between an anchor link and a regular link?

Anchor links point to a specific part of the same page, while regular links usually take you to a different page.

2. Can anchor links improve SEO?

Yes, anchor links are part of an internal linking strategy that helps search engines understand the structure and importance of the page content, thus improving SEO.

3. Can anchor links improve accessibility?

Yes, anchor links can help users (especially those with disabilities) navigate long content more efficiently, thus improving accessibility.

4. How do I test if my anchor links work?

Anchor links can be tested by clicking on them to see if they take you to the right section. Browser developer tools can also be used to check if there are any issues.

5. Is there a plugin that can help me add anchor links to WordPress?

Yes, there are plugins that can help you create and add anchor links to any element on your WordPress layout, such as WPBakery Page Builder.

reach a verdict

Adding anchor links in WordPress can greatly improve your site's navigation, user experience, SEO, and accessibility. By following the methods outlined in this guide, anchor links can be easily created in WordPress using the Classic Editor, the Gutenberg Editor, or the WPBakery page builder. Each method has its merits, but as mentioned earlier, WPBakery stands out by allowing you to add anchor links to any element on the page.