WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a nav menu call:

'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>

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.


<li id="item1">List item</li>
<li id="item2">List item</li>
<li id="item3">List item</li>
<li id="item4">List item</li>

Any help would be appreciated.

share|improve this question
do you want to reorder the li items id's? – Fatih Toprak Oct 27 '12 at 9:18
Thats what would happen if he meddled with the IDs as he wants, he's looking for a fix to his problem, he's looking for a fix for a fix for a fix for his problem – Tom J Nowell Nov 29 '12 at 12:20

If you can stand to not have it be backwards compatible, CSS3 introduced the nth-child selector, you could leverage that

share|improve this answer

check out http://codex.wordpress.org/Function_Reference/wp_nav_menu and look for the items_wrap part

share|improve this answer

Go to WP-admin -> Appearance -> Menus -> Screen options (top right) -> Check CSS Classes -> Open menu item and put your custom class you want and prepare style for it.

The best and easiest way to create custom CSS for each element in menu.

share|improve this answer

Your Answer


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.