Add a Parent Class to WordPress Menus

Wordpress Menu

When you’re creating a relatively complex wordpress website, which requires more than just one level of navigation (for example – using subcategories or sub-pages), one needs to differentiate between different levels of a menu.

In order to differently stylize a parent menu item (for example using a down pointing arrow ‘▼’, indicating that this item has children items), you need to add an additional class, which can be done by pasting this code inside your functions.php file:

Note: You need to put this code inside a function that is used also for the registration of navigational menus, which is called with the after_theme_setup hook.

Now you can target parent menu items using a css class of .has-children, which in turn gives you an opportunity to select the children of these elements by using a so called child combinator (represented by the ‘>’ symbol).

More about the filter used in this code snippet: