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.

I am trying to get wp_nav_menu to output something like this:

<div id="topMenu" class="spanningMenu noPrint">
    <ul>
        <li class="topMenuDivider"></li>
        <li><a href="#">Home</a></li>
        <li class="topMenuDivider">|</li>
        <li><a href="#>Contact Us</a></li>
        <li class="topMenuDivider">|</li>
        <li><a href="#>Services</a></li>
        <li class="topMenuDivider"></li>
    </ul>
</div>

I'm close, but I can't quite get there. This is what I've done so far, and the output I get:

Code:

    <?php 
        $defaults = array(
            'theme_location'  => 'Primary Menu',
            'menu'            => 'Primary Menu',
            'container'       => 'div',
            'container_class' => 'spanningMenu noPrint', 
            'container_id'    => 'topMenu',
            'fallback_cb'     => '',
            'after'           => '<li class="topMenuDivider">|</li>',
            'items_wrap'      => '<ul><li class="topMenuDivider"></li>%3$s<li class="topMenuDivider"></li></ul>',

        );

        wp_nav_menu($defaults);

    ?>

Result:

<div id="topMenu" class="spanningMenu noPrint">
    <ul>
        <li class="topMenuDivider"></li>
        <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-51"><a href="#">Home</a>
            <li class="topMenuDivider">|</li>
        </li>
        <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="#">Contact Us</a>
            <li class="topMenuDivider">|</li>
        </li>
        <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="#">Services</a>
            <li class="topMenuDivider">|</li>
        </li>
        <li class="topMenuDivider"></li>
    </ul>
</div>

So there are three things I still need to do, and I have no idea how to do them:

  1. Get rid of all the id and class tags on the li, I'm not sure where these are being generated.
  2. Somehow get the "[li class="topMenuDivider"]|[/li]" to appear after the closing li rather than before it.
  3. Get rid of the last li that inserts a |

Is this possible?

Edit:

I have solved #2 by changing these lines as follows. It's kind of a hack, but it works:

            'after'           => '</li><li class="topMenuDivider">|',
            'items_wrap'      => '<ul><li class="topMenuDivider"></li>%3$s<li class="topMenuDivider"></li></ul>',
share|improve this question

1 Answer 1

Take a look here for #1: remove li class & id for menu items and pages list

Regarding items #2 and #3, why not just do this with CSS? The separators shouldn't be in their own <li> tags anyway. The following CSS will add a | after each menu item, except the last.

#topMenu ul li a:after {
  content: "|";
  display: inline-block;
  margin-left: .618em;
  width: 1em;
}
#topMenu ul li:last-child a:after {
  display: none;
}
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.