Function Snippet – The Genesis Widget Area’s

BEFORE YOU START CHANGING THINGS…..BACK IT ALL UP FIRST !

Creating a Genesis Widget Area on a designated post/page or consistent area throughout your theme sounds very complicated but when its broken down into necessary steps, it aint so hard.

What are we going to look at here is how to do that Genesis Widget Area in an HTML5 based theme-

• What is a widget?
• Widget area?
• What is a Hook?
• Creating the widget area!
• Using the Genesis Visual Hook Guide plug-in.
• Creating the the conditions for your widget.
• linking your CSS to your widget for styling.

What is a Widget ?

A widget is an independent piece of code that runs within a predefined or designated area of your website, it provides a single action, they are easy to swap out, WordPress comes with a core selection of widgets, with an array of additional ones through the addition of plug-ins like SiteOrigin.

What is a Widget Area?

The Widget Area is simple the allotted theme coded area on a page or post, where you wish to integrate the actual widget, the styling of this area will be simply the width, padding, margin, any borders you wish with background colors etc, the area can be anywhere you like, using the appropriate Genesis hook, more about those Hooky things next.

 What is a Hook?

No, its nothing to do with fishing – sorry to disappoint you.

A hook is a designated area assigned in the Genesis Framework that allows you to manipulate the theme for your own desires or look, if the hook is redundant or not used then it is not seen within the theme design, each hook needs to be initiated by some code placed either in the functions.php or page.php and told what it needs to do, where it needs to be and at what stage it has to appear.Here are some example of the hooks, some are very “self-explanatory”

• genesis_before_header
  This hook executes immediately before the header (outside the #header div).
• genesis_after_header
  This hook executes immediately after the header (outside the #header div).
• genesis_before_content_sidebar_wrap
  This hook executes immediately before the div block that wraps the content and the primary sidebar (outside the #content-sidebar-wrap div).
• genesis_before_footer
  This hook executes immediately before the footer, outside the #footer div.
• genesis_after_footer
  This hook executes immediately after the footer, outside the #footer div.

Some are a little more complicated but with a little trial and error can easily be implemented.

Creating the widget area!

So here goes lets create a widget area first inside the functions.php file, we want this widget to appear on JUST the Front page right after the main content.

//This registers the widget
genesis_register_sidebar( array(
 'id' => 'aftercontent',
 'name' => __( 'After Content', 'geckografix' ),
 'description' => __( 'This Widget appears after the content on Home page only.', 'geckografix' ),
) );

That’s it registered.
Now we need to action it and that is simply done with the following code, this bit of code registers it to a certain page or post and nothing else

//* Adds the widget after the content - HTML5 - Pro-Themes
add_action( 'genesis_after_entry_content', 'geckografix_after_content' );
function geckografix_after_content() {
 if ( is_page('Put your page ID number here*') )
 genesis_widget_area ('aftercontent', array(
 'before' => '
<div class="aftercontent">
<div class="wrap">',
 'after' => '</div>
</div>

',
 ) );
} 

*To find your page ID, go to Pages area in the dashboard and hover over your page title of the page
you want the Genesis Widget Area to be on. You will see an info window appear at the bottom of the screen,
inside that info window there will be a url like this

http://geckografix.guru/wp-admin/post.php?post=10action=edit

The number (just the actual number) place in the code where it says.

If you wish to place the widget only on pages and NOT posts use the following snippet instead

//* Adds the widget after the content - HTML5 - Pro-Themes
add_action( 'genesis_after_entry_content', 'geckografix_after_content' );
function geckografix_after_content() {
 if ( is_singular( 'page' ) )
 genesis_widget_area ('aftercontent', array(
 'before' => '
<div class="aftercontent">
<div class="wrap">',
 'after' => '</div>
</div>

',
 ) );
} 

If you wish to place the widget only on single posts and NOT pages use the following snippet instead

//* Adds the widget after the content - HTML5 - Pro-Themes
add_action( 'genesis_after_entry_content', 'geckografix_after_content' );
function geckografix_after_content() {
 if ( is_singular( 'post' ) )
 genesis_widget_area ('aftercontent', array(
 'before' => '
<div class="aftercontent">
<div class="wrap">',
 'after' => '</div>
</div>',
 ) );
} 

The styling is up to you – Have fun and enjoy

If I can be of any help with this then just….

Get in Touch