How to create a new widget area

I’ve found it helpful in certain situations to have widgetized areas (that is, places I can drag/drop widgets into from the Appearance>Widget menu) other than the standard Sidebar 1 and Sidebar 2. Certain themes have this built in, but it’s not terribly difficult to create them yourself, so I thought I’d write up a quick tutorial.

What is a new widget area?

As always, head on over to my test site to see an example of what I’m talking about. Scroll down to the footer and you’ll see a light red area with 2 boxes in it that say something along the lines of ‘this is your new sidebar’. In case that site/example is gone by the time you’re reading this, here’s a picture of it.

click to enlarge

So what I’ve done is created 2 new sidebar areas and placed them, in this case, after the content box. Widgets can be dragged into these sidebars in the same way as you’d add widgets to the default sidebars – by going to the Appearance>Widgets menu and dragging them into the appropriate place. More about that in a minute.

How to create a new widget area

Per my typical approach, I’m just going to give you the code, and the instructions on where/how to place it, and if you have questions beyond this or want to know more about how/why it works, you can leave a comment or reach out to me individually…cool?

Okay, so the first thing we need to do is register the new sidebars. This is done by going to the Thesis>Custom File Editor menu, and from the drop down menu at the top of that page, choose ‘custom_functions.php’ and click the ‘edit selected file’ button to its right. Once there, scroll down to the very bottom and paste the following code:

/****************************************************************
   * REGISTER NEW SIDEBARS
****************************************************************/
$args = array(
	'name'          => 'New Sidebar %d',
	'before_widget' => '<li id="%1$s" class="widget %2$s">',
	'after_widget'  => '</li>',
	'before_title'  => '<h3>',
	'after_title'   => '</h3>' );

register_sidebars( 2, $args );
/****************************************************************
   * CREATES NEW SIDEBARS
****************************************************************/
function new_sidebars(){
    ?>
    <div id="new-sidebars">
        <div id="new-sidebar-1">
            <ul class="sidebar_list">
                <?php if (!dynamic_sidebar('New Sidebar 1') ) { ?>
                    <li class="widget">
                        <div class="widget_box">
                            <h3><?php _e('New Sidebar 1', 'thesis'); ?></h3>
                            <p>This is your new sidebar.  Add widgets here from your WP Dashboard just like normal.</p>
                        </div>
                    </li>
                <?php  }   ?>
             </ul>
        </div>
        <div id="new-sidebar-2">
            <ul class="sidebar_list">
                <?php if (!dynamic_sidebar('New Sidebar 2') ) { ?>
                    <li class="widget">
                        <div class="widget_box">
                            <h3><?php _e('New Sidebar 2', 'thesis'); ?></h3>
                            <p>This is your new sidebar.  Add widgets here from your WP Dashboard just like normal.</p>
                        </div>
                    </li>
                <?php  }   ?>
             </ul>
        </div>

    </div>
    <?php
}
add_action('thesis_hook_after_content_box', 'new_sidebars');

So what that has done is created 2 new sidebars and placed them at the bottom of your content box…well, after it, actually. If you were to look at your site now, you’d see them placed one on top of the other…not what we want in this case, but we’ll remedy that with a little CSS styling.

Styling your newly created sidebars

Now that these widgetized sidebars are created, we need to style them to look how we want them to look. So, go to the Thesis>Custom File Editor menu, and make sure it says ‘custom.css’ in the drop down menu. Scroll down to the bottom (or to the appropriate place if you’ve got this file organized) and paste the following code:

/***********************************
NEW WIDGET STYLING
***********************************/
#new-sidebars {
	float:left;
	width:100%;
	background-color:#ffaaaa;
	border-bottom:.1em solid #000000;
}
#new-sidebar-1 {
	float:left;
	margin-left:7em;
	width:40%;
}
#new-sidebar-2 {
	float:left;
	margin-left:2em;
	width:40%;

}

If everything was done properly, you should now have two sidebars after your content box that look very similar to/the same as what’s pictured above.

And if you go to your Appearance>Widgets menu, you should now see 2 new boxes in the right column where you can drag widgets. Just click the drop down arrow to expand them (pictured here) and you can begin dragging widgets into them…text, pictures, recent post widgets, whatever you like.

What if I want my widgetized sidebars to appear somewhere else?

Okay, so what if you don’t want these new widget areas to appear below your content box? No problem, you just need to ‘hook’ them to the area you do want them in. Look at the 1st bit of code above (that went into your custom_functions.php file). The last line says “add action…”, and you see ‘thesis_hook_after_content_box’. That ‘after_content_box is the hook we used and it tells Thesis to place it in that specific area.

Well, Thesis has lots of hooks available (a hook essentially just refers to a different place on your site you can ‘hang’ code). Check out this visual reference and click on one of the thumbnail images you see there. As you’ll see, the hooks are all over the place and they each refer to a different spot on the page. Choose where you want your widgetized sidebars to go and replace ‘after_content_box’ in the above code with the hook you want.

Of course, that will require you to style your sidebars differently because the size of the space/hook you’re placing them in/on will determine how you style them. If you decide to do that, leave me a comment and I’ll show you how to do it.

Things to keep in mind

• We registered/created just 2 widgetized sidebars. If you want more, that’s totally doable and it’s a matter of a few tweaks to the above code. Comment me if you would like to learn how to do so.
• Depending on what widget(s) you drop into these newly created sidebars, your styling (CSS) may need to be altered (an image, for example, may be taller than, say, a list of links, etc), so if you run into an issue where it just doesn’t look right, comment me.

Alright, so that wraps things up. If anything is unclear or doesn’t work or if you need some additional support, please holler. And of course, if you’re at your wit’s end and want to hire me to build you a WordPress site or provide some WordPress Coaching, please do.

Cheers…