Dropdown Menu Class

In the past I’ve used Superfish to style menu items with submenus differently than others. But now that it’s not enabled by default in Genesis (there is a filter to turn it on though), I decided to find a non-Javascript method.

This functionality was recently added to WordPress core, and is expected to be released in 3.7. But this plugin provides you the functionality without needing to run trunk. The code in this plugin only runs if your version is older than 3.7 (ex: 3.6.1), so once you update WordPress you’ll seamlessly be using the WordPress core version instead. No need to update your theme’s styles or to disable this plugin.

This plugin adds a CSS class of ‘menu-item-has-children’ to menu items with submenus. This is pure PHP so will work if Javascript is disabled, and you won’t get the “flash of unstyled content” (FOUC) commonly associated with Javascript approaches.

Download Dropdown Menu Class from GitHub. | View All of My Plugins

It’s recommended that you limit the scope of the plugin to the specific theme locations you want to target using the dropdown_menu_class_menus filter. This will reduce unnecessary database queries. By default, the code runs on all menus.

Here’s an example of limiting it to the ‘primary’ menu theme location.

Once you’re running WordPress 3.7 the class will be applied to all menus, regardless of your use of this filter. But the reason we’re using this filter is for performance reasons. My way requires additional database queries, since I have to work with the filters that are available. Core was able to do it without database queries, so there’s no need to limit this to certain menus.

chat14 Comments

    • Bill Erickson says

      Yes, it will work for any type of site.

      This plugin ONLY adds a class to the menu item. It’s up to you to style it the way you want.

  1. says

    Can this be used on a custom menu in the header?
    I just noticed the classes for parent/ancestor etc. are also not added anymore (gen. 2.01 html5 pro theme) What would you suggest to bring those back…

  2. says

    Hi Bill,

    Thanks for the tutorial!!

    My question:
    I recently launched a new blog, hosted on synthesis with sixteen nine pro theme from Genesis, will this plugin work on it ( for this Genesis theme)?

    Thank you.

  3. Tom Bock says

    Bill,

    Thanks for all the great info! On CSSTricks, there is a tutorial on inserting a responsive dropdown menu using little Javascript ( http://css-tricks.com/unobtrusive-page-changer/ ). How did you insert your responsive dropdown menu? I tried the ‘genesis_header’ action, but it did not work. I also noticed it is outside the #header .wrap. Hos did you do that?

    Thanks

Leave a Reply

If you'd like to include code in your post, please post it to http://gist.github.com and include a link.