{"id":1957,"date":"2018-03-06T19:26:57","date_gmt":"2018-03-07T03:26:57","guid":{"rendered":"https:\/\/ginastricklind.com\/?p=1957"},"modified":"2021-12-16T06:01:37","modified_gmt":"2021-12-16T14:01:37","slug":"how-to-add-a-fifth-column-to-beaver-builders-footer-widget-area","status":"publish","type":"post","link":"https:\/\/ginastricklind.com\/how-to-add-a-fifth-column-to-beaver-builders-footer-widget-area\/","title":{"rendered":"How To Add A Fifth Column To Beaver Builder&#8217;s Footer Widget Area"},"content":{"rendered":"<p>Since widgets have been native to the Appearance &gt; Widgets area, I wanted to keep that familiar set up instead of using Beaver Builder&#8217;s really cool <a href=\"https:\/\/kb.wpbeaverbuilder.com\/article\/90-save-a-row-or-module-for-reuse\" target=\"_blank\" rel=\"noopener noreferrer\">global rows\/sections<\/a> ability which you could certainly use to achieve the same or similar result.<\/p>\n<p><em>This article assumes you&#8217;re using the Beaver Builder\u00a0Theme\u00a0+ Child Theme setup.\u00a0<\/em><\/p>\n<p>I strive to customize things in a way that makes since, works the way you would expect, and is simply logical.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-1958\" src=\"https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-06-at-7.00.53-PM-1030x461.png\" alt=\"\" width=\"1030\" height=\"461\" srcset=\"https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-06-at-7.00.53-PM-1030x461.png 1030w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-06-at-7.00.53-PM-80x36.png 80w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-06-at-7.00.53-PM-500x224.png 500w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-06-at-7.00.53-PM-705x316.png 705w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-06-at-7.00.53-PM-450x201.png 450w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-06-at-7.00.53-PM.png 1148w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/p>\n<p>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&#8217;s still dynamic.<\/p>\n<p>&nbsp;<\/p>\n<h2>Create The Footer Column 5 Widget<\/h2>\n<div id='avia-messagebox-' class='avia_message_box av_notification av-8y6qd-331c3337711baab6f5b9d428b1b4d300 avia-color-silver avia-size-large avia-icon_select-yes avia-border-  avia-builder-el-0  avia-builder-el-no-sibling ' ><span class='avia_message_box_title' >Updated code for adding the widget area:<\/span><div class=\"avia_message_box_content\"><span class='avia_message_box_icon' aria-hidden='true' data-av_icon='\ue829' data-av_iconfont='entypo-fontello'><\/span><p>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.<\/p>\n<\/div><\/div>\n<p>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.<\/p>\n<pre>add_action( 'widgets_init', 'gs_custom_widgets', 11 );\r\nfunction gs_custom_widgets() {\r\n unregister_sidebar( 'footer-col' );\r\n unregister_sidebar( 'footer-col-2' );\r\n unregister_sidebar( 'footer-col-3' );\r\n unregister_sidebar( 'footer-col-4' );\r\n\r\n if ( 'disabled' != $footer_widgets_display ) {\r\n  register_sidebars( 5, array(\r\n   'name' =&gt; _x( 'Footer Column %d', 'Sidebar title. %d stands for the order number of the auto-created sidebar, 5 in total.', 'fl-automator' ),\r\n   'id' =&gt; 'footer-col',\r\n   'before_widget' =&gt; '&lt;aside id=\"%1$s\" class=\"fl-widget %2$s\"&gt;',\r\n   'after_widget' =&gt; '&lt;\/aside&gt;',\r\n   'before_title' =&gt; '&lt;h4 class=\"fl-widget-title\"&gt;',\r\n   'after_title' =&gt; '&lt;\/h4&gt;',\r\n   ) );\r\n  }\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<h2>Setup 5 Column CSS for Bootstrap<\/h2>\n<p>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&#8217;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.<\/p>\n<pre>.col-xs-5ths,\r\n.col-sm-5ths,\r\n.col-md-5ths,\r\n.col-lg-5ths {\r\n  position: relative;\r\n  min-height: 1px;\r\n  padding-right: 15px;\r\n  padding-left: 15px;\r\n}\r\n\r\n.col-xs-5ths {\r\n  width: 20%;\r\n  float: left;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .col-sm-5ths {\r\n  width: 20%;\r\n  float: left;\r\n }\r\n}\r\n\r\n@media (min-width: 992px) {\r\n .col-md-5ths {\r\n  width: 20%;\r\n  float: left;\r\n }\r\n}\r\n\r\n@media (min-width: 1200px) {\r\n .col-lg-5ths {\r\n  width: 20%;\r\n  float: left;\r\n }\r\n}\r\n\r\n<\/pre>\n<h2>Customize the footer-widgets file to support the 5th column<\/h2>\n<p>Lastly, we&#8217;re adding some conditional code to that footer-widgets.php file.\u00a0Since you should be working with a child theme, within your theme folder you&#8217;ll want to have an includes folder. Within that, you need to copy the parent theme footer-widgets.php.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1961\" src=\"https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-06-at-7.18.48-PM.png\" alt=\"\" width=\"697\" height=\"176\" srcset=\"https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-06-at-7.18.48-PM.png 697w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-06-at-7.18.48-PM-80x20.png 80w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-06-at-7.18.48-PM-500x126.png 500w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-06-at-7.18.48-PM-450x114.png 450w\" sizes=\"(max-width: 697px) 100vw, 697px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>The code below checks if the Footer Column 5 is in use, if so we use the new 5ths classes above. If it&#8217;s not in use, then it essentially defaults back to using the\u00a0display_footer_widgets() function.<\/p>\n<pre>&lt;div class=\"fl-page-footer-widgets\"&gt;\r\n  &lt;div class=\"fl-page-footer-widgets-container container\"&gt;\r\n  &lt;div class=\"fl-page-footer-widgets-row row\"&gt;\r\n    &lt;?php \/\/FLTheme::display_footer_widgets(); ?&gt;\r\n\r\n    &lt;?php if ( is_active_sidebar( 'footer-col-5' ) ) { ?&gt;\r\n      &lt;div class=\"col-sm-5ths col-md-5ths\"&gt;\r\n        &lt;?php dynamic_sidebar( 'footer-col' ); ?&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col-sm-5ths col-md-5ths\"&gt;\r\n        &lt;?php dynamic_sidebar( 'footer-col-2' ); ?&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col-sm-5ths col-md-5ths\"&gt;\r\n        &lt;?php dynamic_sidebar( 'footer-col-3' ); ?&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col-sm-5ths col-md-5ths\"&gt;\r\n        &lt;?php dynamic_sidebar( 'footer-col-4' ); ?&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col-sm-5ths col-md-5ths\"&gt;\r\n        &lt;?php dynamic_sidebar( 'footer-col-5' ); ?&gt;\r\n      &lt;\/div&gt;\r\n    &lt;?php } else {?&gt;\r\n      &lt;?php FLTheme::display_footer_widgets(); ?&gt;\r\n    &lt;?php } ?&gt;\r\n\r\n   &lt;\/div&gt;\r\n &lt;\/div&gt;\r\n&lt;\/div&gt;&lt;!-- .fl-page-footer-widgets --&gt;<\/pre>\n<p>You&#8217;re welcome \ud83d\ude09 Now you have a nice footer sitemap with 5 columns.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-1975\" src=\"https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-07-at-11.29.33-AM-1030x425.png\" alt=\"\" width=\"1030\" height=\"425\" srcset=\"https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-07-at-11.29.33-AM-1030x425.png 1030w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-07-at-11.29.33-AM-80x33.png 80w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-07-at-11.29.33-AM-500x207.png 500w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-07-at-11.29.33-AM-705x291.png 705w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-07-at-11.29.33-AM-450x186.png 450w, https:\/\/ginastricklind.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-07-at-11.29.33-AM.png 1334w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/p>\n<p><strong>Did you achieve this differently? I&#8217;d love to hear about it in the comments below!<\/strong><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since widgets have been native to the Appearance &gt; Widgets area, I wanted to keep that familiar set up instead of using Beaver Builder&#8217;s really cool global rows\/sections ability which you could certainly use to achieve the same or similar result. This article assumes you&#8217;re using the Beaver Builder\u00a0Theme\u00a0+ Child Theme setup.\u00a0 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 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,55,16],"tags":[],"_links":{"self":[{"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/posts\/1957"}],"collection":[{"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/comments?post=1957"}],"version-history":[{"count":18,"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/posts\/1957\/revisions"}],"predecessor-version":[{"id":2148,"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/posts\/1957\/revisions\/2148"}],"wp:attachment":[{"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/media?parent=1957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/categories?post=1957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ginastricklind.com\/wp-json\/wp\/v2\/tags?post=1957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}