Dividing the site footer into 2 widget areas

One of my Facebook group’s member is requested it. In this article I am dividing the “site-footer” inner markup in two widget areas. If user is not activating the any widget area then default copyright text will show there. Checkout the steps at below:

Step 1

Registering the two widget areas: Footer Left and Footer Right. Open your functions.php file and enter this code.

/**
* Dividing the site footer in 2 parts
*
* @author Chinmoy Paul
* @link https://www.paulchinmoy.com
* @copyright Copyright (c) 2015 - 2016 Genesis Developer
* @license GPL - 2.0+
*/

//* Register two new widget areas: Footer Left and Footer Right
genesis_register_sidebar( array(
'id' => 'footer-left',
'name' => __( 'Footer Left', 'themeprefix' ),
'description' => __( 'This widget area will show at left side.', 'themeprefix' ),
) );

genesis_register_sidebar( array(
'id' => 'footer-right',
'name' => __( 'Footer Right', 'themeprefix' ),
'description' => __( 'This widget area will show at right side.', 'themeprefix' ),
) );

Step 2

Adding this two widget areas inside site footer markup. Again add this code in your functions.php file:

//* Add this two widget areas at site footer area
add_action( 'genesis_footer', 'themeprefix_do_footer', 9 );
function themeprefix_do_footer() {
if( ! is_active_sidebar( 'footer-left' ) && ! is_active_sidebar( 'footer-right' ) )
return;

//* Remove default copyright text area
remove_action( 'genesis_footer', 'genesis_do_footer' );

//* Add a filter in Text widget. So shortcode will work in Text widget
add_filter( 'widget_text', 'do_shortcode' );

if( is_active_sidebar( 'footer-left' ) ) {
genesis_widget_area( 'footer-left', array(
'before' => '<div class="footer-widget-area footer-left" id="footer-left">',
'after' => '</div>',
) );
}

if( is_active_sidebar( 'footer-right' ) ) {
genesis_widget_area( 'footer-right', array(
'before' => '<div class="footer-widget-area footer-right" id="footer-right">',
'after' => '</div>',
) );
}
}

02: Select the “genesis_footer” hook and set the priority 9.

04-05: Returning early if widget areas are not activate. is_active_sidebar() conditional tag checks if a given sidebar is active (in use). it is a boolean function, meaning it returns either TRUE or FALSE.

08: Unhook the default site footer area. Site copyright text is displaying by “genesis_do_footer” callback function. So I am removing this callback function by remove_action hook.

11: Enabling the shortcode in Text Widget.

13-25: Echoing the footer left and/or footer right widget area if anyone is activated.

Step 3

Add the following CSS in your style.css file. I used flexbox method here.

.site-footer,
.site-footer .wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
vertical-align: top;
width: 100%
}

.footer-widget-area {
-webkit-flex: 1;
flex: 1;
line-height: 1.4;
}

.footer-left {
text-align: left;
}

.footer-right {
text-align: right;
}

.footer-widget-area .widget {
display: inline-block;
margin-bottom: 0;
margin-left: 10px;
vertical-align: middle;
}

.footer-widget-area .widget_nav_menu li {
display: inline-block;
margin: 0 0 0 10px;
padding-bottom: 0;
}

.footer-widget-area .widget:first-child,
.footer-widget-area .widget_nav_menu li:first-child {
margin-left: 0;
}

.footer-widget-area .simple-social-icons ul li {
margin-bottom: 0!important;
}

@media only screen and (max-width: 800px) {

.footer-right {
-webkit-order: -1;
order: -1;
margin-bottom: 10px;
}

.footer-left,
.footer-right {
flex: 0 0 100%;
text-align: center;
}
}