Dividing the site footer into 2 widget areas

Dividing the footer in 2 parts
Dividing the footer in 2 parts

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        http://genesisdeveloper.me
 * @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;
  }
}

Step 4

Login to dashboard and navigate to Appearance -> Widgets. You will get two new sidebar “Footer Left” and “Footer Right”. Setup the widgets as per your requirement. Now refresh your site.

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

Leave A Reply

Your email address will not be published. Required fields are marked *