Sunday, January 23rd, 2022

How to Link to Pages Section in WordPress Nav Menu

This is very common in WordPress: wanting to link to a section of a page. i remember my first time [stares wistfully into the middle distance]. This quick guide explains how to do that, and then how to add that link to the navigation menu. Need to link users to a specific title within an article?

Sometimes you want your WordPress navigation menu items to link directly to a page section Which sits in the middle of a larger page instead of just being at the top of the page. For example: instead of creating a navigation menu link for a contact page, how do I create a menu link for a contact? section of my homepage?

Being able to create WordPress menu links for page sections is especially important on one-page websites, or on multi-page sites that have long scrolling homepages or sales pages. Any of these types of website may have, for example, “How it Works,” “Demos,” “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. anchor: A link embedded in the content of your page. Anchors are one of the oldest technologies on the web, and they still work great.

Fortunately, assigning an anchor to a page section, and then linking to that anchor from your WordPress navigation menu, isn’t difficult at all. This quick tutorial video from Fred shows you how. If you are a “visual learner”.

And here is a quick lesson summary if you want to learn how to link to page section in WordPress without video

  1. Enter the item you want to link a id a quality-for example, <h2 id="target-element">Section Title</h2>. This id attribute is of element html anchor. If you have Gutenberg/Block editor running, this is how it will look like pictured on the right. You’ll notice that this label is called “HTML Anchor” in this interface. In the underlying HTML, this would look like a id. I
  2. either in the menu area wp-admin or customizer, create a new custom link To add to your navigation menu.
  3. set the custom link to point to the page the content resides on, as well # character, plus the value of the element id a quality-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 all! Creating WordPress menu links for page sections using anchors can be a very useful way to orient your site visitors, so give it a try.

Source link