4

I am using Bootstrap nav pills with drop-down items as WordPress menu, the menu without drop-down is looking good but when I add nested ul as drop-down the menu not working as expected..

HTML

<nav class="navbar navbar-default pull-right" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav nav-pills head-menu">
                <li class="current"><a href="index.html">Home</a> </li>
                <li><a href="authors.html">Authors</a></li>
                <li><a href="catalogue.html">Catalogue</a></li>
                <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> Featured <span class="caret"></span> </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="featured-videos.html">Featured Videos</a></li>
                        <li><a href="featured-author.html">Featured Author</a></li>
                    </ul>
                </li>
                <li><a href="media.html">Media</a></li>
                <li><a href="team.html">Team</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

PHP

<nav class="navbar navbar-default pull-right" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'items_wrap' => '<ul class="nav nav-pills head-menu">%3$s</ul>') ); ?>
        </div>
    </div>
</nav>

Everything is good when there is no drop-down items, how to fix this issue?

1
  • Have you included the required bootstrap .js files? If so it should open the dropdown on click. If you didnt want it to work like that you may add css to open the dropdown, However the markup would need to be changed. You can use a nav walker to produce the output you want. – Abad Rahman Aug 28 '15 at 9:52
1

I ran into similar problem when I created a bootstrap navigation menu and dropdown links were all showing up at once. I used the following steps to correct the issue:

  1. download navwalker from github repo link: https://github.com/wp-bootstrap/wp-bootstrap-navwalker

  2. put this file in the root folder of the theme and in the functions.php file userequire_once get_template_directory() . '/wp-bootstrap-navwalker.php';

  3. finally you'll have to add following parameters:

    $defaults = array(
      'container' => false,
      'theme_location' => 'primary-menu',
      'menu_class' => 'nav navbar-nav navbar-right',
      'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
      'walker' => new WP_Bootstrap_Navwalker(),
    );
    wp_nav_menu($defaults);
    

especially last two parameters to your wp_nav_menu() function.

I hope it helps

