How To Add Widget In Genesis Child Theme

Complete tutorial on how to add widget in genesis child theme. It really becomes easy with shortcodes. Genesis Framewok have lots of hooks, filters and short codes for developers. Remember that we cannot bring any direct changes to framework, but we have to install any child theme. You can get free child theme from here.. Sample Genesis Child theme. You can get complete reference of shortcodes, fliters and Hooks from studiopress website.

I have already made Review on Genesis theme framework

Remember that we are going to edit php files and so you have to add these codes in Theme function or function.php file. It would be better if you make the backup of the file before, since wrong editing may lead your site go offline.

How add widget in genesis child theme

First we have to understand the loop structure, and then you will be able to register widgets anywhere in the child theme.

/** Register widget area in genesis */

: This is the comment statement, and it makes easy to understand, from where the code has started.

genesis_register_sidebar

is the statement used before registering any widget areas.

Now their are three different structures which we have to understand.

• id : This is id you will assign for each widgets. This should be unique and should be in lower case, no special characters are allowed and no spaces.
• name : Its the name given for each widget, thus making the process more understandable and simple.
• description : It is what you will see in the dashboard of your wordpress. For example : Ads above the post, ads below the post etc.

Now once you understand these structures, you have to understand about the visual structure of genesis theme. You can use genesis visual guide plugin and it will help you knowing, where is the header, where the loops end, etc.

Now lets add widget in genesis child theme. We will first register the widgets below the header.

/** Register Widget Areas Below Header */
genesis_register_sidebar( array( ‘id’ => ‘after-header-ad’, ‘name’ => __( ‘After Header Ad’, ‘blogvkp’ ), ‘description’ => __( ‘Ads Below Header’, ‘blogvkp’ ), ) );

So the task is completed. Similarly we will add the widget above the post content. Now we should understand the above post content means, above post title. So we have to find the hook in genesis for this purpose.

genesis_before_post

is the required hook

/** Register Widget Areas Above Post */
 genesis_register_sidebar( array(
 'id' => 'before-post-ad',
 'name' => __( 'Before post Ad', 'blogvkp' ),
 'description' => __( 'Ads above post', 'blogvkp' ),
 ) );
 

Now if we want it to be visible only on single post or if you don't want it to be visible at homepage, then the task becomes little difficult.. Now we have to add the condition for single post display.

/** Register widget areas */
 genesis_register_sidebar( array(
 'id' => 'after-post-ad',
 'name' => __( 'After Post Ad', 'balance' ),
 'description' => __( 'This is a widget area that can be placed before the post', 'balance' ),
 ) );

add_action( 'genesis_after_post_content', 'ads_after_post' );
 function ads_after_post() {
 if ( ! is_singular( 'post' ) )
 return;
 genesis_widget_area( 'after-post-ad', array(
 'before'=>'div',
 ) );
 }

div class="after-post widget-area

Remember to add < and > in the above div class. So I wish you would have understood the whole process. Following the same steps you can add widgets in any part of genesis theme.

Now if you need custom placement of the widgets in the pages or your theme, then you will need to add custom css. I wish I was able to help you understand how to add widget in genesis child theme. I tried to explain all parts of it.

Related posts:

Remove Genesis Footer How Remove Post Meta From Genesis Thesis Theme Review Auto Generate Thumbnail In Thesis Theme Woo Themes Review