17 March 2013

Add classes to parent Li tags in WordPress navigation menus

Wordpress navigation levels

While WordPress adds many useful CSS classes and IDs to li and ul tags within menus, for some reason it adds nothing to li tags that have other lists nestled within them.┬áThis is unfortunate, as it’s impossible to add some kind of indicator (e.g. a background image) to help users know which menu items contain deeper levels of navigation.

Cue, jQuery:

And to add a class to the top parent li and a different class to all deeper level parent li tags:

So now we can assign different background images to each parent item: