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:

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.

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.
table of contents anchor link example
This table of contents demonstrates a visitor clicking on an anchor link, which sends them to their desired section on the same page.
clicking a button that sends you back to the top of the page
This ”Back to top” button offers a rapid way to return to the top of a page.

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

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.

picking a piece of text that's good for adding anchor link

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.

opening up the Block tab

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:

making an HTML anchor link in WordPress
  • 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.
highlighting text and choosing to link it

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

pasting the HTML anchor links in WordPress

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

an anchor link in WordPress that we just created

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.

anchor links in WordPress working on the frontend

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.
looking at the text we want to link
  • 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.
looking at the right header

Switch to the Text editor.

clicking on the Text tab in WordPress

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.

finding the right header

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>
the header with an anchor id

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.
highlighting text to make a link

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.

the anchor link in WordPress HTML editor

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.
highlighting text and clicking insert link
  • Paste or type in the HTML anchor you created earlier.
  • Add a “#” before the anchor.
  • Click Apply.
inserting an HTML tag as a link

You should now see a link in the editor:

the link all set in WordPress

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

clicking the anchor links in WordPress

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.

showing the table of contents on the frontend

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.

putting in a shortcode to show table of contents anchor links in WordPress

Final tips for anchor links in WordPress 🎯

It’s easy to get carried away with anchor links and table of contents once you learn how to create them.

So, here are tips to implement anchor links the right way:

  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!

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Leave a Reply