Add content before and after the Vertical Menu in the Beaver Builder Theme

The vertical menu in the Beaver Builder Theme can be placed on the left or right of the page and is an easy way to make your website unique.

When you build a website with the Beaver Builder Theme’s vertical menu feature, though, you’ll often find that there’s some incredibly valuable real estate underneath the menu that goes unused.

This tutorial will show you how to fill this useful space with a Beaver Builder Template so you can design content using Beaver Builder modules and have the content appear under the menu automatically.

Below is what we’re going to recreate.

In our example we’re going to add a newsletter subscribe form module and under that add some social media icons that are available with the UABB third-party addon for Beaver Builder.

You can add any Beaver Builder module you’d like, though.

vertical menu in the Beaver Builder Theme final outcome

And it’ll work on both the left and right side on the page, just like below.

An example of a right vertical menu in the Beaver Builder Theme

Here’s how it’ll function responsively. Perfect, eh?

How adding content to the vertical menu in the Beaver Builder Theme works responsively

Step 1: Activate the Beaver Builder Templates menu item in your WordPress Dashboard

To go your WordPress Dashboard > Settings > Page Builder > Templates and CHECK the checkbox to Enable Admin Templates.

Beaver Builder plugin settings where you can Enable Admin Templates
Check the box Enable Templates Admin so that you can access your Beaver Builder Templates from your WordPress Dashboard.

Then, click the blue button Save Template Settings and you’re done.

Now, you should see a new menu item on the left that is titled Templates, as per below.


Step 2: Create a new Beaver Builder Template and design the content you wish to add underneath the menu

In the WordPress Dashboard > Templates section, click Add New and give your Template a name.

Here’s what we’re going to use for our example.


IMPORTANT: Make note of the slug of your new template as we will need this later. The slug of your new Template is in the Permalink below and is everything AFTER fl-builder-template/

So, in our example above, our slug is vertical-menu-content-bottom

Now, design the Template using Beaver Builder just like you would when you create a standard Page in your website.

Once done, click the blue Done button in the top left to save the Template, as per the below animation.


Step 3: Add the new Beaver Builder Template to the bottom of the Vertical Menu in the Beaver Builder Theme

Now that we’ve created the content we wish to add to the bottom of the vertical menu in the Beaver Builder Theme, all we have to do now is output it where we want.

To do this, use your FTP client or cPanel to navigate to your theme’s functions.php file and add the below PHP code into your theme’s functions.php file.


  1. In the above code we have added comments to help you follow the code so we suggest going through the code line by line. In summary, the above PHP code gets the content of our header menu and adds our Beaver Builder Template to the end.
  2. wp_nav_menu_items is a standard filter in WordPress that you can read more about here. It basically allows us to get the content of the menu we are wanting to add our template to.
  3. Make sure you update slug=”” to match the slug of your template (the slug you noted down in Step 2 of this tutorial).

Once complete, you should now see your new content at the bottom of your vertical menu in the Beaver Builder Theme, just like below.


EXTRA! How to add content BEFORE the vertical menu in the Beaver Builder Theme

If you wanted to, you could also update the above PHP code in your functions.php file (that you added in Step 3) and output your Beaver Builder Template BEFORE the menu (i.e. above the menu) like the below screenshot.


Complete the form below to instantly get the code you need to add a Beaver Builder Template ABOVE the Vertical Menu in the Beaver Builder Theme

[thrive_lead_lock id=’2858′]

To do this, you just need to change $items .= $bb_content; to $items = $bb_content . $items; on line 9.

Here’s the final code below to output the Beaver Builder Template BEFORE the vertical menu (i.e. above).


Wrapping it up

In three easy steps you can now add content to the vertical menu in the Beaver Builder Theme.

As a recommendation, don’t put too much content above or below your menu, because if you have a longer menu, people on laptops and smaller PC screens may not be able to see all your menu items. That’s always a risk when using Vertical Menus.

When using this method, try and and limit the number of menu items in your menu and use the space as an opportunity to increase lead conversions. Maybe have a call to action button to Get A Quote on your service, or have a Subscribe form to get more people on your newsletter.

Comment below

Don’t forget to comment below if you have any questions.

Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

Leave a Comment

Your email address will not be published. Required fields are marked *

Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top