Add div's into wordpress navigation

Question

I am building a custom wordpress theme using underscores and want to add two div's inside the navigation. I know I have to use a custom Walker, but I don't know exactly how and all i can find is how to customize the list items themselves. But all I need is to div's on top of the generated list.

This is what i get now:

<div class="menu-all-pages-container">
   <ul id="primary-menu" class="menu">
      <li>Menu item 1</li>
      <li>Menu item 1</li>
      ...etc
   </ul>
</div>

What I want to have:

<div class="menu-all-pages-container">

<div id="mydiv"></div>
<div class="button"></div>

   <ul id="primary-menu" class="menu">
      <li>Menu item 1</li>
      <li>Menu item 1</li>
      ...etc
   </ul>
</div>

As I said, I think I need a custom Walker and customize the start_el() function? But I am lost after that..

Thanks in advance :)

Could you elaborate when this adding of div can take place during redirection or some kind of role constraint? — Captain Planet

Mohammad Zarei Mohammad Zarei · Accepted Answer · 2021-08-13T19:38:12

You can use wp_nav_menu_items filter. try this:

add_filter('wp_nav_menu','add_custom_nav_elements', 10, 1);
function add_custom_nav_elements( $nav ) {

    $elements = '<div id="mydiv"></div><div class="button"></div>';
    return $elements . $nav;
}

If you looking for add elemets only for primary menu, try this:

add_filter('wp_nav_menu','add_custom_nav_elements', 10, 2);
function add_custom_nav_elements( $nav, $args ) {

    $elements = '<div id="mydiv"></div><div class="button"></div>';

    if( $args->theme_location == 'primary' )
        $nav = $elements . $nav;

    return $nav;
}

And add this in where you want to add menu:

<div class="menu-all-pages-container">
     <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</div>

Add div's into wordpress navigation

1 Answers