1

I found examples adding a class to top level items, so we can display an arrow in menu items with sub-items, but is seems terrible to cope with the already built in WordPress classes, can't display the arrow with current and css hover, it just ruins all states.

The current nav menu is like this <li><a>Text</a></li>

Is there someway to add a <span class="something"><i class="something"></i></span> within the parent <a></a> tags instead?

Example

<li class="main-nav__item">
      <a class="main-nav__item-link" href="index.html">
            <span class="main-nav__item-icon-wrapper">
                   <i class="main-nav__item-icon icon-home"></i>
            </span>
            <span class="main-nav__item-content">Home</span>
      </a>
</li>
<li class="main-nav__item">
        <a class="main-nav__item-link" href="index.html">
               <span class="main-nav__item-icon-wrapper">
                     <i class="main-nav__item-icon icon-Blog"></i>
               </span>
               <span class="main-nav__item-content">Blog</span>
        </a>
</li>

The current code Adds the tags outside the tags that is parent

class Walker_Nav_Menu extends Walker {

    public function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"main-nav\">\n";
    }
}
1

You can use the wp_nav_menu() arguments like so:

wp_nav_menu( array(
    'menu'          => 'Whatever Your Menu Name Is',
    'link_before'   => '<span class="main-nav__item-icon-wrapper"><i class="main-nav__item-icon icon-home"></i></span><span class="main-nav__item-content">',
    'link_after'    => '</span>'
) );

link_before and *_after will add anything before/after the text inside the link where just the normal argument before and after will add anything before/after the entire link but still inside the list-item.

This will add them to all the list items but you can use CSS to style them or not display them however you wish and I think it's faster and easier than working with a walker.

  • Not working. please solve me using walker. – ASMSaief Jan 19 '16 at 18:32
  • @ASMSaief Not working, how? As in it breaks the website or it's not adding it in the correct places? – Howdy_McGee Jan 19 '16 at 21:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.