Controlling Footer Widget Columns from Theme Settings Page in Genesis

Previously I wrote a tutorial “How to change the footer copyright text from Genesis Theme Settings Page“. Today I am writing this article and showing you how to change the footer widget area from Genesis Theme Settings page.

creating-flexible-footer-widget-area

I added following PHP code in functions.php file:

Creating Theme Settings for Footer Widget

function gd_defaults_settings_fields( $default_settings ) { 
    $default_settings['footer_widgets'] = 3; // default is 3
     
    return $default_settings;
}
add_filter( 'genesis_theme_settings_defaults', 'gd_defaults_settings_fields' );

function gd_genesis_settings_sanitization_filters() {
    genesis_add_option_filter( 
                                'no_html', 
                                GENESIS_SETTINGS_FIELD,
                                array(
                                'footer_widgets'
                                ) );
}
add_action( 'genesis_settings_sanitizer_init', 'gd_genesis_settings_sanitization_filters' );

add_action('genesis_theme_settings_metaboxes', 'gd_add_metaboxes', 99, 1);
function gd_add_metaboxes( $pagehook ){
  if( is_admin() ):
    add_meta_box( 'genesis-theme-settings-footer-widgets', __( 'Footer Widget Settings', 'genesis_developer' ), 'gd_footer_widgets_box', $pagehook, 'main', 'high' );    
  endif;
}

// Footer Widgets UI
function gd_footer_widgets_box(){
?>
  <p>
    <label for="<?php echo GENESIS_SETTINGS_FIELD;?>[footer_widgets]"><?php _e( 'Footer Widgets:', 'genesis' ); ?></label>
		<select name="<?php echo GENESIS_SETTINGS_FIELD;?>[footer_widgets]" id="<?php echo GENESIS_SETTINGS_FIELD;?>[footer_widgets]">
    <?php for($i=0; $i <= 6; $i++){ ?>
			<option value="<?php echo $i; ?>"<?php selected( $i, genesis_get_option( 'footer_widgets' ) ); ?>><?php echo $i; ?></option>
    <?php } ?>
		</select>		
	</p>
<?php
}

Adding Footer Widgets Support

//* Add support for flexible footer widgets   
$footer_widgets = ( intval( genesis_get_option('footer_widgets') ) > -1 ) ? genesis_get_option('footer_widgets') : 3 ;
add_theme_support( 'genesis-footer-widgets', intval($footer_widgets) );
if( intval($footer_widgets) > 0 ){
  add_filter( 'genesis_attr_footer-widgets', 'gd_genesis_attributes_footer_widgets' );
  function gd_genesis_attributes_footer_widgets($attributes){

     $attributes['class'] .= ' gd-footer-widgets-' . genesis_get_option('footer_widgets');
     
     return $attributes;
  }
}

Styling for Responsive Effect

I added following CSS in style.css file

/* 
 1 Column Footer Widget 
---------------------------------------------------------------------------*/
.gd-footer-widgets-1 .footer-widgets-1{
  clear: both;
  display: table;
  float: none;
  width: 100%;
}

/* 
 2 Columns Footer Widget 
---------------------------------------------------------------------------*/
.gd-footer-widgets-2 .footer-widgets-1,
.gd-footer-widgets-2 .footer-widgets-2{
  width: 48.717948717948715%;
}

/* 
 3 Columns Footer Widget 
---------------------------------------------------------------------------*/
.gd-footer-widgets-3 .footer-widgets-1,
.gd-footer-widgets-3 .footer-widgets-2,
.gd-footer-widgets-3 .footer-widgets-3{
  width: 31.623931623931625%;
}

/* 
 4 Columns Footer Widget 
---------------------------------------------------------------------------*/
.gd-footer-widgets-4 .footer-widgets-1,
.gd-footer-widgets-4 .footer-widgets-2,
.gd-footer-widgets-4 .footer-widgets-3,
.gd-footer-widgets-4 .footer-widgets-4{
  width: 23.076923076923077%;
}

/* 
 5 Columns Footer Widget 
---------------------------------------------------------------------------*/
.gd-footer-widgets-5 .footer-widgets-1,
.gd-footer-widgets-5 .footer-widgets-2,
.gd-footer-widgets-5 .footer-widgets-3,
.gd-footer-widgets-5 .footer-widgets-4,
.gd-footer-widgets-5 .footer-widgets-5{
  width: 18%;
}

/* 
 6 Columns Footer Widget 
---------------------------------------------------------------------------*/
.gd-footer-widgets-6 .footer-widgets-1,
.gd-footer-widgets-6 .footer-widgets-2,
.gd-footer-widgets-6 .footer-widgets-3,
.gd-footer-widgets-6 .footer-widgets-4,
.gd-footer-widgets-6 .footer-widgets-5,
.gd-footer-widgets-6 .footer-widgets-6{
  width: 14.52991452991453%;
}

