Add Dropdown menu using "add_filter => wp_nav_menu_items"

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 .= '                 
                    lia class=nav-link href=' . get_permalink( wc_get_page_id( 'myaccount' ) ) . 'Meus Dados/a/li
                    lia 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 .= 'lia 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.

Topic woocommerce-offtopic dropdown filters Wordpress

Category Web

1
answered at

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.

enter image description here

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:

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.