Create a Collapsing Widget Area on Your Genesis Site

What if you want to add a section to your site so you can display ads or a special message, but you don’t want that section to be created and show an empty space when there isn’t content in it?

A client of mine wanted an ad block above the header for displaying ads, but he didn’t always want an ad in that block and didn’t want a blank gap showing when the ad wasn’t there.

For this example, I’m going to show you how to add a collapsing widget area above the header. We’re naming our widgetized area “Above Header Ad.” This will be what appears as the name for this widgetized area when you go to Appearance –> Widgets in your WordPress dashboard.

1. Register the new widgetized area by adding the following to the functions.php file found your child theme directory:

//Adds an ad block above the header
genesis_register_sidebar(array(
	'name'=>'Above Header Ad',
	'id'=>'above-header-ad',
	'description' => 'This is the ad block above the header',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>',
	'before_widget' =>'<div id="adspace">', 'after_widget' => '</div>'
));

The code above should be placed anywhere in the functions.php file in your child theme after this line:

require_once(TEMPLATEPATH.’/lib/init.php’);

(Just a note…it may be a little confusing that we’re registering a “sidebar” but historically in WordPress, widget areas were only in the sidebar. But now we can create sections for widgets anywhere, not just the sidebar, so I tend to use the term “widgetized areas.” )

2. Add the following code to your functions.php file to insert the Widget Area before the header:
(Add this code after the require_once(TEMPLATEPATH.’/lib/init.php’); line in your functions.php file. )

add_action('genesis_before_header', 'above_header_ad');
function above_header_ad() {
   dynamic_sidebar('Above Header Ad');
}

This checks to see if there is anything in the widgetized area named “Above Header Ad.” If there aren’t any widgets in that area, the div “adspace” (in Step 1 code) won’t be created.

(If your child theme includes a topnav section above the header, see the note at the end of this tutorial.)

3.Now style the area. We wanted our add block to be the same width as the header area, but have the ad centered in the div. Put the following code in your style.css file:

/**************
 For above header ad
 ****************/
#adspace {
 width: 960px;
 margin: 0;
 padding-top: 8px;
 height: 100px;
 text-align: center;
 }

You may need to do some additional styling, like background color, depending on the theme you are using and your preferences.

4. To put an ad in this widget, navigate to Appearance –> Widgets. You should see a new widgetized area named “Above Header Ad.” Drag a text widget to this area and copy in the ad code provided by the service you want to display (Adsense, Amazon, etc.).

Screenshots

NOTE: If your child theme includes a topnavbar above the header (ex. the News child theme) you will have to alter the code in step 3 as follows:

add_action('genesis_before_header', 'above_header_ad', 9);
 function above_header_ad() {
     dynamic_sidebar('Above Header Ad');
 }

Notice we’ve added the number 9 to the end of the “add_action” line. This tells Genesis to execute our above_header_ad function before the function that creates the topnav area, so that our Above Header Ad section is above the topnav area.