0

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.

enter image description here

0

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:

  • Hi man, tks for the answer. I really appreciate that. But it didin't work well. The items were added, but not in the right place. I did something wrong. After that, I decided to explain a little more about my project. Maybe you can help me fix it. See the edit. Tks @brianjohnhanna – Állan Fidelis Toledo May 24 '17 at 11:35
  • I added an edit, let me know if this helps solve your issue – brianjohnhanna May 24 '17 at 19:03
  • Tks again, but it didn't work. At the first time, nothing happen. Comparing the other menu with similar structure, as it doesn't have a Dropdown, the class also wasn't there. I added a item just to change the status, but nothing appeared. By the way, the menu_id is 106. – Állan Fidelis Toledo May 25 '17 at 2:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.