Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to “Easily” Add Anchor Links in WordPress (Step by Step)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Are you looking for an easy way to add anchor links to your blog posts and pages?

Anchor links are often used in the table of content sections because they help users move up and down a lengthier article without reloading the page. It can also help with SEO as Google may show your content in featured snippets.

In this guide, we will show you how to easily add anchor links in WordPress.

How to add anchor links in WordPress wp

An anchor link is a type of link on the page that brings you to a specific place on that same page. It allows users to jump to the section they’re most interested in.

Anchor link preview

As you can see, clicking on the anchor link takes the user to the specific section on the same page.

Anchor links are commonly used in lengthier articles as the table of contents which allows users to quickly jump to the sections they want to read.

Another use of anchor links is to create bookmark links on your WordPress site. This allows you to share the bookmark link on social media or email newsletters, so when the page loads your users immediately jump to the section you want them to see.

Why and When Should You Use Anchor Links?

An average user spends less than a few seconds before deciding if they want to stay or leave your WordPress website. You have just those few seconds to convince users to stay.

The best way to do that is to help them quickly see the information they’re looking for.

Anchor links make this easier by allowing users to skip the rest of the content and jump directly to the part that interests them. This improves user experience and helps you win new customers/readers.

Anchor links are also great for WordPress SEO. Google can display several anchor links in the search results as a jump-to link.

Jump to links in search results

This is proven to increase the click-through rate in search results. In other words, you get more traffic to your website.

If you create a table of contents using anchor links, then Google can also display the headings in featured snippets.

Featured snippet preview

Having said that, let’s take a look at how to easily add anchor links in WordPress. Below is a list of all the topics we will cover in this guide.

Go ahead and click on any of these anchor links below, and you’ll be taken to that specific section.

If you just want to add a few anchor links or bookmark links in your article, then you can easily do so manually.

Basically, you need to add two things for an anchor text to work as intended:

  1. Create an anchor link with a # sign before the anchor text.
  2. Add the id attribute to the text where you want the user to be taken.

Let’s start with the anchor link part.

Step 1. Creating an Anchor Link

First, you need to edit or create a new post or page. Next, select the text that you want to link and then click on the insert link button in the WordPress block editor.

Select text and click link button

This will bring up the ‘insert link’ popup where you usually add the URL or look for a post or page to link.

However, for an anchor link, you’ll simply use # as a prefix instead of HTTP. Just enter the keywords for the section you want the user to jump to after that.

Enter the keyword you want to link

Then, click on the enter button to create the link. It won’t go anywhere yet, though. You will have to create the ID in the next step.

Some helpful tips on choosing what text to use as your anchor # link:

  • Use the keywords related to the section you are linking to.
  • Don’t make your anchor link unnecessarily long or complex.
  • Use hyphens to separate words and make them more readable.
  • You can use capitalization in anchor text to make it more readable. For example: #Best-Coffee-Shops-New-York.

Once you’ve chosen the right link text, it’s time to anchor it to an area, section, or text on the page that you want to show when users click on the anchor link.

Step 2. Add the ID attribute to the linked section

In the content editor, scroll down to the section that you want the user to navigate to when they click on the anchor link. Usually, it is a heading for a new section.

Next, simply select the block. Then, in the block settings on the left panel, click on the ‘Advanced’ tab to expand it.

Enter HTML  anchor

After that, you need to add the same text that you added as the anchor link under the ‘HTML Anchor’ field.

Make sure that you add the text without the # prefix.

You can now save your post and see your anchor link in action by clicking on the preview tab.

What if the section you want to show is not a heading but just a regular paragraph or any other block?

In that case, you need to click on the three-dot menu on the block settings and select the ‘Edit as HTML’ option.

Switching to the HTML View of a Block in the WordPress Block Editor

This will allow you to edit the HTML code for that particular block. You need to select the HTML tag for the element you want to point to. For example, <p> if it is a paragraph, or <table> if it is a table block, and so on.

Now, you need to add your anchor as the ID attribute to that tag, like the following code:

<p id="best-coffee-shops-manhattan">

Then, you can just click the ‘Edit Visually’ button again, and your anchor link will direct the user to that block when clicked.

How to Manually Add Anchor Link in Classic Editor

If you are still using the older classic editor for WordPress, then here is how you can add the anchor link/jump link.

Step 1. Create the anchor link

First, you’ll need to edit or create a new post or page. After that, select the text that you want to change into the anchor link and then click on the ‘Insert Link’ button.

Add anchor links in Classic Menu

After that, you need to add your anchor link with a # prefix followed by the slug you want to use for the link.

Step 2. Add the ID attribute to the linked section

The next step is to point the browsers to the section you want to show when users click on your anchor link.

For that, you’ll need to switch to the ‘Text’ mode in the classic editor. After that, scroll down to the section that you want to link to.

Switch to the text view

Now, locate the HTML tag you want to target. For example, <h2>, <h3>, <p>, and so on.

You need to add the ID attribute to it with your anchor link’s slug without the # prefix, like this:

<h2 id="best-coffee-shops-new-york">

You can now save your changes and click on the preview button to see your anchor link in action.

How to Manually Add Anchor Links in HTML

If you are used to writing in the Text mode of the old Classic Editor in WordPress, then here is how you would manually create an anchor link in HTML.

First, you need to create the anchor link with a # prefix using the usual <a href=""> tag, like this:

<a href="#best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</a>

Next, you need to scroll down to the section that you want to show when users click on the link.

Usually, this section is a heading, but it could be any other HTML element or even a simple paragraph <p> tag.

You need to add the ID attribute to the HTML tag and then add the anchor link slug without the # prefix.

<h2 id="best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</h2>

