Anchor Links in WordPress: How to Use Them Correctly

Anchor links not only improve the user experience on website pages and posts, but they’re useful for fast, interactive navigation within a page, often boosting SEO as a result. In this guide, you’ll learn how to set anchor links in WordPress using WordPress blocks, HTML, and plugins.

But first, use this table of contents made with anchor links!

📚 Table of contents:

• What is an anchor link?
• Common uses for anchor links in WordPress
• How to create anchor links in WordPress
• How to auto-add headings into a table of contents using anchor links

What is an anchor link?

An anchor link serves as a hyperlink within a page or post that the user clicks to navigate to another part of the page.

It’s a form of interactive internal link, but instead of sending users to another page on your site, they get directed to another section of the current page.

Furthermore, anchor links play a strong role in SEO efforts, seeing as how they help define the structure of a page for search engines and users, particularly when used as a table of contents.

In short, anchor links minimize scrolling, since a simple click brings visitors to their desired content.

Common uses for anchor links in WordPress

Take a look at the main uses of anchor links to better understand how you can implement them on your website:

• Table of contents: create a list of anchors to specific headers of the page or post; when a user clicks a table of contents item, they get routed to the correct header.
• “Back to top” button: often implemented as a counter-navigation item for a table of contents, a “back to top” link or button returns the user to the beginning of a page; it’s particularly useful for pages with lengthy content.
• Directories/wikis: a collection of data or content stored on one page often requires navigational links; this use of anchor links works similarly to a table of contents, but wikis and directories have different formats for navigation, along with anchor links scattered throughout content.
• Navigational menus on one-page websites and landing pages: a one-page website still needs a way for users to move around, so instead of a traditional menu that directs visitors to new pages, an anchor link menu auto-scrolls to relevant sections.
• Links and call to actions in hero banners: anchor links work well inside buttons and hero images, considering you can add a call-to-action button that, when clicked, sends users to a conversion form or checkout module.

How to create anchor links in WordPress (Block and Classic Editor methods)

Manually adding anchor links in WordPress can be done in both the Block (Gutenberg) Editor and the Classic WordPress Editor. We’ll show you how to set up anchor links using both.

• Adding anchor links in WordPress Block (Gutenberg) Editor
• Adding anchor links in WordPress Classic Editor (HTML)

Adding anchor links in WordPress Block (Gutenberg) Editor

Start by creating a page or post on WordPress. It’s best to work with anchor links when you’re done with your content.

Create a table of contents at the beginning of the post. Make a mental note of the text segment you intend to link; for this tutorial, we’ll link the “Bow Sweep” bullet point.

Scroll to the (already created) section that relates to the text you plan on linking. It’s best to keep the text for your link and header anchor the same, so as not to confuse the reader or yourself.

• Place a cursor before the header.
• Click the Block tab.
• Scroll down to open the Advanced section.

Find the HTML Anchor field.

Type in an HTML anchor that’s short and memorable. You can’t have spaces in an HTML anchor, so stick to one word or include dashes.

As you can see, we made a “bow-sweep” HTML anchor:

• Go back to that original text you intend to link; in this case, it’s an item in the table of contents.
• Highlight the text to link.
• Click the Link button.

In the new field, type “#” followed by the HTML anchor you just added to the header. Click Enter.

You’ll see on the backend that the text is hyperlinked:

Go to the frontend to test it out. Clicking the link shoots the page focus down to the desired anchor; in this case, the “Bow Sweep” header.

Adding anchor links in WordPress Classic Editor (HTML)

The WordPress Classic Editor doesn’t have a specific block or field for adding anchor links; rather, you use HTML within the Text editor. Don’t worry, there’s minimal coding, just copying and pasting.

• Open a page/post in WordPress.
• Create some content with headers, and the text you intend to link (like a table of contents).
• Find the text you’d like to link, for reference.

• Scroll to the header for which you want to add the anchor link.
• Highlight that header for quickly finding the correct spot when switching to the Text editor in the next step.

Switch to the Text editor.

Search for the highlighted text within the code. Sometimes, WordPress brings you right to it. The reason we suggest highlighting the text is that it’s easier to find, since the section remains highlighted in the Text editor.

Delete the header tag (<h1>, <h2>, <h3>…) and everything between it.

Paste this code into the same space (replace “example-anchor” with whatever you want, and “Example Header” with the header you had from before):

<h2 id="example-anchor">Example Header</h2>

You now have the anchor HTML set.

• Remain in the Text editor tab.
• Go to the text you would like to link. In this tutorial, it’s the “Bow Sweep” text in the table of contents.
• Highlight and delete the text.

Keeping the cursor in the same spot, paste this code in its place (replace “example-anchor” with the same anchor you used from the previous step, and replace “Example Text” with whatever text you want to use):

<a href="#example-anchor">Example Text</a>

Remember, you must include a ”#” before the HTML anchor text.

⌛Note: In this example, we have <li> tags in the HTML; those are for making a list item (bullet point), so you shouldn’t mess with those.

As an alternative, you can actually skip the HTML Text editor for adding the link.

To do this (after setting the anchor HTML in the Text tab):

• Go to the Visual tab.
• Highlight the desired text.
• Click Insert/Edit link.

• Paste or type in the HTML anchor you created earlier.
• Add a “#” before the anchor.
• Click Apply.

You should now see a link in the editor:

Finally, go to the frontend. Click on the link to see if it directs you to the right anchor header.

How to auto-add an anchor link table of contents

Manually creating a table of contents with anchor links is time-consuming.

An easier way is to install a plugin that automatically creates a table of contents for WordPress posts using all included header tags. There’s a little less control over which elements end up in your table of contents, but it’s a significantly faster method.

Several plugins exist for this task, but we recommend the Easy Table of Contents plugin.

The plugin automatically adds a table of contents with anchor links going to all headers within the content. But keep in mind that you won’t see anything in the editor; you must preview or publish the post to view the table of contents.

Easy Table of Contents lets you adjust which post types allow for automated table of contents. In addition, you can use the [ez-toc] shortcode to insert a table of contents anywhere, for both the Classic WordPress Editor and the Block (Gutenberg) Editor.

Final tips for anchor links in WordPress 🎯

1. Only use anchor links for very long content; you defeat the purpose of an improved user experience when you have a table of contents for a 200-word article.
2. Keep anchor text short; the point is to make things easier for the user.
3. Make sure the anchor text and header are the same phrases/words; users have expectations to see the same thing as what the link said.
4. Keep anchor links at the top of the page; this is best for immediate navigation.
5. Consider adding a “back to top” anchor link; it should either move with the user or sit at the page bottom.
6. Ensure that the anchored header is actually visible when the anchor link is clicked; having to scroll to find the header is no good.
7. Always test anchor links before publishing content; one wrong bit of HTML could result in a broken link.

How do you plan on using anchor links in WordPress? Please let us know in the comments!