Adding a tag inside of the navigation links

Community Forums Forums Design Tips and Tricks Adding a tag inside of the navigation links

This topic is: not resolved

This topic contains 8 replies, has 3 voices, and was last updated by  NWTD 7 months, 2 weeks ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #82687

    NWTD
    Participant
    Post count: 61

    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.

    • This topic was modified 7 months, 2 weeks ago by  NWTD.
    • This topic was modified 7 months, 2 weeks ago by  NWTD. Reason: formatting
    • This topic was modified 7 months, 2 weeks ago by  NWTD.
    • This topic was modified 7 months, 2 weeks ago by  NWTD. Reason: formatting
    #82699

    Anita
    Participant
    Post count: 7356

    Bill Erickson has a tutorial on this.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #82700

    braddalton
    Participant
    Post count: 9199

    Link to your site please.

    What exactly are you trying to do?


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #82705

    NWTD
    Participant
    Post count: 61

    @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.

    • This reply was modified 7 months, 2 weeks ago by  NWTD.
    • This reply was modified 7 months, 2 weeks ago by  NWTD.
    #82709

    NWTD
    Participant
    Post count: 61

    @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?

    #82711

    braddalton
    Participant
    Post count: 9199

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

    There are several for the nav menu


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #82713

    NWTD
    Participant
    Post count: 61

    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 );
    	}
    }
    #82715

    braddalton
    Participant
    Post count: 9199

    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.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #82763

    NWTD
    Participant
    Post count: 61

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.