How to Create Anchor Links in WordPress

John Turner founder of SeedProd Posted by John Turner on March 3, 2017

In this “how-to” series I’m going to show you have to create named anchor links or some people call them anchor tags in WordPress. If you have different sections in a long post or page and you want the visitor to be able to click on a link, say in a table of contents you create, to jump to a different section of that post then you’ll want to use an anchor link. To create anchor links in WordPress is not as straight forward as it should be but just follow the steps below and you’ll easily be able to create anchor links with no coding skills.

To Create an Anchor Link

  1. Select and edit the page or post you want to create anchor links within.
  2. Next click the “Text” tab on the post/page to view it source code.
    Create Anchor Link Text tab
  3. Now that you can see the pages’ source code you now just need to add this code to wherever you want to place an anchor. Not you can change the id and title in the tag to suit your needs.
    <a id="section1">Section 1</a>
  4. You can now switch back to the Visual tab to create the link. To create the link highlight the text you want the user to click on to just to your anchor link and for the link use whatever the id is in your anchor tag preceded by a the hash symbol. So in my case the link would be:
    Anchor Link Creation
  5. And that’s it! Save and Publish or Preview your Draft to test. In my example when I click “How to Resize an Image in WordPress” it will take me to that section. Click the previous link to see a live example.


You can also create named anchor links across pages. So as you can see in the example above instead of jumping to a different section on this post we navigated to a new url and then jumped to that section. To do that just when creating the link enter the url to the page you want to navigate to follow by the hash id. The link above has this code as the link:

John Turner founder of SeedProd

By John Turner

John is the founder of and a WordPress Developer with over 15 years of development experience.

28 thoughts on "How to Create Anchor Links in WordPress"

  1. Kelly says:

    Thanks so much for the article.

  2. Grizz K. says:

    My anchors get removed on refresh in wordpress – why? How to prevent this?

    1. John Turner says:

      So if you add <a id=”section1″ rel=”nofollow”>Section 1</a> it gets removed after saving?

      1. Ed Thierbach says:

        This happens to me as well. Yes … after saving (using the Update button) the whatever gets removed by WordPress.

        1. Ed Thierbach says:

          Sigh, it’s late … the HTML code I put in the comment got converted to HTML code. :-) Yes, the anchor definition (a id=”whatever” tag) gets removed once I update the site using the WP “Update” button. Any way to make WP stop that? (I’m using WP 4.9)

          1. John Turner says:

            I just tested in 4.9 and it works fine. Make sure you are adding this under the text tab: If it’s getting remove maybe another plugin or the theme is interfering.

          2. Ed Thierbach says:

            Just tried again. The anchor stays until I switch from Text to Visual, then back to Text. Evidently the switch to visual eats the anchor. It also removed a table I had manually inserted in text mode. So I guess I need to completely stay away from visual, and also back up a lot, so I can restore if I accidentally switch to visual.

            Thanks for taking the time to test!

          3. Ed Thierbach says:

            Last nag, for those finding this thread in the future. The problem is that the TinyMCE editor, by default, eats a lot of the tags that one can manually enter in text mode. The “Preserved HTML Editor Markup Plus” plugin seems to do the trick for me.

  3. Leif Arnesen says:

    Fantastic article! Super simple code that works like a charm! Thank you so much John.

    1. John Turner says:

      No problem! Cheers

  4. SpeedMaadu says:

    Thanks John, just what I was looking for!

  5. Soumya Rup says:

    John Turner, this is a helpful point and important too. From now onward, I am going to show this technique to all my WordPress trainees. Thanks for sharing this.

  6. Kapil Garg says:

    Excellent tutorial and very well explained! Next stop, template parts ………

  7. Steve says:

    I have WordPress 4.9 and have the problem of disappearing tags if id=”target”. If I use name=”target” it works.

  8. Steve says:

    I found that embedded id= in text tags works. Such as

  9. Steve says:

    Unfortunately the post dropped my example. I guess it interpreted the html and rendered it. I will try again without angle brackets around the following: h2 id=”target”. Text elements should be able to include an anchor as id=

    1. John Turner says:

      Thanks Steve, the good news is the new WordPress Editor Gutenberg will have a Table of Content Block which will do this for you!

  10. Stella says:

    Hi John,

    Thanks so much for this article. I am using my anchors linking to content placed in tabs. The sad part is if the anchor is placed in the second tab, the page scrolls to the tab section but doesn’t open the tab. Do you have any idea how I can fix this?

  11. John Turner says:

    In that case you’d have to use JavaScript to activate the tab.

  12. Mike Barlow says:

    Ok, that was pretty easy! My theme has the anchors a little off but that’s a CSS issue. Thanks for the tip!

  13. Great article, John!

    I built Anchor Links, a free Chrome Extension that makes this process easier and very straightforward.

    There is no need to switch to text mode anymore.

    All you have to do is to highlight the target anchor and click on the extension button on Chrome.

    Behind the scenes, the ID is auto-generated, added to the target tag (headings, paragraph, images etc) and copied to clipboard.

    Then, you just need to highlight the text you want to convert to a link and paste the anchor link.

    You can see more about this here:

    I appreciate if you can try it out.

  14. Works great Thanks! is there a way to display a tool-tip like display?

  15. San says:

    Awesome!! Thanks a lot for the simplified explanation

  16. C. Nelson says:

    I have a site being developed with pages that have each have a section that is opened with a button. There’s an intro and, if you click the button, additional information with links to relevant resources. How can I link from a post to an anchor within the section of the page “behind” the button? I can link to anchors in the intro section, but links to anchors within the closed section only open the page.

  17. Fantastic article! Super simple code that works like a charm! Thank you so much John.

  18. toni says:

    Is there a way to link to a homepage anchor from an interior page?

    1. John Turner says:

      Yep, “/#anchor” will work. See the bottom not on the article to link to a different page.

Leave a Reply

Your email address will not be published. Required fields are marked *

Made with in Charleston, SC USA

Copyright © 2019 SeedProd LLC
Terms & Conditions | Privacy Policy | SeedProd Coupon Code