People have asked how to add a widgetized sidebar area above an existing double (two narrow) sidebar. So here it is. This tutorial is geared toward Artisteer generated themes but the concept will work with most themes, you’ll just have to work a bit to figure out where to modify your non-Artisteer theme code. This tutorial also uses a theme that was created with and earlier version of Artisteer so some of the CSS classes may have a slightly different name but it won’t be too hard to figure out.

WARNING: Make sure you make backup copies of all the files that you are going to modify. Also remember that if you re-export your Artisteer theme to the same directory it will over write all of your modifications. And last but not least, use a text editor to modify your theme files, NOT MS Word.

Our sidebars before modification looks like this…

sidebar-before

And will end up looking like this…

sidebar-after

So let’s get to work.

First we need to modify our functions.php file so that WP knows we have another sidebar we want to add widgets into. Find this bit of code in your functions.php file…

if (function_exists('register_sidebars')) {
	register_sidebars(2, array(

And change the ’2′ to a ’3′ so that you have this…

if (function_exists('register_sidebars')) {
	register_sidebars(3, array(

Save the file. Now WP will will know that we have 3 dynamic sidebars.

3-widgets

Next we’ll modify the index.php file to add the new sidebar. So open your index.php file and look for this bit of code…

<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>

Then we’ll add this code directly above the first sidebar include…

<div class="sidebar3">
<?php if (!art_sidebar(3)): ?><?php endif ?>
</div>

Now you index.php should look like this…

</div> <!-- This is the closing DIV for content/art-content -->
<div class="sidebar3">
<?php if (!art_sidebar(3)): ?><?php endif ?>
</div>
<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
</div> <!-- This is the closing DIV for contentLayout/art-contentLayout -->
Notice: Make sure the new code stays within the correct DIV otherwise the result won’t be what you expect. Pay attention to lines 1 & 7 above. Also this mod is for a theme with the sidebars on the right. If your sidebars are on the left, it’s the same code except the sidebars are right after the opening DIV of contentLayout/art-contentLayout.

We’re going to call it sidebar 3 even though it’s above sidebars 1 & 2 just to keep it simple.

If you want the new sidebar to appear on all of your pages, you need to do the same mods to the pages.php, single.php, archives.php and archive.php files. Plus any page template files you’ve created.

The last thing we have to do is add some CSS to get it oriented properly. This is where things may look a little different depending on what version of Artisteer theme you’re working with.

Find the sidebar code in your style.css file. My code looked like this…

.contentLayout .sidebar2
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 199px;
}

Newer versions of Artisteer will have “art-” in front of everything. So make sure you adjust the code according to your version. Anyway, just copy one of the sidebar chunks of code and paste it right after it. Then rename it from “.contentLayout .sidebar2″ to “.contentLayout .sidebar3″. You also need to change the width of sidebar 3. Just add up the width of sidebar1 and sidebar2 to get your new width.

Your new sidebar3 CSS will look something like this (your width will probably be different)…

.contentLayout .sidebar3
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 409px;
}

Save your file and your done.

When you go to your widget panel you should now see “sidebar 3″. If you don’t have any widgets assigned to “sidebar 3″ then everything will look like it did before the modification.

If you have any questions or need some help, just leave a comment and I’ll do what I can to help you out.

Disclaimer

I make no promises as to the functionality of these modifications to your theme code. Do it at your own risk. Do it on a backup copy. Do it while wide awake and after having plenty of sleep or plenty to drink, your choice. Don’t do it to your original code. Don’t do it while sleepy, cranky, or driving. And most important, don’t expect it to work the first time. If it does work the first time you probably got lucky. Besides, if you don’t break things you never figure out how they work. And last but not least…Have fun and learn something new.

  • Rick says:

    Bud:

    Just wanted to thank you again for providing excellent and use able tips on WP themes. Your knowledge and practical application of ideas is amazing. You have been extremely helpful to me personally and again I want to thank you. Keep up the tremendous work and please know that all your efforts are appreciated!

    Rick

  • You’re just so awesome!!!!

    Thanks! It worked like a charmed… and I’m one of those idiots who get tripped up with CSS styling! O.O

  • Rick says:

    Bud:

    Again Bud you are a lifesaver. I struggled with a modification I was trying to make in one of my templates. After hours of frustration I emailed you and within what seemed like minutes you had the answer for me.. You are a master at WP.

    Thanks again,

    Rick

  • Pete says:

    Hi,

    I just tried it and it works great in IE8 but in firefox the content disappears and the two sidebar columns shift from the right to the bottom left of the page.

    Any ideas on where I might be going wrong?

    Also, any pointers on where to insert code in other areas of WordPress. EG. Footer, above/below content etc.

    Thanks for the great info!

    Pete

    • admin says:

      Make sure that you don’t have a missing or extra DIV somewhere. Sometimes when you copy/paste it’s easy to get something out of whack. If you still can’t get it right use the contact form to get in touch with me directly.

      Bud

  • Herfia says:

    Great solution for me….
    Thank’s……

    That’s work……..

  • Adeptris says:

    Another function I was looking for!

    Regards

    David

    (Thanks for your help with the headers)

  • Paloma says:

    Apologies do not speak Castilian … I use a translator.
    I am very interested this function, but only works with IE.
    With Firefox and Opera do not work
    Thanks

    • admin says:

      You may have a DIV in the wrong place or even missing. IE may just be masking the problem. If it works in IE it almost has no choice but to work in the other browsers. I suspect a closing DIV is not correct.

      Bud

  • LC says:

    Hi

    your site is awesome! I wanted to you if you can help with adding the sidebar 3 in the style sheet. I’m using artisteer 2.0 and mine doesn’t have

    .contentLayout .sidebar3 {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 409px;}

    the only thing remotely similar is this:

    /* begin ContentLayout */
    .art-contentLayout
    {
    position: relative;
    margin-bottom: 6px;
    width: 982px;
    }
    /* end ContentLayout */

    other than that it does make mention of content layout or sidebars. other than that everything else is the same. Im a super novice at this so please help, thanks!

    • admin says:

      You’re not looking for “.contentLayout .sidebar3″ in the style.css file. You want to add that piece of CSS in with the rest of your sidebar CSS code.

      Don’t forget to use the “Copy to clipboard” function in the code examples above or you’ll end up with a bunch of extra junk.

      Bud

  • Gilson says:

    Hello.

    And how add extra column in a Blogger Theme, any idea?

  • Ray says:

    Hey, thanks for all of the great tutorials. I’m stuck at the moment on this one however. When I follow the instructions my sidebar goes across the whole top of the page.

    After I couldn’t get it to work, I tried some things and ended up adding a sidebar3.php template path. That made the sidebar the right size, but it’s not appearing where I want it to be. It’s showing up under my posts and not on the regular sidebar. My website is http://rshotspot.com – hopefully you can help me out.

    Ray

  • Ray says:

    I figured out how to change the sidebar like how you have it in this tutorial. I managed to get the sidebar template file to show in the right place.

    Once I figure out exactly what I did I’ll come back here and post a comment with the methods I used.

    Ray

    • admin says:

      Sorry I didn’t get back to you right, I was out of town for a bit. Glad you got it working.

  • Lady L says:

    Hi! Love this tutorial! but I need help, after i added the large sidebar the 2 sidebars disappear in firefox. when I put stuff into the the sidebars they default into the footer sidebars that ive also added. however in IE it works just fine. Do you have any ideas? thanks!

    • admin says:

      Usually it’s the other way around with things working in FF and not in IE. The most likely problem is a mis-placed DIV or a CSS class not named properly. If you’ve tried everything and still can’t get it to work then use this contact form (http://budstechshed.com/file-upload) to send me your zipped theme files and I’ll have a look at them.

  • MaAnna says:

    Bud, thanks for a great tutorial. I got it to work by following your directions and then creating a new template file for it based on sidebar2.

    I recently upgraded Artisteer to the 2.4.0.24559 version, and now in the style.css file, it gives the content and sidebar areas in percentages instead of pixels. I’m calculating the correct percentages for the wide sidebar just fine. I can even change everything to actual pixel widths without error.

    The problem is, now the new wide sidebar appears beside the other two columns instead of above it. It all retains the correct percentage or pixel count, just isn’t placed correctly.

    Since it was working okay in the older Artisteer version, I’m assuming there is some other code that needs changing to keep the sidebars in alignment vertically.

    Have you run into this yet? Thanks for your help.

    • admin says:

      The problem is with the new version of Artisteer. It does the layout in a completely different way by using CSS table properties for the main content/sidebar areas. Since it’s a beta version they could change the way they do things when it’s finally released. At thins point I’m waiting for the final version before I make too many mods to 2.4 themes.

  • Greg Shaw says:

    Love your site, I use Artisteer and highly recommend it. Fantastic bit of software for any web site developer to have :)

  • Erik says:

    Awesome tutorial – thanks. I’m having a problem though – the new sidebar 3 is appearing “behind” sidebar 1 & 2 (actually it might jsut be sidebar 1 – I can’t tell). Before being directed to this page I was trying to paste the code into the theme php file without using a sidebar and got the same results, so I’m guessing it’s something screwy with Artisteer and not an error per se on my part. Any idea what might be causing this to happen? My CSS is limited…I’ve tried clearing the div before but that didn’t work.

  • Meg says:

    Followed your tutorial, I’m getting there! But it seems like Sidebar 3 doesn’t push down Sidebar 1 and Sidebar 2, so I have all three Sidebars crammed at the top. I have changed percentages but its only for width. Ideas?

    Needless to say, thanks for all the tips! And your help!

  • admin says:

    This tutorial is for v2.3 or older of Artisteer. They made some major structural changes in the theme for the content and sidebars. This technique won’t work if you’re using Artisteer 2.4. I just put up a tutorial on doing this with the latest version of Artisteer.

  • Gianni says:

    I have tried this and it does not seem to be working on my wordpress site…I have 2 sidebars with 8 widgets in and a dynamic footer with 3 widgets in…is there a limit for sidebars/widgets? I appreciate your help. your tutorial are always really good, I was surprised when this one did not work!
    Thanks

    • admin says:

      The problem could be if you try to create a new sidebar area with a number of widgets assigned to existing sidebars. That can cause conflicts. When adding new sidebar areas or switching themes it’s best to reset all the sidebars back to default and start over.

      Depending on how you assigned you dynamic footer there could be a conflict.

      I use a plugin called ‘Widget Reset’ to reset all my widgets whenever I make big changes. Although it’s a pain when you turn off all your text widgets with ad code in them and have to start over.

Awesome Themes



Genesis Framework for WordPress

Favorite Random Quotes

“Ancient Rome declined because it had a Senate; now what's going to happen to us with both a Senate and a House?”

by Will Rogers