Add rel attribute to wp_nav_menu

A filter on walker_nav_menu_start_el might be suitable for what you want, else take a look at the code in wp-includes/nav-menu-template.php.

Do you know where there might be some good examples or more detailed explanation of how to implement a walker? I’ve looked at Function_Reference/Walker_Class but it doesn’t seem to explain vey much.

Well, I did manage to find what I was looking for. Turns out the there already is a rel option for the default menus. In the Menu editor, it’s labelled as “Link Relationship (XFN)”.

I was also looking for a way to be able to make the Flex Drop Down Menu from Dynamic Drive work with the native menus, so I wouldn’t have to recreate the native menus from scratch. I’m sure there are other ways to make it work, but this is what I did to get it working (I’m posting this here in the hopes that it will help others):

First, I created a custom field called “flexdropdown”, and set the value of the field to the ID of the menu. Then I added this code to my functions.php file:

class Flexdropdown_Menu extends Walker_Nav_Menu {
/**
 * @see Walker::start_el()
 * @since 3.0.0
 *
 * @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. Used for padding.
 * @param int $current_page Menu item ID.
 * @param object $args
 */
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;
	$classes[] = 'menu-item-' . $item->ID;

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

	$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
	$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

	$output .= $indent . '<li' . $id . $value . $class_names .'>';

	$flexdata = '';
	$custom_fields = get_post_custom( $item->object_id );
	if ( key_exists( "flexdropdown", $custom_fields ) ) {
	   $flexdata = ' data-flexmenu="'. get_post_meta( $item->object_id, 'flexdropdown', true) . '"';
	}

	$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 .= $flexdata;
	$attributes .= ! empty( $item->url        ) ? ' href="'          . esc_attr( $item->url        ) .'"' : '';

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

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

Then I created the necessary menus in my header.php:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'walker' => new Flexdropdown_Menu() ) ); ?>
<?php wp_nav_menu( array( 'container' => 'none', 'menu_id' => 'flexmenu1', 'menu_class' => 'flexdropdownmenu', 'theme_location' => 'image_menu' ) ); ?>
<?php wp_nav_menu( array( 'container' => 'none', 'menu_id' => 'flexmenu2', 'menu_class' => 'flexdropdownmenu', 'theme_location' => 'services_menu' ) ); ?>

With those in place, it was just a matter of customizing the menus on the Admin page.

If someone sees a better way to do this, I would be interested in hearing it.