Coolest Guides on the Planet

coolest guides on the planet

Coolest Guides On The Planet

  • Home
  • macOS
  • WebDev
  • All Posts
  • Contact

Add a Full Width Row Above Footer Widgets in Genesis Child Theme

April 4, 2014 3 Comments

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.

Cats: WordPress

Tags

3gs 10.6 apache backup baseband boot clean urls cpanel css curl custom database drupal el capitan git Google image instadmg ios iphone jailbreak keys lion mac macos mojave macos sierra menu mysql OSX panda php phpmyadmin private public redirect redsn0w remote rsa SEO shell ssh terminal unstoppables upgrade urls

Donate a Beer to the Coolest Guides

Get Beaver Builder Now!

Copyright © 2022· Neil Gee - All Rights Reserved - Hosted by Runcloud

Copyright © 2022 · gee on Genesis Framework · WordPress · Log in