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:

Posts in:

Contact Me


By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.