Add Widget Area In Genesis

One of the greatest things about WordPress are the widgets.

The only problem is, many people want a widget area which isn’t already included in their theme.

So how easy is it to create a widget area anywhere in WordPress?

It depends on which theme you are using. Its easier to add a widget area in WordPress if you’re using a theme framework like Genesis than it is if using one of the default themes.

The reason for this is that premium frameworks are built with customization in mind and include a list of hooks which you can use to display content in different locations.

Check out all the hook locations for Genesis theme users.

This code will work in most of the Genesis hook locations including the following:

  • Document Hooks
  • Header Hooks
  • Content Hooks
  • Post/Page Hooks
  • Comment List Hooks
  • Footer Hooks

Lets go through the simple process of adding a custom widget area anywhere in WordPress.

  1. We’ll register the new widget
  2. Then hook the new widget to any of the Genesis theme hook locations

1. Register New Widget

All you need to do is add some php code to your child themes functions.php file.

genesis_register_sidebar( array(
'id' => 'custom-widget',
'name' => __( 'Custom Widget', 'genesis' ),
'description' => __( 'Custom Widget Area', 'childtheme' ),
) );

This code simply creates the new widget which is displayed in your Widgets page and includes:

  1. A unique i.d – You can use this as the selector to style your new widget
  2. A name for your new widget – Displayed in the Widget on the widgets page
  3. A description for your widget – Displayed in the Widget on the widgets page

This is what you’ll see in your Widgets page after adding this code to your theme.

custom widget

So now you’ve added a new widget with a unique name and description, its time to hook the widget into any hook location.

2. Hooking In Your New Widget

Once you have an idea on where you want the widget to hook into, its simply a matter of adding the hook to your custom function.

Here’s some code you can place in your child themes functions.php file.

This code uses the genesis after header hook so any widget you drag into your new custom widget area, will display after the header.

add_action( 'genesis_after_header', 'add_genesis_widget_area' );
function add_genesis_widget_area() {
                genesis_widget_area( 'custom-widget', array(
		'before' => '<div class="custom-widget widget-area">',
		'after'  => '</div>',
    ) );

}

You can change the hook in this code to display your widget content in most hook locations.

Styling Your Widget

Now that you’ve registered your widget to output in one of the Genesis hook locations, you might want to add some styling to your new widget.

The class you use for this has been created when you added the custom function which you can see in the code above being the same as the i.d you used when registering the widget in step 1.

class="custom-widget

In this case its custom-widget so the CSS code you can add to your child theme style.css file would look something like this:

.custom-widget {
background-color: grey;
margin: 5px 0 10px;
padding: 10px;
overflow: hidden;
}

You can add other CSS properties and change the values for each property to suit your own theme design.

Add After Post Widget Area In Genesis

Here’s a tutorial i wrote earlier about how to create a widget area after your post content.

This tutorial also shows you how to use the Simple Hooks plugin to display content in any hook location Genesis offers rather than creating a widget for that location.

It also includes information on how to use conditional tags to display your widget content based on specific conditions being met.

Displaying Widget Based On Conditions

Once you’re comfortable adding custom widget area’s in Genesis, you might want to learn how to display the widget content based on conditions.

To do this, you’ll need to add conditional tags to the functions code you used to display your widget in a hook location.

Questions & Answers

If you ever need any help with customizing Genesis, you’ll find the StudioPress community forum a great place to get answers to your questions.

You’ll more than likely find your questions are answered by a full time WordPress Developer or designer and StudioPress staff including the founder, Brian Gardiner drop in on a regular basis.

Missing out on the latest developments?

Get the latest web design tutorials, custom coding solutions & WordPress updates.

5 Reasons Mad Mimi Works Better

mad-mimi
  1. Sends From Your Email Address - More personal & higher open rate
  2. Cheapest - $42 for list of 10,000 emails, unlimited sends
  3. Ease of Use - The easiest system to create & setup campaigns
  4. RSS to E-Mail - Auto send list of latest posts
  5. Auto Send Any Number of Days - enables you to offer multiple newsletters at different frequencies.

Click here to create a free account.

Comments

  1. Candice says

    This post is perfect! Simple as someone else mentioned, is very nice. One question though, how do you make it so that the widget area only works for one specific page?

    Thanks!

    Candice

  2. Andrei says

    Awesome tutorial! I looked at about half a dozen similar tutorials, but they all got too complex for their own good!

    KISS!

    Thanks to your example I was up and running fast.

  3. Deb says

    This tutorial is exactly what I needed. I managed to get the custom widget in place, but I have one more customization to this I need and I can’t figure it out. I am adding this widget to a Genesis theme (midnight) in order to add a slider before all content, but I need it to activate ONLY on one specific page.

    How do I go about doing that?

    Thanks for this post.

Ask a Question