Genesis Framework and WordPress is a very unique combination. Like WordPress, GenesisWP also provides lots of hooks and flexibility in functionality.
In this tutorial we will go over Genesis Framework hook which we will implement in order to achieve Special additional section before Footer Widget section. Kindly take a look at bottom of Crunchify.com and look for a section for Google Adsense’s Matched Content ads.
When Crunchify was approved for Matched Content ads, I was kind of thinking where to put Match contents on site and finally decided to have it just before footer widgets.
Below is a code snippet which I’ve implemented in order to add new widget section just before footer widgets.
Let’s get started:
Step-1
Create Extra Widget Area.
Put below code to your theme’s functions.php file.
// Step-1: Create Extra Widget Area genesis_register_sidebar( array( 'id' => 'crunchifybeforefooterarea', 'name' => __( 'Crunchify_Before_Footer_Area', 'child theme' ), 'description' => __( 'This is Crunchify Before Footer Widget Headline...', 'child theme' ), ) );
Step-2
Position Widget Header – Place new widget before Footer Widget area.
Just put below code to your theme’s functions.php just after you put code for Step-1.
// Step-2: Position Widget Header - Place widget before Widget area
add_action ('genesis_before_footer','crunchify_before_footer_area', 15);
function crunchify_before_footer_area () {
genesis_widget_area( 'crunchifyBeforeFooterArea', array(
'before' => '<div class="crunchify-matched-content-footer" id="beforefooterid">',
'after' => '</div>',
) );
}
Step-3
Now the next step is to style your new section. As you see in step-2, we are wrapping new widget section with CSS class crunchify-matched-content-footer. As per your need just add required CSS properties to your theme’s style.css file.
On Crunchify – I’m using this CSS style.
.crunchify-matched-content-footer {
overflow: hidden;
background: #fff !important;
padding: 30px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3) !important;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3) !important;
box-shadow: 0px 0px 8px rgba(0,0,0,0.3) !important;
margin-bottom: 30px !important;
border-left: 4px solid #7ad03a;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
}
NOTE: As per latest update now you can also earn money with Matched content.