Add 5th widget area in footer widgets of Beaver Builder Theme

By default, a maximum of four widget areas are available in the footer widgets section of Beaver Builder Theme. Do you want to add an additional 5th widget area to footer widgets part of Beaver Builder Theme? This is possible by registering a new widget area at a specific location in Beaver Builder Theme.

Enable Footer Widgets Layout

First, we need to enable the Footer Widgets Layout from the theme customizer.

  1. Login to Dashboard
  2. Navigate to Appearance -> Customize
  3. Click on Footer panel
  4. Click on Footer Widgets Layout section
  5. Select “All Pages” or “Homepage Only” option
  6. Click on Publish button

This will enable the 4 footer widget areas, which can be seen by going to Appearance -> Widgets page. Now, we shall add the 5th footer widget areas to this section in the Beaver Builder Theme.

Register a new Widget Area

Now we would register a new widget area for 5th column in the footer widgets section. In the WordPress Dashboard, go to Appearance > Theme Editor and open the functions.php file of your Beaver Builder child theme. Then add the following code at the end. Alternatively, you can use code snippets plugin for adding custom code.

Register Footer Column 5

Now, you should see the new footer widget area on the “widgets” page. You can drag and drop to add content as per requirement.

Display new widget area in the front-end

To display contents of this new widget area in the front-end, we need to add the following code. In the WordPress Dashboard, go to Appearance > Theme Editor and open the functions.php file of your Beaver Builder child theme. Then add the following code at the end. Alternatively, you can use code snippets plugin for adding custom code.

Create a new folder “includes” (case-sensitive) inside the bb-child-theme folder. Create new PHP file footer-widgets.php inside the includes folder. Open this footer-widgets.php file on theme editor and paste this PHP code.

CSS

Open the style.css file of Beaver Builder child theme or go to Appearance -> Customize -> Additional CSS section and add this CSS code.

Share this Tutorial

Leave a Comment