• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Adding a tag inside of the navigation links

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: genesis, links, nav, spans

  • This topic has 11 replies, 4 voices, and was last updated 8 years, 2 months ago by melriksdesign.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 2, 2014 at 10:36 am #82687
    NWTD
    Member

    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 #82699
    Anita
    Keymaster

    Bill Erickson has a tutorial on this.


    Love coffee, chocolate and my Bella!

    January 2, 2014 at 11:00 am #82700
    Brad Dalton
    Participant

    Link to your site please.

    What exactly are you trying to do?


    Get Help – Book Consultation.

    January 2, 2014 at 11:09 am #82705
    NWTD
    Member

    @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 #82709
    NWTD
    Member

    @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 #82711
    Brad Dalton
    Participant

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

    There are several for the nav menu


    Get Help – Book Consultation.

    January 2, 2014 at 12:03 pm #82713
    NWTD
    Member

    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 );
    	}
    }
    January 2, 2014 at 12:07 pm #82715
    Brad Dalton
    Participant

    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.


    Get Help – Book Consultation.

    January 2, 2014 at 3:53 pm #82763
    NWTD
    Member

    If 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 #133937
    melriksdesign
    Member

    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 );
    
    December 7, 2014 at 8:57 pm #133941
    Brad Dalton
    Participant

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


    Get Help – Book Consultation.

    December 8, 2014 at 4:45 am #133970
    melriksdesign
    Member

    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
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble