How To Add Custom Menu Position in WordPress

There was a time when I had to implement some random HTML CODE in the wp_nav_menu function in WordPress Site for my client. And the required structure of the menu was completely different from the site because it was built on Bootstrap Menu. Third Party Custom JS and CSS were used in demand of the client.

The client picked up some menu design from Codepen.io that he liked and hired me to implement that on his website. He wanted the custom menu item to be added to the third element of the Nav Menu. Technically speaking, I had to add Custom HTML menu item and Position it somewhere between Nav Menu of WordPress which was tricky. However, I spent a little while looking into the right way to implement this and came up with a solution that I thought I’d share. No worries, just a simple WordPress hook trick will give you the details. It’s not that complex as it sounds.

However, I spent a little while looking into the right way to implement this and came up with a solution that I thought I’d share. No worries, just a simple WordPress hook trick will give you the details. It’s not that complex as it sounds. But you need to understand the flow.

Custom Menu Position in WordPress

 

Integrate Custom Menu Position in WordPress

Note: You don’t need Custom Walker Menu to do this.

If you add the below code in your functions.php will add your Custom Menu on the Very Last Item. This means New Menu will appear at the very end of your menu item.

function pp_add_last_nav_item($items) {
  return $items .= '<li><a href="http://yourwebsite.com/newmenu">New Menu</a></li>';
}
add_filter('wp_nav_menu_items','pp_add_last_nav_item');

But our utter goal is to Position our Custom Menu somewhere between our Nav Menu. And we can achieve that by adding the following code in our functions.php. 

Here’s The Code


add_filter('wp_nav_menu_items','pp_add_custom_in_menu', 10, 2);
function pp_add_custom_in_menu( $items, $args ) 
{
        $items_array = array();
        while ( false !== ( $item_pos = strpos ( $items, '<li', 3 ) ) )
        {
            $items_array[] = substr($items, 0, $item_pos);
            $items = substr($items, $item_pos);
        }
        $items_array[] = $items;
        array_splice($items_array, 2, 0, '<li class="drowpdown">
          <a href="#">New Menu <span><i class="fa fa-angle-double-right"></i></span></a>
         </li>'); // insert custom code
        $items = implode('', $items_array);
    return $items;
}

So What We Did  Here?


We used wp_nav_menu_items filter hook to filter the HTML list content for the navigation (menus).

ALSO READ  How to Add Zoom effect on Image hover in WordPress

And we used

 array_splice($items_array, 2, 0, '<li class="drowpdown">
   <a href="#">New Menu <span><i class="fa fa-angle-double-right"></i></span></a>
 </li>');

to split an array menu into 2 arrays. By 2, we are calling our Custom Menu, New Menu, to be positioned after the second item in Nav Menu. Therefore, Our menu will be on the third item of our Nav Menu. You can increase or decrease the value wherever you want your nav_menu to appear. Just implement the code. You will understand even more if you try it.


So this is it. This is how we Add Custom Menu Position in WordPress. You can now insert your Custom HTML code to position anywhere between the nav menus.

You can also use the wp_nav_menu_objects filter instead of the above filter. This will allow you to modify an array of items instead of the string. But the above code should work. It works. It worked for me and will absolutely work for you too. 🙂

If any problem persists or you have any question to ask, do comment in the form below.

If this simple article helped you, don’t forget to Share.