Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Ok, so this is the code I have to my Mega Menu that works with Bootstrap framework for Wordpress. For some reason, when I enter a class name in the backend of Wordpress > Menus > Sub item > CSS Classes, it's not showing up int he mark up. However if I put a Title, the title tag shows up.

I've been going back and forth and I'm at loss what to do to fix it.

Below is the navigation coding:

class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {

// <ul> elements
function start_lvl(&$output, $depth) {
    // code indentation
    $indent = ($depth > 0 ? str_repeat("\t", $depth) : '');
    // build classes
    $classes = array(
    // only the top level will have dropdowns
    $depth == 0 ? 'dropdown-menu' : '',
    // assign a class to items nested deeper
    $depth >= 1 ? 'sub-menu col-sm-4' : '');
    $class_names = implode(' ', $classes);
    // build html - <ul> becomes <div> at top levels
    if ($depth == 0)
        $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n" . $indent . '<li class="col-sm-12">' . "\n";
    else
        $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";
}

// <li> elements and <a> links
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    // code indentation
    $indent = ($depth) ? str_repeat("\t", $depth) : '';
    // prepare
    $li_attributes = '';
    $class_names = $value = '';
    $classes = empty($item -> classes) ? array() : (array)$item -> classes;
    // build classes and attributes for <li> elements that have nested <ul>
    if ($args -> has_children && $depth == 0) {
        $classes[] = 'dropdown yamm-fw';
        $li_attributes .= 'data-dropdown="dropdown"';
    }
    $classes[] = 'menu-item-' . $item -> ID;
    // if we are on the current page, add the active class to that menu item
    $classes[] = ($item -> current) ? 'active' : '';
    // add all of the wordpress classes, including those set by user in Wordpress
    $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
    $class_names = ' class="' . esc_attr($class_names) . '"';
    // add id to <li> elements
    $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item -> ID, $item, $args);
    $id = strlen($id) ? ' id="' . esc_attr($id) . '"' : '';
    // build html - the <li> elements at top level become <div>
    if ($depth == 0)
        $output .= $indent . '<li class="dropdown">' . "\n" . $indent . '<div ' . $id . $value . $class_names . $li_attributes . '>';
    //
    elseif ($depth == 1)
        $output .= $indent . '<div class="yamm-content column row">';
    else
        $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
    // build attributes and classes for <a> link elements
    $attributes = !empty($item -> attr_title) ? ' title="' . esc_attr($item -> attr_title) . '"' : '';
    $attributes .= !empty($item -> target) ? ' target="' . esc_attr($item -> target) . '"' : '';
    $attributes .= !empty($item -> xfn) ? ' rel="' . esc_attr($item -> xfn) . '"' : '';
    $attributes .= !empty($item -> url) ? ' href="' . esc_attr($item -> url) . '"' : '';
    $attributes .= ($args -> has_children && $depth == 0) ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';
    // build <a> link html
    $item_output = $args -> before;
    $item_output .= '<a' . $attributes . '>';
    $item_output .= $args -> link_before . apply_filters('the_title', $item -> title, $item -> ID) . $args -> link_after;
    // add a bootstrap "caret" to top level dropdowns toggles
    $item_output .= ($args -> has_children && $depth == 0) ? ' <b class="caret"></b> ' : '';
    $item_output .= '</a>';
    if ($depth == 0)
        $item_output .= '<p class="sub">' . $item -> description . '</p>';
    else
        '';
    $item_output .= $args -> after;
    // final html output
    $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}

function end_el(&$output, $item, $depth) {
    // closes elements opened in start_el
    if ($depth == 0)
        $output .= '</div>' . "\n" . '</li>' . "\n";
    elseif ($depth == 1)
        $output .= '</div>' . "\n";
    else
        $output .= "</li>\n";
}

