How to Ensure Smooth Navigation on Internal Pages with WordPress Menus

If your website features a menu that smoothly guides users to specific sections on the home page, you might encounter challenges with internal pages’ routing. Consider this scenario: your home page has sections identified by unique IDs, such as About, Contact, and Products.

<section id="about">
  ... your content
</section>

Meanwhile, you have a navigation menu with links pointing to these sections:

<nav>
 <ul>
  <li href="#about">About us</li>
  <li href="#contact">Contact us</li>
  <li href="#products">Products</li>
 </ul>
</nav>

The problem

Typically, clicking the “About us” link scrolls the screen to the section with the ID “about.” However, this becomes problematic when dealing with internal pages, such as posts or category pages. The URLs generated don’t consider the home page URL.

For instance, the menu URL on the home page looks like this:

https://yoursitedomain/#about

 Yet, in the news category, the URL becomes, rendering the link invalid.

The solution involves modifying the menu URLs using a WordPress hook. This can be achieved by adding the following code to your theme’s functions.php file:

WordPress Hook

function update_menu_link($items){
 foreach($items as $item){
  $home_url = get_home_url();
  $item->url = $home_url .'/'. $item->url;
 }
 return $items;
}
add_filter('wp_nav_menu_objects', 'update_menu_link', 10, 2);

This code essentially updates the menu links.

It fetches the home page URL and concatenates it with the menu item’s URL, effectively ensuring that the links work seamlessly on internal pages.

Implementing this code empowers your WordPress site to handle menu navigation intelligently, making it user-friendly across various pages.