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.

genesis-full-width-above-widgets

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');

//Extra Widget Area function genesischild_footerwidgetheader() { 	genesis_register_sidebar( array( 	'id' => 'footerwidgetheaderarea', 	'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');

genesis-full-width-widgets-header

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.

Full Gist here.

13 Comments

  1. Shari on February 19, 2018 at 8:02 pm

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

  2. Stephanie Rosendahl on January 16, 2018 at 8:24 pm

    Great tutorial! We used it here https://www.greenhostit.com to create a new widget above the footer.

  3. Lori on December 29, 2016 at 9:46 pm

    Is there a way to make this go full width of the page but still stay above the footer?

  4. Vivian Ngai on September 30, 2016 at 4:41 pm

    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?

    • Cameron on October 12, 2016 at 7:56 pm

      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.

  5. David on September 28, 2016 at 5:53 am

    How could I modify this to exclude the front page? Thanks, working great!

  6. Kathy Osborne on March 30, 2016 at 9:05 pm

    You are the BEST! Thank you!!!!!!!!

  7. Sidhu Burre on November 8, 2015 at 3:46 pm

    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

  8. Belinda on August 10, 2015 at 4:19 pm

    How would I do this so that it comes AFTER the 3 column widgets but before the bottom footer? Thanks!

    • Neil Gee on August 13, 2015 at 11:40 pm

      try the code without the priority
      add_action ('genesis_before_footer','genesischild_footerwidgetheader_position' );

  9. marisa on July 8, 2015 at 1:13 am

    awesome!

    how do I modify this to show up only on page id 19?

Leave all Comment