How to Link to a Page Section in WordPress Nav Menus

It’s fairly frequent in WordPress: wanting to hyperlink to a part of a web page. I keep in mind fondly my first time [stares wistfully into the middle distance]. This Quick Guide explains how to do this, and the way to then add that hyperlink to a navigation menu. Need to hyperlink customers to a particular heading inside an article?

Sometimes you may want your WordPress navigation menu objects to hyperlink straight to a web page part that sits in the center of a bigger web page, reasonably than merely to the highest of the web page. For instance: as an alternative of making a nav menu hyperlink to a Contact web page, how do I create a menu hyperlink to the Contact part of my homepage?

Being ready to create WordPress menu hyperlinks to web page sections is particularly essential on one-page web sites, or on multi-page websites which have lengthy scrolling homepages or gross sales pages. Either of all these web site might need, for instance, “How it Works,” “Demo,” “Testimonials,” and “Buy Now” sections all on the identical web page.

To hyperlink to a web page part, you’ll want to create a WordPress menu hyperlink to an anchor: a hyperlink embedded in your web page content material. Anchors are one of many net’s oldest applied sciences, they usually nonetheless work nice.

Fortunately, assigning an anchor to a web page part, after which linking to that anchor out of your WordPress navigation menu, shouldn’t be difficult in any respect. This fast tutorial video from Fred exhibits you ways. should you’re a “visual learner.”

And right here’s a fast textual content abstract should you’d reasonably find out how to hyperlink to a web page part in WordPress with out a video 😉

  • Give the merchandise you need to hyperlink to an id attribute—for instance, <h2 id=”target-element”>Section Title</h2>. This id attribute is the ingredient’s HTML anchor. If you’ve obtained the Gutenberg/Block editor operating, pictured at proper is what it’ll appear like. You’ll discover that this label is named “HTML anchor” in this interface. In the underlying HTML, it’ll appear like an id. 🤓
  • In the Menu space in both wp-admin or the Customizer, create a new Custom Link to add to your navigation menu.
  • Set the Custom Link to level to the web page on which the content material lives, plus the # character, plus the worth of the ingredient’s id attribute—for instance,
  • Save your modifications to the menu, and check the hyperlink from a few pages to be sure that it really works.
  • And that’s it! Creating WordPress menu hyperlinks to web page sections utilizing anchors could be a very useful approach to orient your website’s guests, so give it a attempt.

    Related Articles

    Leave a Reply

    Back to top button