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

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.