Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question

closed as not a real question by toscho Feb 18 at 23:43

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, see the FAQ.

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
));
share|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

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