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:
- Get rid of all the id and class tags on the li, I'm not sure where these are being generated.
- Somehow get the "[li class="topMenuDivider"]|[/li]" to appear after the closing li rather than before it.
- 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>',