How To Add A Fifth Column To Beaver Builder’s Footer Widget Area

Since widgets have been native to the Appearance > Widgets area, I wanted to keep that familiar set up instead of using Beaver Builder’s really cool global rows/sections ability which you could certainly use to achieve the same or similar result.

This article assumes you’re using the Beaver Builder Theme + Child Theme setup. 

I strive to customize things in a way that makes since, works the way you would expect, and is simply logical.

The code below will work in such a way that if Footer Column 5 does not actually contain any widgets, the footer area will be built just as before whether or not you use 1 or 4 columns, it’s still dynamic.

 

Create The Footer Column 5 Widget

Updated code for adding the widget area:

CARLOS AT BB HELPED ME SORT THE FOOTER COLUMNS TOGETHER INSTEAD OF COLUMN 5 BEING BY ITSELF (as shown in the image above). BELOW IS THE UPDATED CODE FOR ADDING THE WIDGET AREA.

Add this code to your functions.php file. This removes the footer widget areas, so we can add the 5th grouped together with the other 4.

add_action( 'widgets_init', 'gs_custom_widgets', 11 );
function gs_custom_widgets() {
 unregister_sidebar( 'footer-col' );
 unregister_sidebar( 'footer-col-2' );
 unregister_sidebar( 'footer-col-3' );
 unregister_sidebar( 'footer-col-4' );

 if ( 'disabled' != $footer_widgets_display ) {
  register_sidebars( 5, array(
   'name' => _x( 'Footer Column %d', 'Sidebar title. %d stands for the order number of the auto-created sidebar, 5 in total.', 'fl-automator' ),
   'id' => 'footer-col',
   'before_widget' => '<aside id="%1$s" class="fl-widget %2$s">',
   'after_widget' => '</aside>',
   'before_title' => '<h4 class="fl-widget-title">',
   'after_title' => '</h4>',
   ) );
  }
}

 

Setup 5 Column CSS for Bootstrap

Beaver Builder is built with the most famous Bootstrap which is fantastic. Its only drawback that I seem to always need to compensate for is it’s lack of 5 equal columns in a row that stretch all the way across without have to use push/pull classes. You can add this to your style.css file.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-5ths {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
 .col-sm-5ths {
  width: 20%;
  float: left;
 }
}

@media (min-width: 992px) {
 .col-md-5ths {
  width: 20%;
  float: left;
 }
}

@media (min-width: 1200px) {
 .col-lg-5ths {
  width: 20%;
  float: left;
 }
}

Customize the footer-widgets file to support the 5th column

Lastly, we’re adding some conditional code to that footer-widgets.php file. Since you should be working with a child theme, within your theme folder you’ll want to have an includes folder. Within that, you need to copy the parent theme footer-widgets.php.

 

The code below checks if the Footer Column 5 is in use, if so we use the new 5ths classes above. If it’s not in use, then it essentially defaults back to using the display_footer_widgets() function.

<div class="fl-page-footer-widgets">
  <div class="fl-page-footer-widgets-container container">
  <div class="fl-page-footer-widgets-row row">
    <?php //FLTheme::display_footer_widgets(); ?>

    <?php if ( is_active_sidebar( 'footer-col-5' ) ) { ?>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col' ); ?>
      </div>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col-2' ); ?>
      </div>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col-3' ); ?>
      </div>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col-4' ); ?>
      </div>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col-5' ); ?>
      </div>
    <?php } else {?>
      <?php FLTheme::display_footer_widgets(); ?>
    <?php } ?>

   </div>
 </div>
</div><!-- .fl-page-footer-widgets -->

You’re welcome 😉 Now you have a nice footer sitemap with 5 columns.

Did you achieve this differently? I’d love to hear about it in the comments below!

 

How to Change Beaver Builder Social Icon Style

Beaver Builder has been a great tool that most of my clients are really enjoying using. It makes their experience with their website much less dreadful. There’s so much flexibility for the developer and also for the designer.

 

I wrote only a couple lines because I didn’t want my social icons to have a background, I felt like the weight of the icons were too heavy and distracting for the area.

The result is the icons inherit the color set for the footer text, and we remove the circle backgrounds.

 

In addition, if you want to change the size of those icons, just add: font-size: 1.5em; to the i:nth-child(2).

How To Do Modular Custom Page Titles In Beaver Builder

I’m an advocate of modular code and not having to do things twice (or a dozen times). I also actively think about future general changes to a site and a way to do those in as few steps as possible.

Beaver Builder is fantastic for speeding up the productivity of site builds and it’s incredibly user friendly compared to other page builders. It’s also developer friendly too! Meaning you can easily create custom modules of your own.

