How to Create a Fully Custom WordPress Mega Menu – No Plugins Attached

The mega menu concept has been with us for a while now. With each passing day more and more sites are trying to utilize this function in various ways in order to serve us as much information as possible through, what appears to be, a simple “dropdown” menu. When using WordPress, both clients and developers often end up using some sort of plugin to implement this function. Guess what? We’ll show you how you can implement a custom WordPress mega menu with just a few lines of code and zero plugins.

Before we get down to the coding part, let’s first talk about what exactly we’re going to create since mega menus can be built in lots of different ways. Essentially, we’re going to use a combination of menu locations, menu items, widget areas and widgets. We’re going to have a specific menu location that will hold menu items. Each menu item from that menu location will be able to “host” widgets “within itself” through a dedicated widget area for that menu item. Those widgets can be anything from custom menus, text areas to images and articles.

To kick off with creating our own custom WordPress mega menu – let’s get down to the coding part!

Registering a dedicated menu location

Firstly we need to register a new menu location. The reason for this is we want to have a specific location on the site that will host our custom WordPress mega menu so you, or the client, can add on as many menu items as needed. In order for us to register the new menu location – we’ll open up the functions.php file (assuming you already have a theme on which to work on) and add the following lines of code:

Now let’s add few menu items to our new menu location.

Not all menu items will have widgets attached to them. With this in mind we want to develop a way in which we can distinguish those menu items from those that will indeed host some widgets. There are many ways in which we can do that but let’s keep it simple. We’ll use the “CSS Classes” option. If you don’t see the “CSS Classes” option (field) under your menu items just click the “Screen Options” button in the upper right corner of the window and select the “CSS Classes” option.

Now let’s add the “has-mega-menu” class (feel free to use any class name you wish) to 2 of our menu items that will have a mega menu dropdown attached (don’t forget to click the “Save Menu” button once you’re done).

Dynamic sidebar (widget area) registration

Our custom WordPress mega menu is coming along nicely. Next we want to register new widget areas (sidebars) for each menu item with the “has-mega-menu” CSS class. To do that we’ll create a new function which hooks to the “widgets_init” action. Within that function we’ll iterate over all menu items within a “mega_menu” menu location and in every iteration check if the menu item contains the “has-mega-menu” CSS class or not. If it does, simply create a new widget area for that menu item using the register_sidebar function.

If we now go to the “Appearance -> Widgets” administration interface we should see 2 new widget areas. There’s one for each menu item with the “has-mega-menu” CSS class (“Solutions” and “Company).

Render

For the frontend side you can write down a simple loop that will echo all navigation items and all “dynamic sidebars” for those items that have a corresponding widget area.

Keep in mind that you might want to change this code to better fit your own needs but that’s basically it!

You now have a custom WordPress mega menu written with just 25 lines of code and zero plugins installed. Of course, you now need to add widgets to your brand new mega menu. You might want to use stock widgets like “Text” or “Custom Menu” or develop your own for the mega menu purpose. Remember, you can always shake things up and optimize by serializing and storing the information on which menu items should have widgets attached to them. This avoids the wmpp_init function loop from executing for each single request you get and you could even add a custom option to the menu item(s) like a checkbox which defines if there is a widget area for that very menu item.

Job done! Your custom WordPress mega menu is ready to roll

Got any questions or suggestions? We would love to hear your feedback and hear how you’re getting on! If you like this post, why not check out some of our other posts on WordPress tips and trick here.