How to Create Anchor Links in WordPress

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:
    #section1
    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.

Note

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:
https://www.seedprod.com/how-to-create-named-anchor-links-in-wordpress/#section1

About John Turner

John Turner is the founder of SeedProd. He's an Entrepreneur, Web Developer, Marketer, SysAdmin, DBA, Support Tech and can even Cook.

19 Comments

  1. Kelly on November 1, 2017 at 5:03 pm

    Thanks so much for the article.

  2. Grizz K. on November 3, 2017 at 7:21 am

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

    • John Turner on November 3, 2017 at 7:54 am

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

      • Ed Thierbach on December 3, 2017 at 10:59 pm

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

        • Ed Thierbach on December 3, 2017 at 11:01 pm

          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)

          • John Turner on December 4, 2017 at 8:13 am

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



          • Ed Thierbach on December 4, 2017 at 5:45 pm

            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!
            -Ed-



          • Ed Thierbach on December 4, 2017 at 11:20 pm

            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 on November 15, 2017 at 5:02 pm

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

    • John Turner on November 15, 2017 at 5:32 pm

      No problem! Cheers

  4. SpeedMaadu on December 20, 2017 at 1:39 am

    Thanks John, just what I was looking for!

  5. Soumya Rup on December 20, 2017 at 11:47 am

    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 on December 28, 2017 at 6:48 am

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

  7. Steve on January 11, 2018 at 6:32 pm

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

  8. Steve on January 11, 2018 at 9:15 pm

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

  9. Steve on January 11, 2018 at 9:19 pm

    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=

    • John Turner on January 12, 2018 at 7:59 am

      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 on February 1, 2018 at 7:35 am

    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 on February 1, 2018 at 2:16 pm

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

Leave a Comment





Sale - Get all of our Plugins for just $99  Learn More