I have a nav menu call:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'primary-menu' ) ); ?>
The output looks something like this:
<div class="primary-menu"><ul id="menu-other-links" class="menu">
<li id="menu-item-51" class="menu-item menu-item-type-custom"><a href="#">RSS</a></li>
<li id="menu-item-49" class="menu-item menu-item-type-post_type"><a href="http://localhost:8888/graca/contacto/">Contacto</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-custom"><a href="#">Facebook</a></li>
<li id="menu-item-53" class="menu-item menu-item-type-custom"><a href="#">Twitter</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type"><a href="#">Site Info</a></li>
</ul></div>
I'm trying to apply a different background color to each menu item, so #1 would get one color, #2 a second color.
I would like the theme work for whatever menu items someone wants to set up- so it would be preferable it the #id on each li went in order.
Eg:
<ul>
<li id="item1">List item</li>
<li id="item2">List item</li>
<li id="item3">List item</li>
<li id="item4">List item</li>
</ul>
I am guessing it has to go through a filter, but I don't really understand preg_replace. This is as far as I got, which obviously set all the ids to 0. Preferably, it would count:
function nav_menu_li_id_filter($output) { // add a class to menu-item
$idcounter = 0;
return preg_replace('/menu-item-[\d][\d]/', 'item-' . $idcounter, $output, -1);
}
add_filter('wp_nav_menu', 'nav_menu_li_id_filter');
Any help would be appreciated.