Override Menu CSS Wordpress with Functions.php

Question

I am using the following override in my functions.php

function wp_nav_menu_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}

add_filter('nav_menu_css_class', 'wp_nav_menu_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'wp_nav_menu_attributes_filter', 100, 1);
add_filter('page_css_class', 'wp_nav_menu_attributes_filter', 100, 1);

This removes the class tag that wordpress adds to a menu item. Now what I need to do is actually put in my own class name into the li tag instead, can anyone fill me in quickly on how to do that, I have scoured google and maybe I am searching for it wrong or what not or I just cannot understand the hook system with the functions.php file....

Using the above make my html output as...

    <ul id="menu-homemenu" class="list-group special">
    <li><a href="#">Biography</a></li>
    <li><a href="#">Selected Works</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>

This is for my menu only called menu-homemenu, I have another one on the same page (used for an overlay) that I don't want to add the css to those LI tags. I currently was able to do it with this code but it does both menus - http://mattvarone.com/wordpress/cleaner-output-for-wp_nav_menu/ — whreed, Dec 11 '14 at 04:49

score 0 · Answer 1 · edited May 23 '17 at 11:50

Of course after I posted a comment I figured it out...sigh hate when this takes all evening to get it...this question pointed me in the right direction - How to add custom HTML to wp_nav_menu?

I added this class..

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $output .= "<li class='list-group-item'><a href=".esc_attr($item->url).">".esc_attr($item->title)."</a>";
    }

    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        $output .= "</li>\n";
    }
}

Then added this to my array where I called my nav inside my template...

<?php wp_nav_menu(array('menu' => 'HomeMenu','menu_class' => 'list-group special','menu_id' => '','walker' => new Custom_Walker_Nav_Menu)); ?>

Override Menu CSS Wordpress with Functions.php

1 Answers1