How to create a new widget area

Free Tuts

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.

New Sidebar for Widgets

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.

Add widgets to your new sidebarsAnd 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…

44 comments… add one

  • Your code is great, worked like a charm. Made a few tweaks, moved it above the content area. I would like to know how to put it on my front page only. I have tried to use the if (is_front_page()) {
    tag right below the function line and it crashes when I save.

    Like this:
    function new_sidebars(){
    if (is_front_page()){
    ?>

    That does not work. Any suggestions as to what might be the problem? I am new to this stuff. Also, How do you get rid of the dreaded white space between the nav bar and the widget area now that it’s on the site?

    Thanks for you time. J. Edward

  • Found the problem: Needed to close the bracket at the end of the code like this -

    <?php
    } } (added bracket)
    add_action('thesis_hook_after_content_box', 'new_sidebars');

    • Jeb

      Yep, that last bracket gets you every time. Glad it worked for you. Cheers…

  • Jeb I can see where you only need to copy and paste and change a few variables on the bottom of the PHP code to go to 3 sidebars, but I was not sure about the top half where you register. You mentioned you had those tweaks? I am looking to possibly go to 3 now that I really like the look of 2.

    Thanks……J. Edward!

    • Jeb

      Correct-a-mundo JEdward. And for the top, just put a 3 (or any number, for that matter) instead of a 2 on this line: register_sidebars( 2, $args ); Holler if you run into trouble…

  • Dre

    Thanks for your code and I was even able to add a third sidebar.

    • Jeb

      Sweet, glad it helped.

  • jon

    Hey man I was wandering if you could place custom widgets anywhere on my wp site? I am trying to create a few custom widgets for my site.

    • Jeb

      Hi Jon,
      Thanks for the question. The answer is, mostly. WordPress and Thesis use a system of ‘hooks’ on which you can ‘hang’ just about anything. So, depending on your php and css skills, you can get pretty flexible. Even with just the code provided, if you look at the last line of the php code, where it says ‘add_action(‘thesis_hook_after_content_box’, ‘new_sidebars’);’. The ‘thesis_hook_after_content_box’ is the hook I’m using to place this code. So the widget area created was placed ‘after the content box’. If you’re using Thesis, check out their hook reference list. You can replace the hook in the code provided with any of those hooks and you’ll see where it places the widget area. Depending on where you put it, of course, you’ll have different styling needs, but as far as placement, yeah, you can get these widgets just about anywhere.

      Hope that helps. Cheers…

  • Koustav

    Hello Jeb,
    I want to build a website on Wordpress that will have only two sidebars so that I can place my widgets there. How could I do so? Please help me.

    Thanks,
    Koustav

    • Jeb

      Hi Koustav,
      Are you saying you *only* want 2 sidebars and no content column? If that’s the case, honestly I don’t think that’s an easy thing to create without hacking the main WP code. However, you could accomplish the same thing using plugins I’m sure. Or, depending on the widgets you want to display, you can just use the main content column and build an html table to divide it into two columns, placing your code as you see fit. So there are a few ways to accomplish what you want, it sounds, just depends on what exactly you’re trying to do. Hope that helps…

  • Hey Koustav, thanks so much for a great tutorial, so easy to follow!

    I’m using it on a client project here to add two extra widget areas to the homepage, one for a video box, one for a custom menu.

    I’m trying to float each on either side of the content box, like thus:

    http://bit.ly/N2JXcb

    But the widget area keeps popping underneath:

    http://bit.ly/ORgZLX

    Any help to put it where I need it to be would be fab.

    Thanks again!

  • Sorry, Jeb =) not Koustav, sorry!

    I have managed to get it to pop up there by setting the margin to -350px. Not the most elegant solution, but is this a ‘correct’ way to do it, as it works?

    • Jeb

      Hi Lesley,
      Thanks for the comment. Well, I’m not a CSS expert, but I guess I’d respond with, “It depends”. If your neg margins seem to work in all browsers and you’re getting the look you want, then I say it’s okay. But you could also try floating it or messing with the absolute positioning. That’s more technical and, frankly, stuff I get mixed up on as well, but maybe something you’d want to look into and consider. Or maybe not. :)

  • Steffen

    Hi Jeb,
    I like your code and it works great for me. Thank you! But now I want to use it for a layout that has 2 colums left, maincontent, one colum right. Is that possible? Is there a hook to let the sidebars apear next to the content on the left?

    • Jeb

      Hey Steffen,
      Well, I’m little confused. Do you know that you can set the layout of your site to be just that? A 3 column site with the 2 left columns for sidebars and the larger right one for the main content? Just by using the Thesis > Design Menu? Or are you trying to do this only for one page? And not affect the rest of your site?

      If that’s the case, I’m sure there a few ways to do it, and I’m by no means an expert. But here is what I would do. Create your page, but from the ‘TEMPLATE DROPDOWN’, below the publish button, choose ‘no sidebars’. That will take the normal sidebars away from that page and, before you make any alterations, will just create a page with a main content column that is as wide as your entire site width b/c there are no sidebar columns.

      Then, go ahead and use the same code in the custom-functions.php file, with two changes. First, right after the first line of the code, add the following:

      if (is_page (‘sidebar-float-test’)){

      So to make it clear, the first 3 lines look like this:

      function my_lead_sidebars(){
      if (is_page (‘sidebar-float-test’)){
      ?>

      NOTE: the ‘sidebar-float-test’ needs to be the permalink to YOUR page. If you’re using page IDs, use the page ID # instead. So, if your page is called “I like monkeys”, your code would be if (is_page (‘i-like-monkeys’)){, and if you’re using IDs instead, and the page ID is 347, your code would be if (is_page (’347′)){.

      The second change to the code is to change the hook (the very bottom line of the code) to thesis_hook_before_post.

      Okay, now you just need to style it to get it to float left of the main content. Go to your custom.css file and put in the same css from this post:

      /***********************************
      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%;

      }

      Naturally, you may want to mess around with the widths of each sidebar, or the background colors, or the font sizes, or the margins (may not want that 7em and 2em margin in there, but maybe a little padding instead). Do as you like. If the above is done properly, it *should* work. :) As always, whenever you’re messing around with the custom-functions.php file, there is the possibility that you’ll make a small error and bring your site down. I don’t recommend you start unless you’re comfortable with how to fix that (ftp access). I hope it all helps, and good luck to you Steffen.

  • Thank you for your great support! It was not exactly what I was looking for, but it brought me to the right track. I wanted different sidebars on different pages. That was quit confusing in the beginning, but now I got it with .custom body styls. That´s realy fantastic.

    • Jeb

      Cool Steffen, I’m glad it helped. Holler with questions.

  • It works fine thanks for the tutorial Jeb.

    • Jeb

      Great, thanks Rajandran.

  • Krista

    Hey Jeb – BRILLIANT tutorial. Thanks. I was able to do three no problem. Wondering if it’s possible to do another three either on top of or under the current ones. So I’d have six new sidebar widgets – three across, two rows.

    • Jeb

      HI Krista,
      Glad it worked. Yes, you could put as many as you like in there, just change where storybook them to. So, you just paste the same code a second time, but on the very last line, you change ‘thesis_hook_after_content_box’ to ‘thesis_hook_whereveryouwantit’. Google ‘thesis hooks visual guide’s to see all the placement options.

      Hope that helps Krista. Thanks for the comment. Cheers…

  • Please help! I copied the code into the file as suggested and now cant access my site at all! just getting this message..

    Parse error: syntax error, unexpected ‘}’ in /home/gemma/public_html/wp-content/themes/Chameleon/epanel/custom_functions.php on line 1030

    really hope you can help

    Thanks

  • Jeb

    Hey Gemma,
    I emailed you directly last month rather than reply here, hoping to get you the help you needed quickly, but I never heard from you. I hope you got it worked out.

    Cheers…

  • Hi Jeb,
    I wonder if you could help me here.
    An image I placed in the widgets area appears only on the home page, not on the other pages. This never happened to me before and I don’t have a clue why it’s happening. The HTML code I’m using in the footer widget is:
    Please let me know if you can assist and/or any further info.

    • Jeb

      Hi Motti,
      There are a couple reasons that might be happening. It could have to do with the way your theme is set up, or there are plugins that allow you to show some widgets on some pages but not on others. If you give me the web address I will gladly take a look.

      Thanks.

  • royce

    Hi there, I am a newbie to WP, but an experienced PHP developer.
    Is there a way to dynamically add the widgets to a sidebar at runtime?

    My situation is this. I have multiple themes that I display using the Wordpress Theme Demo Bar plugin. Each one of the themes need to show a different sidebar. I think that the way the plugin is working, it is only displaying the theme that is really active, not the theme that the demo bar is showing.

    I think I can get around the issue by dynamically adding the widgets to a generic sidebar based on the them that is showing. What do you think?

    regards,
    Royce

    • Jeb

      Hi Royce,
      I sent you a separate email on this. Please let me know if you didn’t get it.

      Cheers..

  • I am sorry to comment on such an old thread, but I am in the process of converting from Blogger to WP and have hit a stumbling block which your post seems to address.

    I am trying to add 2 new widgets area into the content of the homepage only, after the content that is already there (featured thumbnails).

    I have inserted the code you mentioned, and can see the new sidebar buttons in my widget menu, but when I look at my homepage after inputting something – nothing shows up.

    I assume I need to alter something in my home.php file, in order to get these new widgets to appear on the site – but cannot for the like of me figure out what that might be.

    I appreciate in advance any help you might be able to give.

    Thank you,
    - Jessica

    • Meeno

      I have the same issue. The widgets show up on both the back end and the front page before I insert anything but once I’ve added something the widgets are gone from the front page.

      I would really appreciate any help on this.

      Thank you.

      • Hi Meeno,
        Can you give me a link to where you are having this issue? So I can check it out please?

  • shingtopay

    Hello my friend, I would like to ask you a question, that is how can i build a Widgets which is above the content. That is above the context but below your title and below ( Home About Contact Quotes Postcards WordPress Free Tuts)
    Thank you

  • How to add the below header widget area by using this code ?

    • Hello Sumit, I don’t completely understand your question. Do you mind clarifying

  • Hi Jeb. good work here. Could I possibly do same on wordpress.com? I,m limited by my widget areas and was wishing to place outside the regular area. Please check out my site. thanks

    http://bimboamole.org/

    • Hey Bimbo,
      To my knowledge, you cannot make such customizations to a wp.com site. One of the many limitations of free. :)

      Cheers…

  • Hi Jeb,
    You’ve got great information on here, so thank you for it! I am looking to put an image coming up from the bottom of the page in the side bar area – in order to fill that sidebar space on pages that have more content and require more scrolling, but the image starting at the bottom of the page – where there are other widgets in the sidebar 1 area at the top and stacked as you go down. I hope that makes sense! I wondered if this area is “thesis_hook_after_sidebar”, but I did not want to make major changes (when I’m a novice) with out affirming that this hook might do the trick.
    Thanks mate!

    • Hi Evelyn,
      Not totally clear what you’re asking, but yes, that sounds like the correct hook for what you need. Please be sure to back up your custom.functions.php file before hand so you can ftp it back together again should something go wrong. :)

      Good luck, and thx for the comment.

  • Great post, I appreciate in advance any help you might be able to give.

    • Hey Maddy,
      Thanks. Was there a specific question that you had? Did I miss it somewhere? Please let me know and I’ll do my best to help. Cheers…

  • loved the content, helped me a lot. There were times I wanted to learn to leave only the content of the widget home.

    • Hi Lucas,
      Thanks for the comment. Did you have a specific question I can help with?

  • Hi, I wish for to subscribe for this webpage to take hottest updates, so where can
    i do it please help.

  • Hi Jeb, you were kind enough to provide the code above for widgetized areas and I used it with great success in the past. I am in the process of redoing my site and would like to put the 3 widget area back up with one change. I would like to make the widget area full width. I cannot seem to find or figure out how to make the widget area do that. I will still keep the 3 widgets inside of the widget area stay inside the page/site width but for effect would like the widget area where all 3 go to span the window. Any suggestions?

Leave a Comment