Genesis Tutorials, WP Tutorials
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%;
}
}
