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 ?
How To WordPress: Link to a section of page
- Give the item you want to link to an
idattribute—for example,<h2 id="target-element">Section Title</h2>. Thisidattribute 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 anid. ? - In the Menu area in either
wp-adminor the Customizer, create a new Custom Link to add to your navigation menu. - Set the Custom Link to point to the page on which the content lives, plus the
#character, plus the value of the element’sidattribute—for example,https://mysite.com/about-us#target-element. - 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.
Keep reading the article at WPShout. The article was originally written by David Hayes on 2021-08-03 12:35:29.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.