2

Currently i am using:

<?php echo  wp_nav_menu( array( 'menu' => 'main-menu','depth'=> 1,'items_wrap' => '<ul class="navigation_ul">%3$s</ul>' ) ); ?> 

I want to achieve:

<ul class="navigation_ul">
        <li id="menu_1">
        <a href=""  class="active">
            <span class="left_arrow"></span>
            <span class="middle_text">About Us</span>
            <span class="right_arrow"></span>
        </a></li>
        <li id="menu_2">
        <a  href="">
            <span class="left_arrow"></span>
            <span class="middle_text">Downloads</span>
            <span class="right_arrow"></span>
        </a></li>
        <li id="menu_3">
        <a href="">
          <span class="left_arrow"></span>
            <span class="middle_text">For Learning</span>
            <span class="right_arrow"></span>
    </a></li>
        <li id="menu_4">
          <a href="">
            <span class="left_arrow"></span>
            <span class="middle_text">Support</span>
            <span class="right_arrow"></span>
        </a></li>
    </ul>  

But i am not getting it in this way. Please help me out to find out the solution its very urgent.

1
  • What output do you get from your code? Jul 14, 2014 at 16:11

2 Answers 2

5

According to the Codex, wp_nav_menu() has a couple parameters to add HTML or entities before and after the generated HTML. The parameters you want is link_before and link_after and to get the effect you're after looks like this:

'link_before' => '<span class="left_arrow"></span><span class="middle_text">',     
'link_after'  => '</span><span class="right_arrow"></span>'
0
0

Not answering the question but maybe answering the problem:

  1. If the arrows are used for functionality (e.g. they do something when clicked) that requires Javascript (presumably does if so), then use javascript to insert the elements since they're useless without JS. Additionally, if this is the case, make sure there are text replacements for the icons.
  2. If the arrows are purely decorative, think about using pure CSS. With Dashicons, you'd apply the dashicons font to both .navigation_ul a::before and .navigation_ul a::after and then apply the correct glyph to each separately. Searching the Dashicons page for "arrow" will show you the three styles they provide.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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