• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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.

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 like this :

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

In this case is_page('1') controls where he custom-widget displays which will be the page with a i.d of 1. You can find the page or post I.D in the source code of the page or by hovering over the MOver to trash link.

Related Posts

  • Adding New Widget Areas In StudioPress Themes
  • Add Widget After Header On Home or Front Page in Genesis

Reader Interactions

Comments

  1. Petri says

    October 24, 2014 at 1:08 pm

    Thanks a lot Brad, this makes adding and hooking a widget very easy.
    Your site is my favorite reference for all Genesis questions!

    Log in to Reply
    • Brad Dalton says

      October 24, 2014 at 1:12 pm

      Thanks for the support Petri.

      Log in to Reply
  2. Sam says

    October 17, 2014 at 1:01 pm

    This is a great tutorial – the best I’ve found! I do have a question, though … when I try to add more than one widget area my site goes down because there’s duplicate code. Is there a way to change that, or can we only add one?

    Log in to Reply
  3. xyxo says

    September 3, 2014 at 6:17 am

    this is the best tutorial about widgetizing.

    Log in to Reply
    • Brad Dalton says

      September 3, 2014 at 7:58 am

      Thanks for the positive feedback

      Log in to Reply
  4. Candice says

    July 21, 2014 at 12:15 pm

    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

    Log in to Reply
    • Brad Dalton says

      July 21, 2014 at 2:07 pm

      Candice

      You add a conditional tag after the function like:

      if ( is_single() )
      Log in to Reply
  5. Andrei says

    March 29, 2014 at 2:58 am

    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.

    Log in to Reply
    • Brad Dalton says

      March 29, 2014 at 3:23 am

      Thanks for the nice comment Andrei.

      Log in to Reply
  6. Deb says

    February 8, 2013 at 10:35 pm

    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.

    Log in to Reply
    • Brad Dalton says

      February 9, 2013 at 4:37 am

      Hi deb. You’ll find the answer here. Change the conditional tag to is_page(007) and change the page i.d to your own

      Log in to Reply
      • Deb says

        February 9, 2013 at 6:36 am

        That did it! I’m bookmarking your site. I can tell I’m going to be back.

        Thanks so much.

        Log in to Reply
        • Brad Dalton says

          February 9, 2013 at 6:57 am

          Good stuff Deb! Just made a couple of videos about this which i added to Youtube also.

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.