You can now save your changes and preview your website to test the anchor link.

The best way to automatically add anchor links in WordPress is by using the All in One SEO (AIOSEO) plugin. This method is suitable for users who regularly publish long-form articles and need to create a table of contents with anchor links.

AIOSEO is the best SEO plugin for WordPress, and it comes with a built-in WordPress block for adding a table of contents.

For this tutorial, we’ll use the free AIOSEO Lite version because it includes the table of contents block. There’s also an AIOSEO Pro version that includes more features to help you rank better on search engines.

The first thing you need to do is install and activate the AIOSEO plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you’ll see the setup wizard. Simply click the ‘Let’s Get Started’ button and follow the onscreen instructions.

Click let's get started AIOSEO setup wizard

For more details, please see our guide on how to set up All in One SEO for WordPress.

Next, you can create or edit a new post or page where you’d like to add anchor links. Once you’re in the content editor, simply click the ‘+’ button and add the ‘AIOSEO – Table of Contents’ block.

Add an AIOSEO Table of Contents Block to the Post or Page

The plugin will automatically detect different headings on your page and show them in the table of contents.

You can further customize each anchor link in the block. For instance, there is an option to change the ‘List Style’ from bullets to numbers in the settings panel on the right.

Customizing Your Table of Contents

Plus, you can rename the headings, rearrange their order in the table of contents block, and hide specific headings.

You can now save your changes and preview your article. The plugin will automatically display a list of anchor links as your table of contents.

Your Table of Contents is a List of Links to Headings in the Post or Page

For more detailed instructions, see our article on how to add a table of contents in WordPress.

We hope this article helped you learn how to easily add anchor links in WordPress. You may also want to see our tips on how to properly optimize your blog posts for SEO and our pick of the best WordPress page builder plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

48 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    Can I ask, I have several items in the menu where a link with # at the end is set. It’s like this on purpose. I will give an example. In the menu there is an item price list with # which leads nowhere. Only after hovering the mouse will the menu expand, which leads to individual price lists. Google search console is bothered by this practice, because the link does not lead anywhere. Can it be solved somehow?

    • WPBeginner Support says

      For that you could look to create a pricing page that links to the subpages in your menu.

      Admin

      • Jiří Vaněk says

        That is, instead of #, which leads nowhere, create at least some informative page with some text. Ok, that sounds like a very good yet simple and quick solution. Thanks. I didn’t expect my solution to bother Google as an inactive link.

  3. Pavlína Radochová says

    Hello, thank you for the post.
    I would like to ask you for help: how can I make a html anchor to the page title?

    • WPBeginner Support says

      Most page titles should be at the top of the page so unless your theme is placing it elsewhere you should be able to link directly to a page to achieve what you’re wanting without needing an anchor link.

      Admin

  4. Ahmed Abo Rwash says

    Hello, Dears
    I need your help as I made one item from my navigation menu as anchor link, and it works with me only on my home page, but if I browse any other page and try to click this item in the navigation menu, to transfer me to the same area at the home page it’s didn’t work so how can I fix that

    • WPBeginner Support says

      If you want the anchor link to work on other pages then you would want to ensure your menu link has the entire URL from https to the end and that should solve this issue.

      Admin

  5. Bushra Muzaffar says

    Helpful… the new block editor in WordPress has ‘advanced’ tab in the right hand side bar

  6. Jo says

    Not working for me – trying to link to a sidebar widget from another page and this is driving me up the wall

    • WPBeginner Support says

      For that issue, when the link is on another page then you would need to put the entire URL for the other page including the #anchor at the end for it to work.

      Admin

  7. Chalvonia Bock says

    Thank you. after a long struggle and searching for help I got it right after following these instructions.

  8. Stephen Muiruri says

    Very useful article. I am intending to include lengthier content to my blog and anchor links will make navigation and usability more efficient. Thank you very much.

  9. Robert says

    Good presentation. I recommend however to suggest a HOME button at the end of each internally linked paragraph.

    • WPBeginner Support says

      That is a personal preference but thank you for sharing your recommendation :)

      Admin

  10. Francesco says

    HI . The post is very good. How can i create the link from page to another page with anchor? I would like to create the link to another specific part of page.

    • WPBeginner Support says

      You would link to the page with the anchor links on it and add the # with the id to the end of the url

      Admin

  11. Sameer says

    Hi, thank you for this tutorial.
    I have a question please. On my homepage I have a few anchors such as about me and contact me. These anchors are on my menu header (using WordPress header).
    The issue I’m having is on the mobile website, on the home page the user opens the menu and will select and anchor which basically scrolls down on the same page, but the menu bar remains open.
    How do I get the menu bar to collapse on click of an anchor?
    Thanks.

    • WPBeginner Support says

      You would want to reach out to the support for your current theme for ensuring the menu closes properly.

      Admin

    • WPBeginner Support says

      You would be able to edit your content when creating or editing a post or page

      Admin

  12. NanPad says

    I have three anchor links at the top of my page. Once the viewer has clicked on anchor link #1 — and been taken to the place on the page where the link points–, how does the viewer get back to the top, in order to click on anchor links #2 and #3?

  13. Diane says

    This does NOT seem to address the option of linking from one page to an anchor in another page. Is that possible in WordPress?

    • WPBeginner Support says

      You can use this guide and then use the anchor link for a specific section on a page anywhere on the web.

      Admin

  14. John says

    Pretty good article but you left out the step needed to place anchor on a DIFFERENT page! Very important.

    • WPBeginner Support says

      You can follow these steps and even if the link is on a different page it should still work.

      Admin

    • WPBeginner Support says

      For this tutorial, we are using the Gutenberg/block editor. From the sound of your question, you are likely using the classic editor.

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.