Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
What output do you get from your code? –  Pieter Goosen Jul 14 '14 at 16:11

2 Answers 2

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>'
share|improve this answer
    
Worked for me, thanks. –  Jack Nicholson Jul 27 at 12:45

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.
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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