How To Create Custom Widget Areas With Genesis In WordPress

So, we're back with another one of our Genesis tutorials, and this time, it's much easier, and much handier. Today, we'll talk about creating a custom widget area with Genesis in WordPress. When you install a theme on WordPress, you get limited customization options, and there are only so many widget areas you can place your widgets on. And since almost all of the customizations needed on Genesis requires the installation and usage of plugins and widgets, having special widget areas in special places to keep certain widgets is a key requirement. The answer is to create a custom widget area wherever you want, and then easily add widgets to it.

You can add custom widget areas almost anywhere on your site - such is the beauty of genesis and WordPress hooks. I often create custom widget areas to add additional widgets in unexpected places, such as after a post content on single post pages. You won't find widget areas for such places built into your theme - you'll have to create your own. Indeed, custom widget areas go a long way into theme customization

So let's start with creating a custom widget area for our WordPress blog. Note that for the purpose of this tutorial, I have used the Magazine Child theme provided by StudioPress. But this method will work on any Genesis child theme. So if you are ready with your Genesis framework and theme then let's get started, shall we?

Creating Custom Widget Areas in Genesis

Registering a widget area

The first thing you'll have to do is register a custom widget area. This is like declaring and initializing an array (if you have some basic programming knowledge), or building the necessary structure before putting into place (layman terms). This process is called 'Registering a widget area'.

Here's the code to do it. You can add this code to the functions.php file inside your theme folder.

genesis_register_sidebar ( array (
      'id'                  => 'cwa1-after-post',
      'name'             => __( 'Custom Widget Area 1 - After Post', 'mg' ),
      'description'   => __( 'This is a custom widget area, and it can be placed after the post', 'mg' ),
   )
);

As you can see, there are three fields in the registration array. ID, name and description. The ID MUST be unique for each custom widget area! Try to avoid any duplicate IDs. That's why it might be a good idea to prefix the ID with a unique identifier, such as cwa1 in the above case (short for Custom Widget Area 1). ID cannot contain upper-case or special letters. No spaces either.

The name can be same, but it's best to use a different name each time to avoid any confusion. You can see a second string in the name field that says 'mg'. This should be your theme name, although there' no compulsion. It's a good practice to keep track of which theme you are applying a widget area to. In this case, the 'mg' stands for the 'Magazine' theme I am currently using. You can type in anything.

The same goes for description. There's a description string, and then there's a theme name string. This should be the same name you put inside the name field.

Adding a widget area

Now that you've created a widget area, how do you apply it? We'll make use of hooks here to hook into specific portions of our site, and inject our code to make this widget area work. To do this, open up your functions.php file again, and add the following code to add an action for the widget area.

add_action( 'genesis_before_loop', ' mg_cwa1_genesis' );
function mg_cwa1_genesis() {
if (is_home () ) {
genesis_widget_area( 'cwa1-after-post', array(
'before' => '<div id=" cwa1"><div class=" wrap_cwa1">',
'after' => '</div></div>',
) );
}
}

In the above code, we've added a function for our widget area, and hooked it with an action hook. Inside the 'add_action' function, the 'genesis_before_loop' is the hook, and 'mg_cwa1_genesis' is the name of my function I want to hook into 'genesis_before_loop'. Note that you can change the function name, but not the hook. Hooks are pre-defined, and you can hook into one of the many available hooks for Genesis and WordPress. Check a list of Genesis Hooks here.

The function 'mg_cwa1_genesis' contains a condition that would display the widget only if it's the homepage. Inside the function, we are adding our custom-made widget area by calling it by id 'cwa1-after-post'. Make sure you get it right, or the custom widget area won't work. We are also setting the styling for our widget area. cwa1 and cwa1_wrap are id and class identifiers for use with CSS styling.

Note that you can modify the text in bold.

Did you find this helpful? If not, and if you feel yourself completely lost, then feel free to ask us questions if necessary. Looking forward to hearing from you guys. Cheers :)

Filed Under: How To

Source : mybloggertricks[dot]com