Add Dropdown menu using "add_filter => wp_nav_menu_items"

Question

My project: Wordpress, Woocommerce, Bootstrap 4, bs4navwalker

My problem: Custom dropdown item added by WP filter. I have one navbar, 3 differents menus inside (using bs4navwalker), a badge for the cart and a search form. See code.

I'm using a filter (add_filter( 'wp_nav_menu_items',) to add login, logout and myaccount details in my navbar, everything is ok, but i'd like to add these items inside a dropdown. The filter just creates one or two more items to the 'user' menu.

I understand that it is happening because i'm adding a <li>, but I couldn't figure out how to add all the code bootstrap needs to manage the dropdown.

Is it possible?

front-page.php CODE

<div class="nav-custom">
  <div class="container">
    

      <nav class="navbar-nav navbar-toggleable-sm navbar-inverse">

        

        <a class="navbar-brand" href="<?php echo get_home_url(); ?>">
              <img src="<?php bloginfo('template_url'); ?>/img/logo.png" class="d-inline-block align-top" alt="">
        </a>

           <?php
           wp_nav_menu([
             'menu'            => 'top',
             'theme_location'  => 'top',
             'container'       => false,
             'container_id'    => 'bs4navbar',
             'container_class' => 'collapse navbar-collapse',
             'menu_id'         => false,
             'menu_class'      => 'navbar-nav mr-auto no-md-view',
             'depth'           => 2,
             'fallback_cb'     => 'bs4navwalker::fallback',
             'walker'          => new bs4navwalker()
           ]);

          ?>
        
        <!-- Search form -->
        <?php get_product_search_form(); ?>

        <!-- User Menu -->
        <?php 
          wp_nav_menu([
           'menu'            => 'user',
           'theme_location'  => 'user',
           'container'       => false,
           //'container_id'    => 'bs4navbar',
           //'container_class' => 'collapse navbar-collapse',
           'menu_id'         => false,
           'menu_class'      => 'navbar-nav mr-auto no-md-view',
           'depth'           => 2,
           'fallback_cb'     => 'bs4navwalker::fallback',
           'walker'          => new bs4navwalker()
         ]);
        ?>

        <!-- Cart Menu -->
        <?php 
          wp_nav_menu([
           'menu'            => 'Cart',
           'theme_location'  => 'Cart',
           'container'       => false,
           //'container_id'    => 'bs4navbar',
           //'container_class' => 'collapse navbar-collapse',
           'menu_id'         => false,
           'menu_class'      => 'navbar-nav mr-auto',
           'depth'           => 2,
           'fallback_cb'     => 'bs4navwalker::fallback',
           'walker'          => new bs4navwalker()
         ]);
        ?>
                <!-- code for the badge START-->
        <?php
        if ( WC()->cart->get_cart_contents_count() !== 0 ) {
        // Do something fun
          ?>  
          <span class="badge badge-pill badge-warning no-md-view">
            <a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?></a>
          <?php 
        }
        ?>

        </span>
    </nav>

  </div>
</div>

functions.php CODE

<?php

add_filter( 'wp_nav_menu_items', 'my_account_loginout_link', 10, 2 );
/**
 * Add WooCommerce My Account Login/Logout to Menu
 * 
 * @see https://support.woothemes.com/hc/en-us/articles/203106357-Add-Login-Logout-Links-To-The-Custom-Primary-Menu-Area
 */
function my_account_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'user') { //change your theme location menu to suit

        
        $items .= '                 
                    <li><a class="nav-link" href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Meus Dados</a></li>
                    <li><a class="nav-link" href="'. wp_logout_url( get_home_url() ) .'">Sair</a></li>
                    '; //change logout link, here it goes to 'shop', you may want to put it to 'myaccount'
    }
    elseif (!is_user_logged_in()  && $args->theme_location == 'user') {//change your theme location menu to suit
        
     

        $items .= '<li><a class="nav-link" href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Entrar</a></li>';
    }
    return $items;
}

Result

As you can see, the item was added in my user menu (user icon + Entrar), but not as a Dropdown.

Answer 1

I think this will do what you are looking to accomplish. Basically, this way you hook in before the HTML is generated to add your menu items. I haven't had a chance to test this, but it should work.

EDIT: Since you want to have it underneath a dropdown, you need to set the menu_item_parent. If the user icon menu item is going to stay static, you can grab the nav menu item ID by looking at the source code for that menu item, and grabbing the number that follows menu-item- in the ID.

For example, in this case 103191 is the nav menu item ID (note that this is not the same as the object/post/page/CPT/etc a menu item points to).

function my_account_loginout_link( $items, $menu, $args ) {
    if ( $args->theme_location !== 'user' ) {
        return $items;
    }

    if ( is_user_logged_in() ) {
        $added_menu_items = array(
            array(
                'title' => 'Meus Dados',
                'url' => get_permalink( wc_get_page_id( 'myaccount' ) )
            ),
            array(
                'title' => 'Sair',
                'url' => wp_logout_url( get_home_url() )
            )
        );
    } else {
        $added_menu_items = array(
            array(
                'title' => 'Entrar',
                'url' => get_permalink( wc_get_page_id( 'myaccount' ) )
            )
        );
    }

    $parent_menu_id = 103191;
    $menu_order = count( $items ) + 1;
    foreach ( $added_menu_items as $added_item ) {
        $nav_menu_item = new stdClass;
        $nav_menu_item->menu_item_parent = $parent_menu_id;
        $nav_menu_item->url = $added_item['url'];
        $nav_menu_item->title = $added_item['title'];
        $nav_menu_item->menu_order = $menu_order;
        $items[] = $nav_menu_item;
        $menu_order++;
    }
    return $items;
}
add_filter( 'wp_get_nav_menu_items', 'my_account_loginout_link', 10, 3 );

Adapted from:

• https://teleogistic.net/2013/02/11/dynamically-add-items-to-a-wp_nav_menu-list/
• http://www.daggerhart.com/dynamically-add-item-to-wordpress-menus/