.gd-footer-widgets-2 .footer-widgets-1,
.gd-footer-widgets-3 .footer-widgets-1,
.gd-footer-widgets-3 .footer-widgets-2,
.gd-footer-widgets-4 .footer-widgets-1,
.gd-footer-widgets-4 .footer-widgets-2,
.gd-footer-widgets-4 .footer-widgets-3,
.gd-footer-widgets-5 .footer-widgets-1,
.gd-footer-widgets-5 .footer-widgets-2,
.gd-footer-widgets-5 .footer-widgets-3,
.gd-footer-widgets-5 .footer-widgets-4,
.gd-footer-widgets-6 .footer-widgets-1,
.gd-footer-widgets-6 .footer-widgets-2,
.gd-footer-widgets-6 .footer-widgets-3,
.gd-footer-widgets-6 .footer-widgets-4,
.gd-footer-widgets-6 .footer-widgets-5{
  float: left;
  margin-right: 2.5%;
}

.gd-footer-widgets-2 .footer-widgets-2,
.gd-footer-widgets-3 .footer-widgets-3,
.gd-footer-widgets-4 .footer-widgets-4,
.gd-footer-widgets-5 .footer-widgets-5,
.gd-footer-widgets-6 .footer-widgets-6{
  float: right;
}

@media only screen and (max-width: 1023px) {
  
  .gd-footer-widgets-4 .footer-widgets-1,
  .gd-footer-widgets-4 .footer-widgets-2,
  .gd-footer-widgets-4 .footer-widgets-3,
  .gd-footer-widgets-4 .footer-widgets-4{
    float: left;
    margin-right: 2.5%;
    width: 48.717948717948715%;
  }
  .gd-footer-widgets-4 .footer-widgets-2,
  .gd-footer-widgets-4 .footer-widgets-4{
    float: right;
    margin-right: 0;
  }
  
  .gd-footer-widgets-6 .footer-widgets-1,
  .gd-footer-widgets-6 .footer-widgets-2,
  .gd-footer-widgets-6 .footer-widgets-3,
  .gd-footer-widgets-6 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-5,
  .gd-footer-widgets-6 .footer-widgets-6{
    float: left;
    margin-right: 2.5%;
    width: 31.623931623931625%;
  }
  .gd-footer-widgets-6 .footer-widgets-3,
  .gd-footer-widgets-6 .footer-widgets-6{
    float: right;
    margin-right: 0;
  }
  
}

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

  .gd-footer-widgets-4 .footer-widgets-1,
  .gd-footer-widgets-4 .footer-widgets-2,
  .gd-footer-widgets-4 .footer-widgets-3,
  .gd-footer-widgets-4 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-1,
  .gd-footer-widgets-6 .footer-widgets-2,
  .gd-footer-widgets-6 .footer-widgets-3,
  .gd-footer-widgets-6 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-5,
  .gd-footer-widgets-6 .footer-widgets-6{
    float: left;
    margin-right: 2.5%;
    width: 48.717948717948715%;
  }
  .gd-footer-widgets-4 .footer-widgets-2,
  .gd-footer-widgets-4 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-2,
  .gd-footer-widgets-6 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-6{
    float: right;
    margin-right: 0;
  }
  
  .gd-footer-widgets-3 .footer-widgets-1,
  .gd-footer-widgets-3 .footer-widgets-2,
  .gd-footer-widgets-3 .footer-widgets-3,
  .gd-footer-widgets-5 .footer-widgets-1,
  .gd-footer-widgets-5 .footer-widgets-2,
  .gd-footer-widgets-5 .footer-widgets-3,
  .gd-footer-widgets-5 .footer-widgets-4,
  .gd-footer-widgets-5 .footer-widgets-5{
    float: none;
    margin-right: 0;
    width: 100%;
  }
  
}

@media only screen and (max-width: 767px) {
  
  .gd-footer-widgets-2 .footer-widgets-1,
  .gd-footer-widgets-2 .footer-widgets-2,
  .gd-footer-widgets-4 .footer-widgets-1,
  .gd-footer-widgets-4 .footer-widgets-2,
  .gd-footer-widgets-4 .footer-widgets-3,
  .gd-footer-widgets-4 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-1,
  .gd-footer-widgets-6 .footer-widgets-2,
  .gd-footer-widgets-6 .footer-widgets-3,
  .gd-footer-widgets-6 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-5,
  .gd-footer-widgets-6 .footer-widgets-6{
    float: none;
    margin-right: 0;
    width: 100%;
  }
}

See the various Footer Widgets on your site

footer-widgets-3

footer-widgets-4

footer-widgets-6

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

4 Discussion to This Post

  1. Thank You for this post Sir. I will be using this for all of my projects. GodBless

  2. Excellent tutorial, I will implement on my sites. You are an excellent teacher and I wish you much success.

Leave A Reply

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