• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

  • Home
  • About
    • Terms of Service & Privacy
    • Accessibility
  • Services
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
Home » Add Banner Area Before the Header and Below the Footer in Genesis

Published on May 4, 2016 / Published on May 4, 2016 / Reading Time: 2 minutes

Add Banner Area Before the Header and Below the Footer in Genesis

Add Banner Area Before the Header and Below the Footer in Genesis
Photo Credit: Kaboompics.com

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.

If you are unfamiliar with working with your theme files, stop and ask for help. If you are familiar with modifying your theme files – you should back them up before proceeding.

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>',
) );
}
view raw functions.php hosted with ❤ by GitHub

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;
}
view raw style.css hosted with ❤ by GitHub

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.

Note: You should make sure that any code you place in these areas are responsive. Some revenue sharing programs provide embed codes that are “not” responsive. So be sure to ask about that when generating your codes.

The end result should look like this:

2016-05-03_19-46-05

 

  • Like my Signature? Get the Signature Widget for Genesis right here!

  • FacebookTweetPinPrintShares6

    Filed Under: Genesis Framework, Tutorials, WordPress Tagged With: after footer, banner widget, before header

    A recent conflict was found when Genesis Simple Share is activated and configured while using the Posts and Page Grid in Genesis Blocks. The error can be seen when viewing the content on the front end. The error does not display in edit mode. Below is a temporary fix that will allow you to manually set […]

    Primary Sidebar

    It's just me and my dog Bella. I am a freelance web developer at Cre8tiveDiva.com. I build websites using WordPress and the Genesis Framework, WooCommerce and provide troubleshooting and support. I also build with Shopify. I love chocolate, lots of coffee!

    Sign Me Up!

    Receive my blog posts, tips and updates delivered to your inbox!

    Yes, Sign Me Up

    *By signing up you will receive new blogs, updates on products, services and important alerts.

    Categories

    • Design
    • eCommerce
    • Five on Friday
    • Fonts
    • Free Themes
    • Freebie Friday
    • Genesis Framework
    • Genesis Plugins
    • Genesis Themes
    • Genesis Untapped
    • Instagram
    • MailChimp
    • News
    • Plugins
    • Press This News
    • Social Media
    • Tipsy Tuesday
    • Troubleshooting
    • Tutorials
    • Uncategorized
    • Web Development
    • WooCommerce
    • WordPress
    • WordPress Plugins

    Footer

    Digital Nomad! I can be anywhere I wanna be now.

    Latest Blog Posts

    • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
    • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin
    • How to Add “Shop” to WooCommerce Breadcrumbs when Using Yoast

    Looking for Something?

    Copyright © 2012–2022 · Designed with by Me! · Hosted on SiteGround

    We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy