Menu
Disclosure: ULTIDA's content is free & reader-supported. We may earn a commission if you click & buy through our links. Your support helps us create the best content & make a difference.
Tutorials

How To Create WordPress Anchor Links? (Easy Guide)

how to create wordpress anchor links

Are you trying to learn how to create WordPress anchor links (aka jump links)?

Keeping your visitors engaged is crucial to your success as a content creator or website owner.

You must create a user-friendly experience allowing them to navigate your content EASILY.

One effective way to accomplish this is by using anchor links.

This post covers:

An anchor link, also known as a jump link or a bookmark link, is a type of hyperlink that allows visitors to jump to a specific section of a page or post.

By clicking on an anchor link, visitors are taken DIRECTLY to the relevant section of the page rather than having to scroll through the entire page to find it.

Anchor links are handy for long-form content, such as blog posts, where visitors may not have the time or patience to read the entire article.

They can click on the relevant anchor link to get to the information they’re looking for instantly.

Example Of Anchor Links

Let’s look at an example to understand better how anchor links work.

Suppose you have a long-form blog post that covers several topics. You can create anchor links for each topic and place them in a table of contents at the top of the page (like in this post).

When visitors click on a topic link, they are taken directly to that section of the page.

This makes it EFFORTLESS for them to find the information they’re looking for without scrolling through the entire page.

Using anchor links on your website offers several advantages.

Pros

  • Anchor links improve the user experience by making it easier for visitors to navigate through your content. If you have very long articles, then anchor links are a must-have.
  • Sharing direct links within an article on social media is faster and more efficient.
  • They can also increase the time visitors spend on your website, as they can quickly find the information they’re looking for without having to spend time scrolling through the entire page (which may make them leave the page early).
  • Anchor links can also improve your website’s SEO. When you use anchor links, you create internal links within your website, which can help search engines understand the structure of your content. This can lead to better indexing and higher rankings in search engine results pages.

Cons