0
<?php
/**
 * Class Name: wp_bootstrap_navwalker
 * GitHub URI: https://github.com/twittem/wp-bootstrap-navwalker
 * Description: A custom WordPress nav walker class to implement the Bootstrap 3 navigation style in a custom theme using the WordPress built in menu manager.
 * Version: 2.0.4
 * Author: Edward McIntyre - @twittem
 * License: GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
class wp_bootstrap_navwalker extends Walker_Nav_Menu {
    /**
     * @see Walker::start_lvl()
     * @since 3.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int $depth Depth of page. Used for padding.
     */
    public function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat( "\t", $depth );
        $output .= "\n$indent<ul role=\"menu\" class=\" category-list\">\n";
    }
    /**
     * @see Walker::start_el()
     * @since 3.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param object $item Menu item data object.
     * @param int $depth Depth of menu item. Used for padding.
     * @param int $current_page Menu item ID.
     * @param object $args
     */
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
        /**
         * Dividers, Headers or Disabled
         * =============================
         * Determine whether the item is a Divider, Header, Disabled or regular
         * menu item. To prevent errors we use the strcasecmp() function to so a
         * comparison that is not case sensitive. The strcasecmp() function returns
         * a 0 if the strings are equal.
         */
        if ( strcasecmp( $item->attr_title, 'divider' ) == 0 && $depth === 1 ) {
            $output .= $indent . '<li role="presentation" class="divider">';
        } else if ( strcasecmp( $item->title, 'divider') == 0 && $depth === 1 ) {
            $output .= $indent . '<li role="presentation" class="divider">';
        } else if ( strcasecmp( $item->attr_title, 'dropdown-header') == 0 && $depth === 1 ) {
            $output .= $indent . '<li role="presentation" class="dropdown-header">' . esc_attr( $item->title );
        } else if ( strcasecmp($item->attr_title, 'disabled' ) == 0 ) {
            $output .= $indent . '<li role="presentation" class="disabled"><a href="#">' . esc_attr( $item->title ) . '</a>';
        } else {
            $class_names = $value = '';
            $classes = empty( $item->classes ) ? array() : (array) $item->classes;
            $classes[] = 'menu-item-' . $item->ID;
            $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
            if ( $args->has_children )
                $class_names .= ' cd-library';
            if ( in_array( 'current-menu-item', $classes ) )
                $class_names .= ' active';
            $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
            $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
            $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
            $output .= $indent . '<li' . $id . $value . $class_names .'>';
            $atts = array();
            $atts['title']  = ! empty( $item->title )   ? $item->title  : '';
            $atts['target'] = ! empty( $item->target )  ? $item->target : '';
            $atts['rel']    = ! empty( $item->xfn )     ? $item->xfn    : '';
            // If item has_children add atts to a.
            if ( $args->has_children && $depth === 0 ) {
                $atts['href']           = '#';
                $atts['data-toggle']    = 'dropdown';
                $atts['class']          = 'dropdown-toggle';
                $atts['aria-haspopup']  = 'true';
            } else {
                $atts['href'] = ! empty( $item->url ) ? $item->url : '';
            }
            $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
            $attributes = '';
            foreach ( $atts as $attr => $value ) {
                if ( ! empty( $value ) ) {
                    $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                    $attributes .= ' ' . $attr . '="' . $value . '"';
                }
            }
            $item_output = $args->before;
            /*
             * Glyphicons
             * ===========
             * Since the the menu item is NOT a Divider or Header we check the see
             * if there is a value in the attr_title property. If the attr_title
             * property is NOT null we apply it as the class name for the glyphicon.
             */
            if ( ! empty( $item->attr_title ) )
                $item_output .= '<a'. $attributes .'><span class="glyphicon ' . esc_attr( $item->attr_title ) . '"></span>&nbsp;';
            else
                $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
            $item_output .= ( $args->has_children && 0 === $depth ) ? ' <span class="caret"></span></a>' : '</a>';
            $item_output .= $args->after;
            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
        }
    }
    /**
     * Traverse elements to create list from elements.
     *
     * Display one element if the element doesn't have any children otherwise,
     * display the element and its children. Will only traverse up to the max
     * depth and no ignore elements under that depth.
     *
     * This method shouldn't be called directly, use the walk() method instead.
     *
     * @see Walker::start_el()
     * @since 2.5.0
     *
     * @param object $element Data object
     * @param array $children_elements List of elements to continue traversing.
     * @param int $max_depth Max depth to traverse.
     * @param int $depth Depth of current element.
     * @param array $args
     * @param string $output Passed by reference. Used to append additional content.
     * @return null Null on failure with no changes to parameters.
     */
    public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
        if ( ! $element )
            return;
        $id_field = $this->db_fields['id'];
        // Display this element.
        if ( is_object( $args[0] ) )
           $args[0]->has_children = ! empty( $children_elements[ $element->$id_field ] );
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
    /**
     * Menu Fallback
     * =============
     * If this function is assigned to the wp_nav_menu's fallback_cb variable
     * and a manu has not been assigned to the theme location in the WordPress
     * menu manager the function with display nothing to a non-logged in user,
     * and will add a link to the WordPress menu manager if logged in as an admin.
     *
     * @param array $args passed from the wp_nav_menu function.
     *
     */
    public static function fallback( $args ) {
        if ( current_user_can( 'manage_options' ) ) {
            extract( $args );
            $fb_output = null;
            if ( $container ) {
                $fb_output = '<' . $container;
                if ( $container_id )
                    $fb_output .= ' id="' . $container_id . '"';
                if ( $container_class )
                    $fb_output .= ' class="' . $container_class . '"';
                $fb_output .= '>';
            }
            $fb_output .= '<ul';
            if ( $menu_id )
                $fb_output .= ' id="' . $menu_id . '"';
            if ( $menu_class )
                $fb_output .= ' class="' . $menu_class . '"';
            $fb_output .= '>';
            $fb_output .= '<li><a href="' . admin_url( 'nav-menus.php' ) . '">Add a menu</a></li>';
            $fb_output .= '</ul>';
            if ( $container )
                $fb_output .= '</' . $container . '>';
            echo $fb_output;
        }
    }
}

