How to Develop Mega Menu in WordPress « RainaStudio

How to Develop Mega Menu in WordPress

In this post, you are going to learn to develop a mega menu in WordPress. The image above is the example of the mega-menu we are going to build. If you google for mega menu WordPress, you’ll get tons of plugins for this solution. But we tried something custom & different, which results from a summation of choices.

WordPress Mega Menu Developing Plan and Tools

Mega Menu ExampleIf you notice items of the menu, you’ll see three elements for each item. For example, the first item under Resume menu has an icon image, description, and the item name.

We used the following theme and plugins during the development:

  1. Genesis Framework (with child theme)
  2. Menu Item Custom Fields

Step 1

At first download, the Men’s Item Custom Fields plugin from GitHub and extract the file. Now we need to install the plugin on our site. Here is how you can install a WordPress plugin.

Step 2

On this step, copy the menu-item-custom-fields-example.php and rename it to custom-menu-fields.php and open it with your favorite code editor. Scroll down, you’ll see:

As per our needs we just change ‘Custom Field #1’ to ‘Icon URL’ and uncomment ‘Custom Field #2’ and then save the file.

Step 3

Now create a new directory named inc in your theme and upload the file(custom-menu-fields.php) to that directory. Open your theme’s functions.php file and add the following snippet.

Custom Fields for Menu ItemNow, go to Appearance >> Menu >> Screen Options. Tick on Description Icon URL. We got two new custom fields for menu items for two elements.

Step 4

If you test, you’ll see any given value will be saved in those fields. Now time to execute the data on the front. Open functions.php and add the following snippet.

Mega Menu Genesis ThemeIt is how it is showing now after adding a description and icon URL to menu items on the frontend.

Step 5

Add the following CSS to style.css file of your theme to style and fix some alignments of the mega menu.


Looking forward to your comment and let us know how far you have abled to achieve of developing WordPress mega menu.

Anwer Ashif

I like to quote code snippet, fix things like error 503 service unavailable. Cycling, traveling and plantation are my hobbies.