10/6/2015 - 9:48 PM

How to Add a Widget Area to a Genesis Page

Andrea Whitmer NABM
//* 1. Create the widget area.
//* To add a new widget area to your child theme, open functions.php and add the following:

genesis_register_sidebar( array(
	'id'		=> 'page-widget',
	'name'		=> __( 'Page Widget', 'nabm' ),
	'description'	=> __( 'This is the widget area for a specific page.', 'nabm' ),
) );

//* You can change the ID, name, and description to fit your use case. So if this widget area is going on your contact page, for example, you could change the ID to something like “contact-widget” or “contactwidget.” Just make sure you change it in all the other steps.

//* 2. Create the condition for displaying the widget area.
//* We want the widget area to display only on a particular page, so we need to add code to functions.php to tell the theme where it goes.
//* If your Genesis child theme uses HTML5 (Pro child themes):

//* Add the page widget in the content - HTML5
add_action( 'genesis_entry_footer', 'nabm_add_page_content' );
function nabm_add_page_content() {
	if ( is_page('ID') )
	genesis_widget_area ('page-widget', array(
        'before' => '<div class="page-widget"><div class="wrap">',
        'after' => '</div></div>',
	) );

/** Used on Dusty J Miller website */
/** ONE FULL-WIDTH WIDGET AREAS below nav on Home page only **/
/** Register full widget area */
/** */

genesis_register_sidebar( array(
	'id'				=> 'full-widget-1',
	'name'			=> __( 'Full Widget One', 'ask' ),
	'description'	=> __( 'This is the full widget one section.', 'ask' )
) );

/** Add the full widget section */
/** Must group the widget inside parentheses after is_home() && */
add_action( 'genesis_before_content', 'ask_full_widget' );
function ask_full_widget() {
	if ( is_page('60') )
		   genesis_widget_area( 'full-widget-1', array(
		       'before' => '<div class="full-widget-1"><div class="wrap">',
 	           'after'	 => '</div></div>',
		) );

/** 3. Add some CSS rules.

Without some CSS, your widget area won’t display correctly. Here is some base CSS 
to add to your child theme’s stylesheet (though it is definitely not exhaustive – feel free to alter as needed).
** /
/* Page Widget
------------------------------------------------------------ */

.page-widget {
	line-height: 1.5;
	padding: 30px;
.page-widget p {
	margin-bottom: 24px;
        text-align: center;

/** Again, if you changed the name of your widget area, you’ll want to update here 
so your stylesheet is looking for the correct div ID.

/* Used on Dusty J Miller website */
/* ONE FULL WIDTH WIDGET area above content area on Home page */
/* Full Widget
------------------------------------------------------------ */

#full-widget {
  clear: both;
  margin: 0 auto;
  overflow: hidden;
  padding: 0 0 10px 0;
  width: 100%;
  border-bottom: 1px solid #DA9F44;
  border-bottom: 1px solid #dacf7c;

.full-widget-1 {
  float: none;
  width: 100%;
  clear: both;
  margin-left: 0%;
  text-align: center;

----- */
A few things to keep in mind:

If you changed the name of the widget area in Step 1, you’ll need to change it twice in this step.
You’ll need to replace “ID” with the page ID number you are using. To find your page ID, go to Pages > All Pages in your WordPress dashboard. Hover over the page title and you’ll see a URL like this at the bottom of your browser window:
That number is the page ID, which you’ll need to use in the function above. Do not use the entire URL – just the ID number.
In each function above, we are using a hook to place the widget after any content on the page. That allows you to add regular content to the page and display the widget area afterward. To change that, check the Genesis hook reference.