function end_lvl(&$output, $depth) {
    // code indentation
    $indent = ($depth > 0 ? str_repeat("\t", $depth) : '');
    // closes elements opened in start_lvl
    if ($depth == 0)
        $output .= $indent . '</li>' . "\n" . $indent . '</ul>' . "\n";
    else
        $output .= $indent . '</ul>' . "\n";
}

// Overwrite display_element function to add has_children attribute @since WP 3.4
function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
    if (!$element)
        return;
    $id_field = $this -> db_fields['id'];
    //display this element
    if (is_array($args[0]))
        $args[0]['has_children'] = !empty($children_elements[$element -> $id_field]);
    else if (is_object($args[0]))
        $args[0] -> has_children = !empty($children_elements[$element -> $id_field]);
    $cb_args = array_merge(array(&$output, $element, $depth), $args);
    call_user_func_array(array(&$this, 'start_el'), $cb_args);
    $id = $element -> $id_field;
    // descend only when the depth is right and there are children for this element
    if (($max_depth == 0 || $max_depth > $depth + 1) && isset($children_elements[$id])) {
        foreach ($children_elements[ $id ] as $child) {
            if (!isset($newlevel)) {
                $newlevel = true;
                //start the child delimiter
                $cb_args = array_merge(array(&$output, $depth), $args);
                call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
            }
            $this -> display_element($child, $children_elements, $max_depth, $depth + 1, $args, $output);
        }
        unset($children_elements[$id]);
    }
    if (isset($newlevel) && $newlevel) {
        //end the child delimiter
        $cb_args = array_merge(array(&$output, $depth), $args);
        call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
    }
    //end this element
    $cb_args = array_merge(array(&$output, $element, $depth), $args);
    call_user_func_array(array(&$this, 'end_el'), $cb_args);
}

}

function Bootstrap_nav_menu_css_class($classes, $item) {
// CHANGE .current-menu-item .current-menu-parent .current-menu-ancestor INTO .active
$classes = preg_replace('/(current(-menu-|[-_]page[-_])(item|parent|ancestor))/', 'active', $classes);

// Add the .dropdown class to the list items that have children
if ($item -> hasChildren) {
    $classes[] = 'dropdown';
}

return $classes;
}

Below is the HTML mark up that it outputs, I put a comment on where the class attribute is not being added:

<nav role="navigation" class="navbar yamm navbar-default">
            <!-- Mobile display -->
            <div class="navbar-header">
                <button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="/wordpress" class="navbar-brand"><img src=/images/logo.png"></a><span class="tagline visible-lg">A leader in the field of assessment and career guidance</span>
            </div>
            <!-- Collect the nav links for toggling -->
              <div class="collapse navbar-collapse navbar- ex1-collapse"><ul class="nav yamm navbar-nav" id="main-menu"><li class="dropdown">
<div data-dropdown="dropdown" class="main-nav-link columnizer menu-item menu-item-type-taxonomy menu-item-object-category current-category-ancestor active active current-category-parent menu-item-has-children dropdown yamm-fw menu-item-86 open" id="menu-item-86"><a data-toggle="dropdown" class="dropdown-toggle" href="/wordpress/./products">Products <b class="caret"></b> </a><p class="sub">Career and Psych Assessments</p>
<ul class="dropdown-menu ">
<li class="col-sm-12">
<div class="yamm-content column row">
        <a href="/wordpress/./#" title="Section Title">Section Title</a> <!-- class="section" is not being added to a-links -->
<ul class=" sub-menu col-sm-4">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-195" id="menu-item-195"><a href="/wordpress/#">Test Link</a></li><!-- class="section" is not being added to a-links -->
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-197" id="menu-item-197"><a href="/wordpress/#">Test Link</a></li><!-- class="section" is not being added to a-links -->
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-199" id="menu-item-199"><a href="/wordpress/#">Test Link</a></li><!-- class="section" is not being added to a-links -->
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-200" id="menu-item-200"><a href="/wordpress/#">Test Link</a></li><!-- class="section" is not being added to a-links -->
</ul>
</div>
share|improve this question
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.