Creating Sequential Count on Wordpress Nav Menu

I have a piece of code which I’m using to add a sequential number to each item in a list. The reason for this is because the graphic designer for the project wants a different background item for everything in the list, and doing this works perfectly for me. However, a problem has arisen as the code was being used for just a one-level list. Now, it’s got two levels but I don’t want the child list items to be included in the count. Does anyone know how I could change this code so that it only counts items in the parent list?

Here’s my code at the moment:

			$navcount = wp_nav_menu( array(
								'theme_location' => 'Top Bar',
								'menu' => 'Main Menu',
								'depth'      => 2,
								'container'  => false,
								'echo'            => false,
								'menu_class'     => 'nav'
							) );

			$nav_bits = explode('<li ', $navcount);
			$navcount = ''; $i = 0;
			foreach($nav_bits as $bits) :
			if($i==0) { $navcount = $navcount.$bits; }
			else { $navcount = $navcount.'<li class="item'.$i.'" '.$bits; }
			echo $navcount;


I don’t know WP code at all, but I wonder if you’ve played with those settings at all, such as changing

'depth'      => 2, 


'depth'      => [COLOR="#FF0000"]1[/COLOR], 

If all else fails, you can do this with CSS.

Hey Ralph,
I have played around with it, but with no luck. Changing the depth to 1 means that it kind of does what I want it to do, but I then lose all the child menus in the final code. If I was to do it that way I would need to use the code to append the ID to the menu and then run the code again with a depth of 2 but including the extra code I’d just generated, but I really don’t know how to do that.

How would you do this with CSS?


You would just allow a background image on top level links but not on lower level ones. If you’ve able to post a live link we can give you the exact code.