Add a Full Width Row Above Footer Widgets in Genesis Child Theme
How to add a full width content row in the area directly above the footer widgets in a Genesis Child theme.
In the layout above, the three footer widgets are used for 3 products, but a headline needs to straddle across all 3 widgets and needs to be easily changed. To achieve this a new widget area has to be created and positioned above the footer widget area using the hook genesis_before_footer .
Create the New Widget
The code below needs to be added to your functions.php file in your theme folder.
//Extra Widget Area function genesischild_footerwidgetheader() { genesis_register_sidebar( array( 'id' => 'footerwidgetheader', 'name' => __( 'Footer Widget Header', 'genesis' ), 'description' => __( 'This is for the Footer Widget Headline', 'genesis' ), ) ); } add_action ('widgets_init','genesischild_footerwidgetheader');
This will add the widget in the backend
Hook in the Widget
//Position Widget Header function genesischild_footerwidgetheader_position () { echo '<div class="footerwidgetheader-container"><div class="wrap">'; genesis_widget_area ('footerwidgetheader'); echo '</div></div>'; } add_action ('genesis_before_footer','genesischild_footerwidgetheader_position');
This will hook the new widget in before the footer widgets.
If the header appears below the widgets, adjust the add_action with a higher priority.
add_action ('genesis_before_footer','genesischild_footerwidgetheader_position', 5 );
CSS Styling
Use the .footerwidgetheader-container class to style the full row and you can target the inner wrap with .footerwidgetheader-container .wrap
Site in progress here.
HI! I assume everyone has figured this out by now but if not, to make the widget area full-width, use this CSS:
.footerwidgetheader-container {
width: 100%!important;
}
.footerwidgetheader-container .wrap {
width: 100%!important;
max-width: 100% !important;
}
Great tutorial! We used it here https://www.greenhostit.com to create a new widget above the footer.
Is there a way to make this go full width of the page but still stay above the footer?
It’s almost there, but for some reason it duplicated under the footer widgets as well? http://www.drewherrema.com (the Let’s talk section is the added widget). Any ideas?
Make sure you only add the ‘genesis_before_footer’ action once. He included it twice to show how the widget can be placed both before and after the footer widgets by modifying its priority.
How could I modify this to exclude the front page? Thanks, working great!
You are the BEST! Thank you!!!!!!!!
Hi Neil Gee, Thanks for the tutorial. I’m using news pro theme but i want to set footer to full width can you please how can i wrap it.
Thank you
Sidhu Burre
How would I do this so that it comes AFTER the 3 column widgets but before the bottom footer? Thanks!
try the code without the priority
add_action ('genesis_before_footer','genesischild_footerwidgetheader_position' );
awesome!
how do I modify this to show up only on page id 19?
I think I figured it out. :) :
https://gist.github.com/marisqaporter/a62e402ec15db3069265
Yep that’s it – just made a comment to your gist.