Is there a way to customize the markup generated by the nav functions?

link|improve this question
feedback

1 Answer

You can edit the output by using a custom walker.

This site has an excellent tutorial on the subject:

http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

You might also find this useful: Menu items description?

Update: Here are the relevant bits.

The custom walker class:

// Extend Walker_Nav_Menu
class Custom_Walker extends Walker_Nav_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 ) . '"';

    $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

    $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 = '<strong>';
    $append = '</strong>';
    $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

    if($depth != 0)
    {
      $description = $append = $prepend = "";
    }

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

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

Call the menu with a reference to the custom walker:

// the menu
wp_nav_menu(array(
  'walker' => new Custom_Walker(), // a instance of our custom walker
));
link|improve this answer
Links can get abandoned. If you link, it's ok, but please put the code that you think it might be the answer here on the page. – kaiser Nov 24 '11 at 3:05
feedback

Your Answer

 
or
required, but never shown

Not the answer you're looking for? Browse other questions tagged or ask your own question.