//Use theme
 <?php wp_nav_menu( array(
                'menu'              => 'main-nav',
                'theme_location'    => 'main-nav',
                'depth'             => 2,
                'container'         => false,
                'menu_class'        => 'main-navigation',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            ); ?>
0
<?php

/**
 * Bootstrap NavWalker
 * Class Name: Bootstrap_NavWalker
 * Author: Bishal Napit
 * Author URI: https://napitwptech.com/
 * GitHub URI: https://github.com/mebishalnapit/bootstrap-navwalker/
 * Description: A custom WordPress nav walker class to implement the Bootstrap 4 navigation style in a custom WordPress
 * Bootstrap based theme using the WordPress built in menu manager.
 * License: GNU General Public License v3 or later
 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
 */
class Bootstrap_NavWalker extends Walker_Nav_Menu {

    // Create the $current_menu_id_bootstrap variable for generating the current menu id
    protected $current_menu_id_bootstrap;

    /**
     * Starts the list before the elements are added.
     *
     * @since 3.0.0
     * @see   Walker::start_lvl()
     *
     * @param string   $output Passed by reference. Used to append additional content.
     * @param int      $depth  Depth of menu item. Used for padding.
     * @param stdClass $args   An object of wp_nav_menu() arguments.
     */
    public function start_lvl( &$output, $depth = 0, $args = array() ) {
        // Use the current menu id generated via start_el()
        $current_menu_id = $this->current_menu_id_bootstrap;

        // Assign the dynamic id for use inside the dropdown menu, ie, sub-menu for Bootstrap
        $id = 'aria-labelledby="navbar-dropdown-menu-link-' . $current_menu_id->ID . '"';

        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
            $t = '';
            $n = '';
        } else {
            $t = "\t";
            $n = "\n";
        }

        $indent = str_repeat( $t, $depth );

        /**
         * Add the classes for the dropdown menu in WordPress
         *
         * 1. For WordPress default: '.sub-menu'
         * 2. For Bootstrap Sub-Menu: '.dropdown-menu'
         */
        $classes = array( 'sub-menu', 'dropdown-menu' );

        /**
         * Filters the CSS class(es) applied to a menu list element.
         *
         * @since 4.8.0
         *
         * @param array    $classes The CSS classes that are applied to the menu `<ul>` element.
         * @param stdClass $args    An object of `wp_nav_menu()` arguments.
         * @param int      $depth   Depth of menu item. Used for padding.
         */
        $class_names = join( ' ', apply_filters( 'nav_menu_submenu_css_class', $classes, $args, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        /**
         * Change <ul> to <div> for Bootstrap Navigation
         * Add the current menu id for the sub-menu toggle feature for Bootstrap
         */
        $output .= "{$n}{$indent}<div $class_names $id>{$n}";
    }

    /**
     * Ends the list of after the elements are added.
     *
     * @since 3.0.0
     * @see   Walker::end_lvl()
     *
     * @param string   $output Passed by reference. Used to append additional content.
     * @param int      $depth  Depth of menu item. Used for padding.
     * @param stdClass $args   An object of wp_nav_menu() arguments.
     */
    public function end_lvl( &$output, $depth = 0, $args = array() ) {
        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
            $t = '';
            $n = '';
        } else {
            $t = "\t";
            $n = "\n";
        }

        $indent = str_repeat( $t, $depth );

        /**
         * Change </ul> to </div> for Bootstrap Navigation
         */
        $output .= "$indent</div>{$n}";
    }

    /**
     * Starts the element output.
     *
     * @since 3.0.0
     * @since 4.4.0 The {@see 'nav_menu_item_args'} filter was added.
     * @see   Walker::start_el()
     *
     * @param string   $output Passed by reference. Used to append additional content.
     * @param WP_Post  $item   Menu item data object.
     * @param int      $depth  Depth of menu item. Used for padding.
     * @param stdClass $args   An object of wp_nav_menu() arguments.
     * @param int      $id     Current item ID.
     */
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        // Find the current menu item id to be used for start_lvl()
        $this->current_menu_id_bootstrap = $item;

        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
            $t = '';
            $n = '';
        } else {
            $t = "\t";
            $n = "\n";
        }

        $indent = ( $depth ) ? str_repeat( $t, $depth ) : '';

        $classes   = empty( $item->classes ) ? array() : ( array ) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        /**
         * Add class '.nav-item' inside <li> tag for Bootstrap
         */
        $classes[] = 'nav-item';

        /**
         * Add class '.active' inside <li> tag for Bootstrap active menu as well as for the parent menu, which have the active sub-menu
         */
        if ( in_array( 'current-menu-item', $classes ) || in_array( 'current-menu-parent', $classes ) ) {
            $classes[] = 'active';
        }

        /**
         * Add class '.dropdown' inside <li> tag for Bootstrap dropdown menu, ie, <li> having sub-menu
         */
        if ( in_array( 'menu-item-has-children', $classes ) ) {
            $classes[] = 'dropdown';
        }

        /**
         * Filters the arguments for a single nav menu item.
         *
         * @since 4.4.0
         *
         * @param stdClass $args  An object of wp_nav_menu() arguments.
         * @param WP_Post  $item  Menu item data object.
         * @param int      $depth Depth of menu item. Used for padding.
         */
        $args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

        /**
         * Filters the CSS class(es) applied to a menu item's list item element.
         *
         * @since 3.0.0
         * @since 4.1.0 The `$depth` parameter was added.
         *
         * @param array    $classes The CSS classes that are applied to the menu item's `<li>` element.
         * @param WP_Post  $item    The current menu item.
         * @param stdClass $args    An object of wp_nav_menu() arguments.
         * @param int      $depth   Depth of menu item. Used for padding.
         */
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        /**
         * Filters the ID applied to a menu item's list item element.
         *
         * @since 3.0.1
         * @since 4.1.0 The `$depth` parameter was added.
         *
         * @param string   $menu_id The ID that is applied to the menu item's `<li>` element.
         * @param WP_Post  $item    The current menu item.
         * @param stdClass $args    An object of wp_nav_menu() arguments.
         * @param int      $depth   Depth of menu item. Used for padding.
         */
        $id = apply_filters( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args, $depth );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        /**
         * <li> is required for parent menu only in Bootstrap
         */
        if ( $depth === 0 ) {
            $output .= $indent . '<li' . $id . $class_names . '>';
        }

        $atts           = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target ) ? $item->target : '';
        $atts['rel']    = ! empty( $item->xfn ) ? $item->xfn : '';
        $atts['href']   = ! empty( $item->url ) ? $item->url : '';

        /**
         * Add '.nav-link' class for <a> in parent menu for Bootstrap
         */
        if ( $depth === 0 ) {
            $atts['class'] = 'nav-link';
        }

        /**
         * Add the attributes for <a> in parent menu
         *
         * 1. Add '.dropdown-toggle' class for <a> in parent menu if it has sub-menu as required for Bootstrap
         * 2. Add '.dropdown' as 'data-toggle' attribute in <a> in parent menu if it has sub-menu as required for Bootstrap
         * 3. Add the current menu id attribute to indicate the exact menu to toggle for set in sub-menu div
         * 4. Add the attribute of 'true' for 'aria-haspopup' in parent menu to indicate it has sub-menus
         * 5. Add the attribute of 'false' for 'aria-expanded' in parent menu to indicate the sub-menus is hidden by default
         * 6. Add the '#' link in the <a> tag in the parent menu if it has sub-menu as required for Bootstrap
         */
        if ( $depth === 0 && in_array( 'menu-item-has-children', $classes ) ) {
            $atts['class']         .= ' dropdown-toggle';
            $atts['data-toggle']   = 'dropdown';
            $atts['id']            = 'navbar-dropdown-menu-link-' . $item->ID;
            $atts['aria-haspopup'] = "true";
            $atts['aria-expanded'] = "false";
            $atts['href']          = '#';
        }

        /**
         * Add the attributes for <a> in sub-menu
         * 1. Add '.dropdown-item' class for <a> inside sub-menu for Bootstrap
         * 2. Add the current menu id attribute if you want to style the menu differently
         */
        if ( $depth > 0 ) {
            $atts['class'] = 'dropdown-item';
            $atts['id']    = 'menu-item-' . $item->ID;
        }

        /**
         * Add '.active' class inside <a> in sub-menu for Bootstrap
         */
        if ( in_array( 'current-menu-item', $item->classes ) ) {
            $atts['class'] .= ' active';
        }

        /**
         * Add '.disabled' class for <a> in menu for Bootstrap disabled class
         */
        if ( in_array( 'disabled', $item->classes ) ) {
            $atts['class'] .= ' disabled';
        }

        /**
         * Filters the HTML attributes applied to a menu item's anchor element.
         *
         * @since                  3.6.0
         * @since                  4.1.0 The `$depth` parameter was added.
         *
         * @param array    $atts   {
         *                         The HTML attributes applied to the menu item's `<a>` element, empty strings are ignored.
         *
         * @type string    $title  Title attribute.
         * @type string    $target Target attribute.
         * @type string    $rel    The rel attribute.
         * @type string    $href   The href attribute.
         *                         }
         *
         * @param WP_Post  $item   The current menu item.
         * @param stdClass $args   An object of wp_nav_menu() arguments.
         * @param int      $depth  Depth of menu item. Used for padding.
         */
        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );

                /**
                 * If '.disabled' class is added to the menu, add the url of '#' in it
                 */
                if ( in_array( 'disabled', $item->classes ) ) {
                    $value = ( 'href' === $attr ) ? esc_url( '#' ) : esc_attr( $value );
                }

                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        /** This filter is documented in wp-includes/post-template.php */
        $title = apply_filters( 'the_title', $item->title, $item->ID );

        /**
         * Filters a menu item's title.
         *
         * @since 4.4.0
         *
         * @param string   $title The menu item's title.
         * @param WP_Post  $item  The current menu item.
         * @param stdClass $args  An object of wp_nav_menu() arguments.
         * @param int      $depth Depth of menu item. Used for padding.
         */
        $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        /**
         * Filters a menu item's starting output.
         * The menu item's starting output only includes `$args->before`, the opening `<a>`,
         * the menu item's title, the closing `</a>`, and `$args->after`. Currently, there is
         * no filter for modifying the opening and closing `<li>` for a menu item.
         *
         * @since 3.0.0
         *
         * @param string   $item_output The menu item's starting HTML output.
         * @param WP_Post  $item        Menu item data object.
         * @param int      $depth       Depth of menu item. Used for padding.
         * @param stdClass $args        An object of wp_nav_menu() arguments.
         */
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

    /**
     * Ends the element output, if needed.
     *
     * @since 3.0.0
     * @see   Walker::end_el()
     *
     * @param string   $output Passed by reference. Used to append additional content.
     * @param WP_Post  $item   Page data object. Not used.
     * @param int      $depth  Depth of page. Not Used.
     * @param stdClass $args   An object of wp_nav_menu() arguments.
     */
    public function end_el( &$output, $item, $depth = 0, $args = array() ) {
        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
            $t = '';
            $n = '';
        } else {
            $t = "\t";
            $n = "\n";
        }

        /**
         * <li> is required for parent menu only in Bootstrap
         */
        if ( $depth === 0 ) {
            $output .= "</li>{$n}";
        }
    }

    /**
     * Fallback menu
     * If you assign the fallback menu for your custom menu setup via wp_nav_menu function, then, this function will be
     * rendered if no menu is assigned to that menu location. You need to assign it via 'fallback_cb' array. Also, this
     * will be only rendered to the logged in users pointing them to the menu manager url.
     *
     * @param $args Arrays passed from the wp_nav_menu function
     */
    public static function fallback( $args ) {
        if ( current_user_can( 'edit_theme_options' ) ) {
            $container       = $args['container'];
            $container_id    = $args['container_id'];
            $container_class = $args['container_class'];
            $menu_class      = $args['menu_class'];
            $menu_id         = $args['menu_id'];

            // If there is container render it
            if ( $container ) {
                echo '<' . esc_attr( $container );

                // If container id is set render it
                if ( $container_id ) {
                    echo ' id="' . esc_attr( $container_id ) . '"';
                }

                // If container class is set render it
                if ( $container_class ) {
                    echo ' class="' . esc_attr( $container_class ) . '"';
                }

                echo '>';
            }

            // Default wrapper for menu is <ul>
            echo '<ul';

            // If menu id has been set render it
            if ( $menu_id ) {
                echo ' id="' . esc_attr( $menu_id ) . '"';
            }

            // If menu class has been set render it
            if ( $menu_class ) {
                echo ' class="' . esc_attr( $menu_class ) . '"';
            }

            // Close <ul> div wrapper for menu
            echo '>';

            // Display the link to Add New Menu
            echo '<li class="nav-item active"><a class="nav-link" href="' . esc_url( admin_url( 'nav-menus.php' ) ) . '">';
            esc_html_e( 'Add a menu', 'theme-textdomain' );
            echo '</a></li>';

            // Close the main <ul>
            echo '</ul>';

            // Close the main container div
            if ( $container ) {
                echo '</' . esc_attr( $container ) . '>';
            }

        }
    }

}
1
  • 1
    Please edit your answer, and add an explanation: why could that solve the problem? – fuxia Mar 20 '18 at 15:00

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.