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%; } }