WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Add rel attribute to wp_nav_menu (4 posts)

  1. Jeremy Pry
    Member
    Posted 3 years ago #

    I'm looking to create a plugin or function that can add a rel="$value" attribute to anchor link(s) that are generated by wp_nav_menu(). I've done some searching through the forums and on google, but I haven't found an existing solution or a hook that I can use to easily add the rel attribute.

    Can anyone point me in the right direction of a resource to help me, and/or give me some suggestions on how I might implement this?

  2. Mark / t31os
    Moderator
    Posted 3 years ago #

    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.

  3. Jeremy Pry
    Member
    Posted 3 years ago #

    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.

  4. Jeremy Pry
    Member
    Posted 3 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic