This code worked at the time, now I’m not so sure. Use at your own risk.
Have you ever wanted to add a mega menu to WordPress? There are plugins that claim to do it, but why use a plugin when you can add just a bit of code. Here is one, pretty simple, solution that works for me.
This code was tested in the default WordPress theme. It can work in any theme, however the instructions may very based on how the theme creator coded the theme.
First thing you’ll need to do is create a menu with WordPress’ built in menu system. Top level links are all you need. Also make sure that this is set to the ‘primary’ menu and test your site. If you don’t see the menu, the code below won’t work. Make sure that’s visible and working before we start.
Ready to go?
In the header.php theme file, find the wp_nav_menu function. This function is what calls the menu on your site. If you have more than one menu, find the one that you want to add a mega menu to.
Add this code $walker = new description_walker; above the wp_nav_menu function and then add ‘walker’ => description_walker to the wp_nav_menu.
$walker = new description_walker;
wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => $walker ) );
Now we want to add a new class in the functions.php file that will serve as the code that inserts the mega menu where we want it when the menu loads.
Don’t worry, I’ll explain what you need to know. Just put it at the bottom of your functions file.
Good news, the base code is in place!
At this point and time, your site, and menu, should still load properly. You don’t have any mega menus just yet though. If you’re getting errors, stop now and fix them.
Next, find the ID of the menu you want to add you mega menu to. This is done by using Firebug or Chrome’s inspector to inspect the main menu item and grab out its ID. Ignore the words, and just get the number.
Once you have that ID, edit the walker code that we just pasted in the functions.php file and look for the if statement that references the topLevelId. Swap 8675309 out with yours.
if ($this->topLevelId == 8675309)
Next, create a file that will contain the mega menu. In the example, I called it dropDown1.php. Stick this file in your themes folder.
In our dropDown1.php file start the file with ul li and end it with /li /ul. This code makes WordPress know there is a sub-menu on rollover.
Now add anything you want in that li. It can be HTML, CSS, JS, Images, WordPress functions; anything goes.
That’s it. Test your code and you should have a mega menu.
Don’t forget to add CSS styles to make it look good. Chances are any links you add in your mega menu will inherit styles from the default menu so be sure to update them.
Want more than one mega menu? Just copy the if statement and change the topLevelId to correspond with a different menu item and create a new php file for the menu.