I get quite a number of requests from bloggers asking how to add a banner ad above the header and below the footer area of their sites. These are key revenue generating areas for them and many Genesis child themes do not have them. To add them to your Genesis child theme, follow these instructions.
1. Register Your Sidebars and Hook the Positions
Using a file editing program like Notepad++ or Sublime Text, open up your functions.php file which is located in your child theme folder. Click “View Raw” on the gist below. Copy that code and paste it at the bottom of your functions.php file. Where you see “themename” – replace that with your theme name. You should see that name inside the functions.php file. Then save it.
| //* Register widget areas | |
| genesis_register_sidebar( array( | |
| 'id' => 'before-header', | |
| 'name' => __( 'Before Header', 'themename' ), | |
| 'description' => __( 'This is the before header widget area.', 'themename' ), | |
| ) ); | |
| genesis_register_sidebar( array( | |
| 'id' => 'after-footer', | |
| 'name' => __( 'After Footer', 'themename' ), | |
| 'description' => __( 'This is the after footer section.', 'themename' ), | |
| ) ); | |
| //* Hook before header widget area above header | |
| add_action( 'genesis_before', 'themename_before_header' ); | |
| function themename_before_header() { | |
| genesis_widget_area( 'before-header', array( | |
| 'before' => '<div class="before-header" class="widget-area"><div class="wrap">', | |
| 'after' => '</div></div>', | |
| ) ); | |
| } | |
| //* Hook after footer widget area below footer | |
| add_action( 'genesis_after', 'themename_after_footer' ); | |
| function themename_after_footer() { | |
| genesis_widget_area( 'after-footer', array( | |
| 'before' => '<div class="after-footer" class="widget-area"><div class="wrap">', | |
| 'after' => '</div></div>', | |
| ) ); | |
| } | |
2. Style your widget areas
There isn’t too much you need to do with styling this area if you will be using it for banner advertising. Open up your style.css file which is also located in your child theme folder. Click “View Raw”, then copy and paste that code BEFORE the “Media Queries” section of your style sheet. Save it.
| /* | |
| Before Header and After Footer Widgets | |
| ---------------------------------------------------------------------------------------------------- */ | |
| .before-header, | |
| .after-footer { | |
| line-height: 1; | |
| padding: 0 5%; | |
| text-align: center; | |
| } | |
| .before-header .wrap, | |
| .after-footer .wrap { | |
| border-bottom: 1px dotted #ddd; | |
| padding: 20px 0; | |
| } | |
| .before-header p, | |
| .after-footer p { | |
| line-height: 1.625; | |
| } | |
| .before-header p:last-child, | |
| .after-footer p:last-child { | |
| margin-bottom: 0; | |
| } |
One you have completed the two steps above. Browse over to Appearance > Widgets. You will see two new widget areas – (1) Before Header and (2) After Footer. In this example I used the “Image Widget” plugin to place an image.
The end result should look like this:
