/** 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. -- */