Bill Erickson

Blog / Release

Dropdown Menu Class

Written by Bill EricksonPublished on September 26, 2013Updated on January 9, 2019

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.

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Other articles in this series

A starter theme for building Hybrid WordPress Themes

May 29, 2023

A hybrid WordPress theme uses theme.json to define styles and customize the block editor while also using traditional PHP template files. Hybrid themes leverage the block editor for content but…

Custom recipe templates for WP Recipe Maker

October 7, 2019

I frequently work with food bloggers to improve the design, speed, and functionality of their websites. The recipe card is the most important element on the page. It should be…

How to Setup ConvertKit with a WordPress Form

April 13, 2017

Integrate ConvertKit and WPForms easily connects forms on your website to your ConvertKit email marketing account, enabling you to capture more leads and manage campaigns more effectively. WPForms‘ simple drag-and-drop form builder allows…

Reader Interactions

Comments are closed. Continue the conversation with me on Twitter: @billerickson

Comments

  1. Tim soheili says

    Will this work for a responsive site down to mobile phone size? See my site for my need for a single link to give my navigation a drop down as seen as fairly common.

    • 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.

  2. Henk van den Bor 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…

    • Bill Erickson says

      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.

  4. Dare 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.

  5. 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