Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding a tag inside of the navigation links
- This topic has 11 replies, 4 voices, and was last updated 9 years, 4 months ago by melriksdesign.
-
AuthorPosts
-
January 2, 2014 at 10:36 am #82687NWTDMember
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.
January 2, 2014 at 11:00 am #82699January 2, 2014 at 11:00 am #82700Brad DaltonParticipantJanuary 2, 2014 at 11:09 am #82705NWTDMember@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.
January 2, 2014 at 11:38 am #82709NWTDMember@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?
January 2, 2014 at 11:46 am #82711Brad DaltonParticipantYou can customize the output using filters http://my.studiopress.com/docs/filter-reference/
There are several for the nav menu
January 2, 2014 at 12:03 pm #82713NWTDMemberThanks @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 ); } }
January 2, 2014 at 12:07 pm #82715Brad DaltonParticipantNo sorry i don't as i have never done that before so not 100% sure without working out the solution myself and testing it.
January 2, 2014 at 3:53 pm #82763NWTDMemberIf any one has any suggestions, I'd appreciate the feedback. I do have this posted on WordPress Answers as well
December 7, 2014 at 7:16 pm #133937melriksdesignMemberFor 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"> </span><', $item_output); } add_filter( 'walker_nav_menu_start_el', 'be_add_span', 10, 2 );
December 7, 2014 at 8:57 pm #133941Brad DaltonParticipantHere's where the code really comes from which includes the full solution
December 8, 2014 at 4:45 am #133970melriksdesignMemberUnfortunately, 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.