You could of course use the builder to do custom page titles similarly, which is why by default the settings are to not show the page title. But in my case, I add a background image with an overlay color to the page title using the featured image (code not included on this post), while having a default background if a featured image is not set. Because this is a header with a style that should be uniform across the entire site, there will not be a need to have access to different styles for these. And, for example, if I wanted to change the overlay color of that background image across the site of maybe 50 pages, you can see how mind numbingly tedious that can be, changing a color 50 times. When instead, I could set it with css and change it just once instead. Setting a global style like this also minimizes client error and helps enforce branding guidelines. 

For this particular tutorial, we’ll be using the Beaver Builder Theme with the page builder plugin. You’ll need a basic concept of how child themes work and the theme template structure.

Be sure that your Beaver Builder site has page titles enabled:

  1. In the upper right corner of a Page Builder page, click Tools > Global Settings.
  2. On the General tab, navigate to the Default Page Heading section.
  3. To display the default page heading, set Show to Yes. To hide the default page title, set Show to No.

Create the Meta Box text field

A meta box for inputing a custom page title that would differ from the original. This is useful if you have something like “FAQs” and would like to keep that displays in the browser tab, but would like the abbreviation written out on the page for SEO purposes or display.

Meta boxes are a bit complex, luckily there are a couple good generators for this purpose. I recommend and often use the meta box generator by jeremy hixon.

Add this code to your theme functions.php

function custom_page_heading_get_meta( $value ) {
 global $post;

$field = get_post_meta( $post->ID, $value, true );
 if ( ! empty( $field ) ) {
 return is_array( $field ) ? stripslashes_deep( $field ) : stripslashes( wp_kses_decode_entities( $field ) );
 } else {
 return false;
 }
}

function custom_page_heading_add_meta_box() {
 add_meta_box(
 'custom_page_heading-custom-page-heading',
 __( 'Custom Page Title', 'custom_page_heading' ),
 'custom_page_heading_html',
 'page',
 'normal',
 'high'
 );
}
add_action( 'add_meta_boxes', 'custom_page_heading_add_meta_box' );

function custom_page_heading_html( $post) {
 wp_nonce_field( '_custom_page_heading_nonce', 'custom_page_heading_nonce' ); ?>

<p>
 <label for="custom_page_heading_custom_page_title"><?php _e( 'Custom Page Title', 'custom_page_heading' ); ?></label><br>
 <input type="text" style="width:100%;" name="custom_page_heading_custom_page_title" id="custom_page_heading_custom_page_title" value="<?php echo custom_page_heading_get_meta( 'custom_page_heading_custom_page_title' ); ?>">
 </p><?php
}

function custom_page_heading_save( $post_id ) {
 if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
 if ( ! isset( $_POST['custom_page_heading_nonce'] ) || ! wp_verify_nonce( $_POST['custom_page_heading_nonce'], '_custom_page_heading_nonce' ) ) return;
 if ( ! current_user_can( 'edit_post', $post_id ) ) return;

if ( isset( $_POST['custom_page_heading_custom_page_title'] ) )
 update_post_meta( $post_id, 'custom_page_heading_custom_page_title', esc_attr( $_POST['custom_page_heading_custom_page_title'] ) );
}
add_action( 'save_post', 'custom_page_heading_save' );

You’ll now have a nice text box when you edit your page.

Customize the content-page.php

Next, we’ll be editing the content-page.php. Copy this file from the parent theme and into your child theme.

By default, the page title is contained in a header block:

 <?php if ( FLTheme::show_post_header() ) : ?>
 <header class="fl-post-header">
 <h1 class="fl-post-title" itemprop="headline"><?php the_title(); ?></h1>
 <?php edit_post_link( _x( 'Edit', 'Edit page link text.', 'fl-automator' ) ); ?>
 </header><!-- .fl-post-header -->
 <?php endif; ?>

We can now use the custom_page_heading_get_meta function we added earlier to set up the meta box to grab the custom title and store it in a variable:

$custom_page_title = custom_page_heading_get_meta( 'custom_page_heading_custom_page_title' );

Now it’s just a matter of creating addition conditional statements to show the custom title if the value is not empty, otherwise show the default page title.

I never use the page title like this on the homepage, so I also created an addition statement that does not allow this entire block to show if this is shown for the homepage:

if ( !is_front_page() ) :

Our end result looks like this:

 <header class="fl-post-header">
 <?php
 if ( !is_front_page() ) :
 $custom_page_title = custom_page_heading_get_meta( 'custom_page_heading_custom_page_title' );
 ?>

 <h1 class="fl-post-title" itemprop="headline">
 <?php
 if (!empty ($custom_page_title)) :
 echo $custom_page_title;
 else :
 echo $the_title();
 endif;
 ?>

 </h1>
 <?php
 endif;
 ?>
 <?php edit_post_link( _x( 'Edit', 'Edit page link text.', 'fl-automator' ) ); ?>
 </header><!-- .fl-post-header -->