How to Link to Page Content from a WordPress Navigation Menu

anchor | wordpress on-page links

It’s pretty common in WordPress: wanting to link to a section of a page. I remember fondly my first time [stares wistfully into the middle distance]. This Quick Guide explains how to do that, and how to then add that link to a navigation menu. Need to link users to a specific heading within an article?

Sometimes you might want your WordPress navigation menu items to link directly to a page section that sits in the middle of a larger page, rather than simply to the top of the page. For example: instead of creating a nav menu link to a Contact page, how do I create a menu link to the Contact section of my homepage?

Being able to create WordPress menu links to page sections is especially important on one-page websites, or on multi-page sites that have long scrolling homepages or sales pages. Either of these types of website might have, for example, “How it Works,” “Demo,” “Testimonials,” and “Buy Now” sections all on the same page.

To link to a page section, you’ll need to create a WordPress menu link to an anchor: a link embedded in your page content. Anchors are one of the web’s oldest technologies, and they still work great.

Fortunately, assigning an anchor to a page section, and then linking to that anchor from your WordPress navigation menu, is not tricky at all. This quick tutorial video from Fred shows you how. if you’re a “visual learner.”

And here’s a quick text summary if you’d rather learn how to link to a page section in WordPress without a video 😉

  1. Give the item you want to link to an id attribute—for example, <h2 id="target-element">Section Title</h2>. This id attribute is the element’s HTML anchor. If you’ve got the Gutenberg/Block editor running, pictured at right is what it’ll look like. You’ll notice that this label is called “HTML anchor” in this interface. In the underlying HTML, it’ll look like an id. 🤓
  2. In the Menu area in either wp-admin or the Customizer, create a new Custom Link to add to your navigation menu.
  3. Set the Custom Link to point to the page on which the content lives, plus the # character, plus the value of the element’s id attribute—for example, https://mysite.com/about-us#target-element.
  4. Save your changes to the menu, and test the link from a few pages to make sure it works.

And that’s it! Creating WordPress menu links to page sections using anchors can be a very helpful way to orient your site’s visitors, so give it a try.


15 Responses

Comments

  • Martanian says:

    If you’ll add that kind of custom links to the main menu not as a child, but as the main menu link, then it can be highlighted as “active page”. So in the case that you described on your video, both “Test Page” and “Second section” links will be highlighted when you’ll open “Test Page”, which is not good in most cases.

    One of the possible solutions for that problem is to add custom CSS class for this kind of custom links, like “custom-link-no-highlight”, and then modify the theme CSS code (via child theme for example) to disable highlight for links with this class.

    • Colleen Cassidy says:

      yep this is happening to me! Anchor links still aren’t working as expected, but they are appearing as active. I guess Ill have to figure out the CSS to override…let me know if you have an exampl snippet please!

  • Manoj says:

    Great tutorial. I want to link a menu item to a certain part of a page & looking for the suitable guidance. I Googled and finally, I found this article.

    I never thought that the process was so simple.
    Thanks for the writing. It’s very useful.

    All the best,

  • Sondra says:

    Thank you for this tutorial. I’ve been searching for this and one that actually works. However I do have a question. After I create the custom link my header images on 4 of my 6 pages disappear. They only reappear after I remove the custom link.

    Have you ever come across this problem before and if so, do you have any advice for me in how to fix it and still retain my custom jump links.

  • David says:

    Thank you, great method!
    It works with desktops perfectly well
    but has some issues with mobile menu.
    The menu won’t hide when clicked.

  • Colleen says:

    Thank you for sharing, but I have been using this method, and it just does not work for me.
    I have used both code block elements and added the anchor directly into HTML of text elements, but nothing happens when clicking the menu item. The only different with your example is that it isn’t the homepage, as it is for me. For example, I have an #about-us section and anchor, and url for custom link is http://www.domain.com/#about-us. Doesn’t work. Anything else you’d recommend?

  • Foo Bar says:

    This is not your fault, but one major disadvantage of this method is: once the permalink (URL) of the page changes, the menu links won’t automatically update. I would rather have the ability to tell the menu to link to a certain page and tell WP to append the anchor to that page’s section to the permalink.

  • Ameen Khan says:

    What about active class. When some body click on the anchor it should get populated with active class.

  • mel says:

    Wahhh thank you so much , really helpful and easy!

  • Brandi Burkhart says:

    Thank you thank you thank you!
    Very helpful!

  • Blake says:

    I’m entering the url in the custom link as .com#testimonials, but after it saves it is producing .com/#testimonials, and the link does not work… do you know of a workaround for this? I haven’t had it happen before, maybe it has something to do with this theme?

  • Dee says:

    Oh man, you just saved my life. Thanks a lot, great tutorial!

  • This is working but I don’t want to show the section name to my permalink. How can I do this?

  • nikeshpun says:

    Thank you for this tutorial was really helpful.

  • Ava says:

    Thanks for this! I was so happy that I was able to accomplish this without a plugin!

Add a Comment

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