I was following a post in FB today. A fellow FB group member wants to add some widgets to a Divi site with a Vertical Menu. One of my friends also pointed me to that thread and asked if this could be possible. With his guidance and direction, I think we can achieve this and that too without much fuss.

Let’s see once again. what the scenario is –

  • WP site with Divi Theme
  • Vertical Navigation Menu
  • Custom Widgets in that Menu

Pretty straight forward, isn’t it? Now we’ll attempt to achieve this. We’d need some PHP to help us. Please Read on. (Code explanation has been given below)

STEP #1

Create a navigation menu in (Dashboard> Appearance> Menus) your site. Add your pages or links to that menu and assign this to the Primary Menu Location.

STEP #2

Copy the following set of functions and paste them in your theme functions.php file. Please maintain the exact syntax.

Widgets in the vertical Navigation – Below Menu Items

CODE EXPLANATION

In the STEP #1, we’ve chosen Vertical Navigation for the site. Then we’ve created a menu and have assigned that to the Primary Menu Location. Please refer to the image.

In the STEP #2, we’ve added a couple of PHP functions to achieve what we have been looking for. Since we want to have an option to add widgets to the Nav Menu, we’ve created a new Widget Area named Vertical Nav Widgets. Now, what is the need for this? As the widgets to be added to the Menu location are only meant for the Vertical Menu area, we need to have a specific widget area. We could easily use any of the existing ones but you may use those widgets for other locations as well. So, a good approach would be to have a particular widget area for our purpose. Hence the Vertical Nav Widgets. The function divi_vertical_widgets() does this job. Once created, visit Widgets Page (Dashboard>Appearance>Widgets) and at the top, you will see a new widget area. Now go ahead and add some widgets to this. In this example, I’ve added Meta and Category Widgets.

The second function call_widgets_ver_menu() checks if the site is using a Vertical Navigation and it is indeed using this navigation type, it calls our newly added widgets added in the Vertical Nav Widgets area. As you can see, the function is being hooked to a Divi built-in action et_header_top(). It implies that the widgets will lie below the Primary Menu items as shown in the demo image.

Note: You may (or will) need some CSS to make the widgets look good and according to the Vertical Navigation styling.

What if I want to have the widgets sit above the menu items?

With the two functions above, the widgets will reside below the menu items. But if you want them above them, you will need to do some additional functions. Please read on.

PROCESS #1

Remove the second function (as well as its action hook) as given in STEP #2. Now open your header.php file and locate the following div (use Cntl + F)

PROCESS #2

Just below that paste the this PHP tag <?php dynamic_sidebar('ver-nav');?>

Save the header.php file and you will see the widgets are showing above the menu items now. Of course, you will need some CSS to adjust its positioning perfectly.

Widgets in the vertical Navigation – Above Menu Items

Hope it helps and works for you. Let me know for any issues or questions if you have. Do share your feedback in the comments.

Thanks

Share This