WP Fab

Fabricating Fabulous WordPress Websites

  • Home
  • About
  • Projects
  • Contact

Create a Collapsing Widget Area on Your Genesis Site

by Laura 5 Comments   Oct 25th, 2010

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

image with content in text widget

Image above shows ad displays above the header on the Genesis Lifestyle theme when ad code exists in a text widget in the Above Header Ad widget area.

Ad space section is not created above the header when no widget exists in Above Header Ad widget area.

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.

Filed Under: How To

Comments

  1. Dale says

    November 23, 2010 at 3:38 pm

    Thank you > Thank you > Thank You.

    You should get the Genesis guys to have a look at this. It is so to the point and explains (with code) how to get done exactly what so many Genesis users are trying to accomplish.

    Thanks again.
    You rock

    Reply
  2. Laura says

    November 26, 2010 at 2:08 pm

    Thank you Dale. I appreciate it! 🙂

    Reply
  3. Adam W. Warner says

    March 15, 2011 at 12:41 pm

    Hi Laura,

    I’ve been working with Genesis for some time now…more of a power user than a coder. I needed to add a widgetized header area to my Genesis child theme for the purpose of a banner ad, and came across your tutorial here after discovering I needed a refresher.

    Very simple and clear and works like a charm! So thanks! Most appreciated:)

    Reply
  4. Laura says

    March 24, 2011 at 7:57 am

    Hi Adam,
    Thanks so much for your kind comment. Glad it was what you needed 🙂

    Reply
  5. Vlad says

    June 30, 2011 at 10:03 am

    It works!!! Tanks a lot!!!

    Reply

Leave your comment below Cancel reply

Your email address will not be published. Required fields are marked *

CAPTCHA
Refresh

*

Let’s Connect!

Follow Us on TwitterFollow Us on LinkedIn

Recent Posts

  • Fix Simple Sidebars “Illegal String Offset” error
  • Don’t be fooled by domain renewal letters
  • I love Lightning Base WordPress hosting
  • Genesis Changes: The Essential Guide for Genesis Framework Developers
  • Clean up weird characters in your WordPress posts
privacy policy ∣  disclosure ∣  terms