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.

<?php
/**
* Apply Dropdown Menu Class to Primary Only
*
* @author Bill Erickson
* @link https://gist.github.com/billerickson/6700212
*
* @param array $menus, theme locations
* @return array $menus
*/
function be_dropdown_class_on_primary( $menus ) {
return array( 'primary' );
}
add_filter( 'dropdown_menu_class_menus', 'be_dropdown_class_on_primary' );
view raw functions.php hosted with ❤ by GitHub

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.

Release

Receive New Posts by Email

Comments

    1. 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. 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…

    1. That’s actually a bit cleaner than my original implementation. It doesn’t require an additional WP query because it’s running on the object. I’ve updated my code to use that approach.

      There’s a few benefits to using my plugin over code dropped in functions.php.

      1. I’m using the class that WordPress 3.7 will natively use (menu-item-has-children). So you won’t have to update your CSS with new versions of WordPress
      2. When you’re using WordPress 3.7 or later, my plugin will simply not run since it isn’t needed. The code snippet you provided doesn’t have a version_compare() check, so you’ll have both the WP core class and your custom class added
      3. When you know it’s not needed anymore (WP 3.7 running), it’s easier to disable and delete a plugin than to dig into functions.php and delete the code.
  2. 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. 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 comment