Can’t add optional class to menu item when using Walker_Nav_Menu

1 Views

As a wordpress beginner. I’m creating menu also want to customized the <li> tag to be able to assign different class name to control specific behavior through CSS so I use custom walker to get a list with clean markup that I found here:

https://gist.github.com/toscho/1053467

Read More
class T5_Nav_Menu_Walker_Simple extends Walker_Nav_Menu
{
/**
* Start the element output.
*
* @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. May be used for padding.
* @param array $args Additional strings.
* @return void
*/
public function start_el( &$output, $item, $depth, $args )
{
$output .= '<li>';
$attributes = '';
! empty ( $item->attr_title )
// Avoid redundant titles
and $item->attr_title !== $item->title
and $attributes .= ' title="' . esc_attr( $item->attr_title ) .'"';
! empty ( $item->url )
and $attributes .= ' href="' . esc_attr( $item->url ) .'"';
$attributes = trim( $attributes );
$title = apply_filters( 'the_title', $item->title, $item->ID );
$item_output = "$args->before<a $attributes>$args->link_before$title</a>"
. "$args->link_after$args->after";
// Since $output is called by reference we don't need to return anything.
$output .= apply_filters(
'walker_nav_menu_start_el'
, $item_output
, $item
, $depth
, $args
);
}
/**
* @see Walker::start_lvl()
*
* @param string $output Passed by reference. Used to append additional content.
* @return void
*/
public function start_lvl( &$output )
{
$output .= '<ul class="sub-menu">';
}
/**
* @see Walker::end_lvl()
*
* @param string $output Passed by reference. Used to append additional content.
* @return void
*/
public function end_lvl( &$output )
{
$output .= '</ul>';
}
/**
* @see Walker::end_el()
*
* @param string $output Passed by reference. Used to append additional content.
* @return void
*/
function end_el( &$output )
{
$output .= '</li>';
}
}

The code work perfectly. But now, when I want to add optional class to one item in menu via “Css classes” but it doesn’t work.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. If you just want to add a class to one or more menu items, you’re probably doing it the hard way.

    Instead of using a custom Walker, use the “nav_menu_css_class” filter. Something like:

    function my_special_nav_class( $classes, $item ) {
    // Decide if you want to add a class and add it to array $classes
    return $classes;
}
add_filter( 'nav_menu_css_class', 'my_special_nav_class', 10, 2 );

  2. Just put the class name inside the li 

    public function start_el( &$output, $item, $depth, $args ){
    $output .= '<li class="YourCustomClassHere">';
    $attributes = '';
    ! empty ( $item->attr_title )
    // Avoid redundant titles
    and $item->attr_title !== $item->title
    and $attributes .= ' title="' . esc_attr( $item->attr_title ) .'"';
    ! empty ( $item->url )
    and $attributes .= ' href="' . esc_attr( $item->url ) .'"';
    $attributes = trim( $attributes );
    $title = apply_filters( 'the_title', $item->title, $item->ID );
    $item_output = "$args->before<a $attributes>$args->link_before$title</a>"
    . "$args->link_after$args->after";

    // Since $output is called by reference we don't need to return anything.
    $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}