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.
- Login to Dashboard
- Navigate to Appearance -> Customize
- Click on Footer panel
- Click on Footer Widgets Layout section
- Select “All Pages” or “Homepage Only” option
- 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.
|
1 2 3 4 5 6 7 8 9 10 11 |
add_action( 'widgets_init', 'wpd_widgets_init', 20 ); function wpd_widgets_init() { register_sidebar( array( 'name' => _x( 'Footer Column 5', 'Sidebar title. 5 stands for the order number of the auto-created sidebar, 5 in total.', 'fl-automator' ), 'id' => 'footer-col-5', 'before_widget' => '<aside id="%1$s" class="fl-widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h4 class="fl-widget-title">', 'after_title' => '</h4>', ) ); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function wpd_display_footer_widgets() { $active = array(); $num_active = 0; for ( $i = 1; $i <= 5; $i++ ) { $id = 1 == $i ? 'footer-col' : 'footer-col-' . $i; if ( is_active_sidebar( $id ) ) { $active[] = $id; $num_active++; } } if ( $num_active > 0 ) { for ( $i = 0; $i < $num_active; $i++ ) { echo '<div class="col-auto">'; dynamic_sidebar( $active[ $i ] ); echo '</div>'; } } } |
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.
|
1 2 3 4 5 6 7 |
<div class="fl-page-footer-widgets"> <div class="fl-page-footer-widgets-container container"> <div class="fl-page-footer-widgets-row row"> <?php wpd_display_footer_widgets(); ?> </div> </div> </div><!-- .fl-page-footer-widgets --> |
CSS
Open the style.css file of Beaver Builder child theme or go to Appearance -> Customize -> Additional CSS section and add this CSS code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.fl-page-footer-widgets-row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col-auto { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; position: relative; padding-right: 15px; padding-left: 15px; } @media only screen and (max-width: 992px) { .col-auto { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } } @media only screen and (max-width: 768px) { .col-auto { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media only screen and (max-width: 576px) { .col-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; max-width: 100%; } } |
Leave a Reply