Like every solution, there are always a few setbacks to consider.

  • Anchor links can be distracting if overused. If your page has too many anchor links, it can overwhelm visitors, and they may not know where to start.
  • They can be problematic for users who rely on screen readers or keyboard navigation. If the anchor links are incorrectly labeled, these users may have difficulty navigating the page.
  • There is a possibility that they’re hard to implement if you’re not familiar with HTML or CSS. However, creating anchor links in WordPress is easy with the right tools and knowledge (Gutenberg makes it super easy!).
  • If you’re changing domains or needing to add 301 redirects, it’s important to note that the identifier (#) is never sent to the server. This can complicate things and mess up your anchor links, making them useless.

There are several ways to create anchor links in WordPress.

In this section, I’ll cover three methods: manually creating anchor links using the classic editor and Gutenberg, using a plugin to create a table of contents, and adding jump links to your menu.

1. How To Manually Create Anchor Links Using Classic Editor In WordPress

If you’re using the classic editor in WordPress, you can manually create anchor links by following these steps:

In Visual Mode

  1. Highlight the text you want to link to.
  2. Click on the “Insert/edit link” button in the toolbar.
  3. In the “URL” field, add a “#” symbol followed by the name you want to give the anchor link. For example, if you want to create an anchor link for the “FAQ” section, you could use “#faq” as the URL.
  4. Click “Add Link” to save the anchor link.

add anchor links in classic editor

Repeat these steps for each section you want to link to. When you’re done, add the anchor links to the top of the page, like a table of contents (or even within text).

In Text Mode

This mode requires some technical knowledge as you need to know some HMTL to add it.

Go to text mode and find the text that you want to link.

The proper syntax is as follows:

<a href=”https://yourlink.com”>Link example</a>

Where the URL you are linking to is within the apostrophes and the label (text of the link) follows after the ending > parameter.

Always ensure the closing </a> tag comes after the label.

2. How To Add An Anchor To Another Page Or Post

To link to an anchor on another page or post in WordPress, follow these steps:

  1. Create the anchor link on the page or post you want to link to.
  2. Copy the URL of the page or post.
  3. Add a “#” symbol followed by the anchor link’s name to the URL’s end.
  4. For example, if you want to link to the “FAQ” section of a page with the URL “https://www.example.com/page/,” you would use “https://www.example.com/page/#faq” as the URL.

3. How To Add Jump Links To Menu In WordPress

To add jump links to your menu in WordPress, follow these steps:

  1. Create the anchor links on the page or post you want to link to.
  2. Go to Appearance > Menus in your WordPress dashboard.
  3. Select the menu you wish to add the jump links to.
  4. Click on “Custom Links” in the menu editor.
  5. In the “URL” field, add a “#” symbol followed by the name of the anchor link.
  6. For example, if you want to add a link to the “FAQ” section of a page with the URL “https://www.example.com/page/”, you would use “https://www.example.com/page/#faq” as the URL.
  7. Click “Add to Menu” to add the jump link to your menu.

add jump link to menu

4. How To Add A Table Of Contents With A Plugin

If you don’t want to create anchor links manually, you can use a plugin to add a table of contents to your page or post.

One popular plugin for this is “Table of Contents Plus.”

add anchor link with wordpress plugin

To add a table of contents to your page or post using this plugin, follow these steps:

  1. Install and activate the mentioned plugin. (If you’re new, I create a tutorial on how to install a WP plugin.)
  2. Go to Settings > TOC+ in your WordPress dashboard.
  3. Configure the settings for your table of contents, such as the heading levels to include and the position of the table of contents.
  4. Save your settings.
  5. Add the shortcode “[toc]” to your page or post where you want the table of contents to appear.

Another great plugin you can use is Easy Table of Contents, which is also available for free from the WordPress repository.

5. How to Create Anchor Links in WordPress with Gutenberg

If you’re using the new block editor in WordPress, here’s a step-by-step guide to creating anchor links:

  1. Create a new block and add a “Heading” block.
  2. Type the text you want to use as the anchor link, such as “FAQ.”
  3. Click on the “Advanced” tab in the block settings (on the right side).
  4. In the “HTML Anchor” field, add a name for the anchor link, such as “faq.”
  5. Repeat these steps for each section you want to link to.
  6. Add the anchor links to the top of the page, like a table of contents.

add jump anchor link in gutenberg

6. Advanced Anchor Linking Techniques

If you’re comfortable with HTML and CSS, you can use several advanced techniques to enhance your anchor links.

For example, you can use CSS to add hover effects to your anchor links or JavaScript to create smooth scrolling effects.

However, using these techniques sparingly and with caution is essential, as they can sometimes hurt your website’s performance. (I personally DON’T use them.)

To get the most out of your anchor links in terms of SEO, consider these tips:

  1. Use descriptive anchor text that accurately describes the content of the linked section.
  2. Avoid generic anchor text like “click here” or “read more.”
  3. Use relevant keywords in your anchor text, but don’t overstuff it with too many keywords.
  4. Place your anchor links within the body of your content rather than in the header or footer (a table of contents is the most common).
  5. Use anchor links strategically, and only link to relevant sections of your content.
  6. Test your anchor links to ensure they work properly, and fix any broken links (I always test every link multiple times, even after publishing an article).
  7. Use anchor links to improve the user experience, not to manipulate search engine rankings.

Conclusion

Anchor links are a simple but effective way to improve the UX on your website, increase engagement, and boost your SEO.

By following the steps and best practices outlined in this article, you can create practical and user-friendly anchor links that enhance the usability of your content.

If you’re not already using anchor links on your website, now is the time to start.

By implementing this technique, you can create a friendlier experience for your visitors, ultimately leading to more tremendous success for your website.

FAQs About Creating WordPress Anchor Links

What is an anchor link in WordPress, and how do I create one?

An anchor link is a hyperlink that takes you to a specific section within a page. To create one in WordPress, first add an ID to the section you want to link to by editing the HTML of the block or element (e.g., “

“). Then, link to it by creating a hyperlink pointing to the ID (e.g., “Go to Section 1“).

Can I create anchor links in Gutenberg without using HTML?

Yes, in the Gutenberg editor, you can use the “HTML Anchor” field in the block settings (Advanced section) to add an ID to a block. Then, use the Link option in any text block to link to that ID with a hashtag (e.g., #section1).

How do I create anchor links in WordPress menus?

To create an anchor link in a WordPress menu, go to Appearance > Menus, select the menu you want to edit, and add a custom link. In the URL field, enter the hash symbol followed by the anchor ID (e.g., “#section1”). In the Link Text field, enter the text you want to appear in the menu.

Why isn’t my anchor link working?

Common reasons include the ID being missing or incorrect in the destination section, there might be a typo in the anchor link, or JavaScript and CSS styles interfering with the link behavior. Ensure the ID is unique and correctly referenced in the link.

Can anchor links work across different pages?

Yes, anchor links can link to a specific section on another page. To do this, include the full URL of the page followed by “#” and the section’s ID (e.g., “http://example.com/page2#section2”). Ensure the destination page has the corresponding section ID set up correctly.

::

Note: This article was originally published on May 12, 2023. But our team regularly reviews it and updates it with necessary improvements for accuracy.

About Author

Ales has been in love with computers ever since he got Amiga 500 almost 30 years ago. He earned his bachelor’s degree in Computer science from Ljubljana University, Slovenia. In 2010 he co-founded PremiumCoding, a website that makes awesome WordPress themes that are also for sale on ThemeForest. In the past few years, he focused mainly on combining web design, code and photography into a seamless experience.