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

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%;
  }
}
This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.