Adding a tag inside of the navigation links

[NWTD]

From what I understand, is that this can be done by extending the Walker Class. I, however, don't understand how the Walker Class and all work in regards to the Genesis navigation functions.

My nav is shown with the following HTML markup:

<ul>
    <li>
        <a href="/some-link">Some Link Title</a>
    </li>
</ul>

I'm trying to turn it into something like this:

<ul>
    <li>
        <a href="/some-link
            <span data-hover="Some Link Title">Some Link Title</span>
        </a>
    </li>
</ul>

So I need to add a <span> tag inside of the href tags, then pass the link name to the data-hover attribute, I assume this needs to be done by utilizing the Walker class? Any help or examples would be greatly appreciated.

[Anita]

Bill Erickson has a tutorial on this.

---

Love coffee, chocolate and my Bella!

[Brad Dalton]

Link to your site please.

What exactly are you trying to do?

---

Tutorials for StudioPress Themes & WooCommerce.

[NWTD]

@braddalton, My site's under development, so providing a link wouldn't be much help.

I'm using the Genesis Sample child theme to develop my site.All I'm after is to add a <span> around the text in each navigation item.

[NWTD]

@anitac That got me part way there. Adding that bit of code to my functions.php just dumped the menu at the top of my page. Is there a way to edit the output of the genesis_do_nav to show these changes?

[Brad Dalton]

You can customize the output using filters http://my.studiopress.com/docs/filter-reference/

There are several for the nav menu

---

Tutorials for StudioPress Themes & WooCommerce.

[NWTD]

Thanks @braddalton. I did come across that, however, I wasn't sure how to apply the filters and make it work for what I want or to apply the walker. Do you have any suggestions or examples of how to make it work?

FWIW, I extended the walker class and was able to get menu items to have the <span> tag with this code. The only problem was that it just dumped that nav at the top of my pages rather than applying it to my exisitng nav in my templates.

class Menu_With_Data_Attr 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 ) .'"' : '';
 
		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'><span data-hover="'.$item->title.'">';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '</span></a>';
		$item_output .= $args->after;
 
		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

[Brad Dalton]

No sorry i don't as i have never done that before so not 100% sure without working out the solution myself and testing it.

---

Tutorials for StudioPress Themes & WooCommerce.

[NWTD]

If any one has any suggestions, I'd appreciate the feedback. I do have this posted on WordPress Answers as well

[melriksdesign]

For anyone looking to add spans to your nav links, this tutorial will get you part of the way there.

http://www.wpstuffs.com/add-menu-description-in-genesis/

With a little editing, you'll get spans inside your anchors. Change the class to what you need it to be. Replace the nbsp with text (if desired).

function be_add_span( $item_output, $item ) {
 return preg_replace( '/(<a.*?>[^<]*?)</', '$1' . '<span class="my-image">&nbsp;</span><', $item_output);
}
add_filter( 'walker_nav_menu_start_el', 'be_add_span', 10, 2 );

[Brad Dalton]

Here's where the code really comes from which includes the full solution

---

Tutorials for StudioPress Themes & WooCommerce.

[melriksdesign]

Unfortunately, this affected every link on the page.

I ended up removing the child theme nav and replacing it with WorPress' navigation which has a built in method for adding html before and after the link. Bummed that this wasn't easy with Genesis.

[Author]

Posts