How To Create A Full-Width Footer Hero Section For Your Genesis Child Theme

Please note: This post has been archived and is no longer being updated. If you choose to follow the advice or guidance in this post, please do so at your own risk.

So I've got another useful little Genesis tutorial for you.

You may or may not know by now that I'm a huge fan of the Genesis theme framework platform for WordPress.

I designed the Magnet4Blogging Child theme (Sennen Pro) using Genesis and a child theme builder tool called Child Themer by CobaltApps.

I've also worked on countless client website design projects with Genesis too.

Anyhow, I recently added a new widget area to the Magnet4Blogging Sennen Pro child theme. A full-width footer hero banner section!

As a result, I received a few emails from readers asking, how was I able to do this, so I thought I'd write a detailed tutorial about it.

I would like to firstly thank WPBeaches for the initial tutorial they put up over on their blog on how to do this using some custom code.

What I was able to do is add a few tweaks of my own to their code and use it to create a stand-alone widgetized footer hero section, with a background image.

If you scroll below this post, just before the footer section, you should see that I have a great looking full-width hero section, complete with my marketing message and my call to action button placed inside.

So, if you'd love to do the same for your own Genesis Child theme, here's how to do it.

What you'll need -

1. Access to your functions.php file.
2. Access to your style.css file.
3. Some code (provided below).
4. Some content, for the widget.

Now, let's get started.

Important: The functions.php file in your Genesis child theme is a very delicate file. Meaning, if you're not too sure what you're doing and you make a mistake, you could potentially take down your entire site. Please make sure you back up the contents of your functions.php file fully before modifying it. Also, bear in mind that we're modifying the child theme and not the parent theme.

The Functions.php Code you will need

So, the first bit of php code you'll need is shown below.

Simply copy this code and carefully paste it into your Child theme's functions.php file, and hit save.

Remember, do not include the opening tag. Copy from the part that begins with //Pre-Footer...

<?php//* Do not include the opening php tag//Pre-Footer Widget Areafunction genesischild_footerherowidget() { genesis_register_sidebar( array( 'id' => 'footerherowidget', 'name' => __( 'Footer Hero Widget', 'genesis' ), 'description' => __( 'This is for the Footer Hero Widget Headline', 'genesis' ), ) );}add_action ('widgets_init','genesischild_footerherowidget');//Position Pre-Footer Widget Areafunction genesischild_footerherowidget_position () { echo '<div><div>'; genesis_widget_area ('footerherowidget'); echo '</div></div>';}add_action ('genesis_before_footer','genesischild_footerherowidget_position');

A couple of things to keep in mind with the above code.

The code should output the widget area before the footer section of your theme.

If, however, it ends up showing after the footer in your theme, simply add a priority value of 5 after the 'genesischild_footerherowidget' callback function, as marked in red, to make it load before the footer. See example below.

add_action ('genesis_before_footer','genesischild_footerherowidget_position', 5 );

Adding content to the widget

Next, you will need to add some content to the footer hero section.

Simply go to appearance > widgets and drag an empty text box into the 'Footer Hero Widget' area.

You can then play around with whatever kind of content you'd like to have displayed for your visitors.

Adding CSS to style the widget area

Once you have the php code, and widget in place with some content inside it, it's time to add some style.

To do this, we need to add some CSS code, so, simply copy the code below and carefully paste it into your style.css file for the Genesis child theme you have installed.

It doesn't really matter where you put this code, however, I would recommend you put it under 'Footer Widgets' section of your CSS file, so you can find it easily should you need to go back to it to make changes.

Here is the code you'll need.

.footerherowidget-container { background-image: url("#"); color: #fff; padding-top: 70px; padding-bottom: 70px;}.footerherowidget-container .widget { padding-top: 40px;}

Now let me explain a few things about the CSS code above.

1. Replace # with the URL of the image you want to show as the background image for the footer hero section widget.
2. If required, adjust the top and bottom padding values marked in red to add some space to the content and image.

Custom image creation

I would also recommend you create a custom image to use specifically for the background of the footer hero section. Check out my video tutorial here to learn how to create a great-looking graphics hero banner image.

To view what you've done so far, don't forget to clear the cache if you're using a cache plugin of any kind. Then reload your post/page to see if everything is working as it should be.

The new widgetized footer section will appear on all the posts and static pages of your Genesis child theme. If you want to exclude it from certain pages, i.e. your blog homepage or landing pages, then check out this tutorial post on wpsites on how to remove widgets on specific pages.

Hopefully, this little tutorial has worked for you, but if it hasn't, please start over and go through the steps again, very carefully this time. If you need further assistance please leave me your comments below.

Best of luck.