Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Custom Walker Class for Menu wp_nav_menu WordPress

  • SOLVED

Hi,

the standard wp_nav_menu does not allow to strip id or classes fully and produces thus too much CSS classes for my need.

I would need the following output .. achieved by a custom walker class

Final output must be:

<div class="nav-stack nav-1">
<ul class="yog-grid">
<li class="first"><a href="#" ><span>Link</span></a></li>
<li><a href="#" ><span>Link</span></a></li>
<li><a href="#" ><span>Link</span></a></li>
<li><a href="#" ><span>Link</span></a></li>
<li><a href="#" ><span>Link</span></a></li>
<li><a href="#" ><span>Link</span></a></li>
<li><a href="#" ><span>Link</span></a></li>
<li><a href="#" ><span>Link</span></a></li>
<li><a href="#" ><span>Link</span></a></li>
<li class="last"><a href="#" ><span>Link</span></a></li>
</ul>
</div>


The code that I will use in my header.php then:

<?php wp_nav_menu( array('menu' => 'secondlevel', 'sort_column' => 'menu_order', 'container_class' => 'menu-header', 'walker' => new NAME-OF-WALKER() ) ); ?>


Task
Create the custom walker class to reflect the above menu output

2011-11-03 by pberg

Answers (3)

2011-11-03

Sébastien | French WordpressDesigner answers:


class custom_menu extends Walker_Nav_Menu
{

function start_lvl(&$output, $depth) {
$indent = str_repeat("", $depth);
$output .= "<ul class=\"yog-grid\">";
}



function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

$class_names = $value = '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';

$output .= $indent . '<li>';

//$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 ) .'"' : '';

$prepend = '<span>';
$append = '</span>';

$item_output = $args->before;
$item_output .= '<a'. $attributes .'>'.$prepend;
$item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
$item_output .= $append.'</a>';
$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}


EDIT :
the code for the header.php for example

<?php wp_nav_menu( array('menu' => 'secondlevel', 'sort_column' => 'menu_order', 'container_class' => 'nav-stack nav-1', 'walker' => new custom_menu() ) ); ?>

Sébastien | French WordpressDesigner comments:

with the class "first" :-)


class custom_menu extends Walker_Nav_Menu
{
function start_lvl(&$output, $depth) {
$indent = str_repeat("", $depth);
$output .= "<ul class=\"sub-menu\">";
}



function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

$class_names = $value = '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';

$class="";
if ($item->menu_order==1) $class='class="first"';
$output .= $indent . '<li '.$class.'>';

//$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 ) .'"' : '';

$prepend = '<span>';
$append = '</span>';


$item_output = $args->before;
$item_output .= '<a'. $attributes .'>'.$prepend;
$item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
$item_output .= $append.'</a>';
$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

Sébastien | French WordpressDesigner comments:

for the class "last", increase your fee please :-)

Sébastien | French WordpressDesigner comments:

arf it's ok with this fee :-))))

the code with the class "last" too



class custom_menu extends Walker_Nav_Menu
{
function start_lvl(&$output, $depth) {
$indent = str_repeat("", $depth);
$output .= "<ul class=\"sub-menu\">";
}



function start_el(&$output, $item, $depth, $args)
{
global $wp_query;


$menu_to_count = wp_nav_menu(array(
'echo' => false,
//'theme_location' => 'menu'
));
$menu_items = substr_count($menu_to_count,'class="menu-item ');
//echo $menu_items;


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

$class_names = $value = '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';

$class="";
if ($item->menu_order==1) $class='class="first"';
if ($item->menu_order==$menu_items) $class='class="last"';
$output .= $indent . '<li '.$class.'>';

//$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 ) .'"' : '';

$prepend = '<span>';
$append = '</span>';


$item_output = $args->before;
$item_output .= '<a'. $attributes .'>'.$prepend;
$item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
$item_output .= $append.'</a>';
$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

Sébastien | French WordpressDesigner comments:

you can see the result at the top of this demo
[[LINK href="http://demo.archiparmentier.com"]]http://demo.archiparmentier.com[[/LINK]]

2011-11-03

Fahad Murtaza answers:

I am on it.

Edit: I see Sébastien has provided the complete solution. I was stuck at class last.

2011-11-03

Julio Potier answers:

Hello

I already answer a question about Walker, but i've got no time now.
If anyone want my code : check this : http://wpquestions.com/question/show/id/3156
;)