sidebarSidebars don’t belong in the sidebar area anymore. In fact they shouldn’t be called sidebars but widgetized areas. Unfortunately Artisteer’s naming system is sidebar(1) to sidebar(x). Doesn’t mean much to me when it’s in the footer.

Here’s how I changed the sidebars to more descriptive names. I’ve included five sidebars, you can have more or less. It’s up to you. You can change the names to anything that makes sense to your theme.

Well, here goes…

Find this code in functions.php

if (function_exists('register_sidebars')) {
	register_sidebars(2, array(
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->' . '</div>'
	));
}

Replace it with this code. You can name the sidebar whatever you want, just remember no spaces or other special characters (to be safe). You can have as many as you want. I do know that this works so don’t change anything except the name of your widget. Your widget name is in single quotes after ‘name’=>. If it doesn’t work or breaks your code then you made a typo or left out a quote.

    if ( function_exists('register_sidebar') )
    register_sidebar(array('name' => 'sidebar1',
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'
	));

    if ( function_exists('register_sidebar') )
    register_sidebar(array('name '=> 'below_featured',
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'
	));

    if ( function_exists('register_sidebar') )
    register_sidebar(array('name' => 'footer-left',
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'
	));

    if ( function_exists('register_sidebar') )
    register_sidebar(array('name' => 'footer-mid',
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'
	));

    if ( function_exists('register_sidebar') )
    register_sidebar(array('name' => 'footer-right',
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'
	));

Now the fun part.

To replace an existing Artisteer side bar function, find this code in your sidebar.php…

<?php if (!art_sidebar(1)): ?>

and change it to something like this…

    <?php if (!art_sidebar('below_featured')): ?> <-- Don't forget the single quote -->

To put a new sidebar somewhere just insert the following code. Just wrap it in a DIV statement so that you can style it. You don’t have to do much, just set some size and position stuff and Artisteer’s default styling will take care of the rest. Artisteer’s sidebar style looks quite good so I chose to use their style instead of creating my own.

    <div class="homepageamazon"; ><-- whatever class name you want -->

        <?php if (!art_sidebar('below_featured')): ?><?php endif >

    </div>

Here’s my CSS code to style the above for my center content sidebar on one of my other sites.

.homepageamazon  {
       clear:both;
       float: left;
       width: 640px;
       margin: 0px 0px 0px 0px;
       padding: 0px;
       }

For the above widget, I just enabled a text widget in the ‘below_featured’ widget position and pasted my Amazon widget code. Easy, instant widget area.

If you’re changing an existing Artisteer side bar (sidebar(1)) you don’t need to do any styling just change the name.


UPDATE:

Since a couple of people have asked, here is the code I used to put three widget areas above the footer area.

1. Create a file called ‘footer-bar.php’ and put the following code in it…

<!-- Footer Bar Code Start -->
<div style="float:left;width:1000px;background-color:#343932;">
<!-- Footerbar -->
<!-- Left panel -->
<div style = "clear:both;"></div>

<div class="sidebar-footer-left">
<?php if (!art_sidebar(footer-left)): ?><?php endif ?>
</div>

<!-- Center Panel -->
<div class="sidebar-footer-mid">
<?php if (!art_sidebar(footer-mid)): ?><?php endif ?>
</div>

<!-- Right Panel -->
<div class="sidebar-footer-right">
<?php if (!art_sidebar(footer-right)): ?><?php endif ?>
</div>

<!-- Footer Bar Code End -->
</div>

Line 2 above sets the width and background color of our new div. Change the values to fit your theme.

2. The put the following at the end of your style.css file…

.sidebar-footer-left
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 333px;
  height:367px;
}
.sidebar-footer-mid
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 333px;
  height:367px;
}
.sidebar-footer-right
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 333px;
  height:367px;
}

The width and height of each div will need to be changed depending on your theme.

All that’s left is to add the following code to the very top of your footer.php file…

<!-- Footer bar -->
<?php include (TEMPLATEPATH . "/footer-bar.php"); ?>
<!-- end Footer bar  -->

Line 3 above is the ending div for ‘Sheet-Body’ (or some other name depending on your version of Artisteer).This ending div may appear at the end of the index.php (and archive.php, single.php page.php etc) in later versions. So if it doesn’t work, start looking for the proper div. It’s also very important to use a good text editor, like Notepad++ (for Windows) as it will help you identify closing elements by highlighting them.

NOTE: These mods were done on a theme created with a very early version of Artisteer. Some of the div names that are now used will be different but the basic ideas still works. Your theme dimensions will probably be different so you will have to play around with the sizes and colors of the different properties. Also remember that there are many ways to do this and what I have done here worked for me with what I was doing at the time. Everyone’s themes are different and not all mods work exactly the same as presented (especially as new versions of Artisteer are released). So don’t get discouraged, just keep at it. Persistence pays off.


Also, just to be safe, turn off all widgets that may be on before you activate the theme.

Well, that’s it. Hope it was clear enough for everyone.

Important: Backup your files before modifying them. Use a text editor not Word. Don’t use the WordPress theme edit function as it doesn’t save your old work. If you break something it can be a pain to get things back the way they should be. And last but not least Have Fun and learn something new today. If all else fails ask questions.

  • Jessamy says:

    thanks so much for this!

  • Joe says:

    I am a Bud fan! This tutorial is Rock n’ Roll! No doubt, I’ll have questions, but dude this rocks!

  • Joe says:

    This Tutorial is great. Its already help me add an extra widgetized are to my web-blog @ http://www.j-reilly.com . Recognize the theme ? Right now this is a sort of learning/catch all sight for me. The aim of the home page as it is, is to work on it until it is customized enough to be my browsers home page. The site overall, is still unclear. I’ve only been using wordpress 4 months, and i have alot to learn.
    Honestly, this tutorial is still a bit too tough for me. I’m there, needing , or wanting to do what it lays out, but I have some more basic areas to clear up first.
    How do I style the new “sidebar” area, and if i wrap it with a to style it, does that correctly size, and orientate the widget area? I understand my terms might be screwy.
    I credited your site on my home page.

  • Joe says:

    I got this error when tying.
    *\\*Parse error: syntax error, unexpected ‘=’, expecting ‘)’ in /home/content/p/a/n/panoptican/html/wp-content/themes/jreilly/functions.php on line 80*\\*

    what to do?

    • admin says:

      Line 80 is the sidebar function (in the Green Envy theme). If you made any changes to the sidebar function code, you may have gotten it goofed up. Hopefully you made a backup of the functions.php file so you can compare the code and possibly see where the error is.

      If you can’t figure it out send me a message via the contact form and I’ll see what I can do for you.

  • gweedo says:

    Awesomeness.. This just saved some time…

  • sallory says:

    thnx alot!
    i will try it & show you the result
    thnx Again :)

  • sallory says:

    Howdy!
    I passed the first step & add the sidebars in the panel of wordpress
    ,but i can’t add the widget in the footer , like you in :
    http://mycreditrepairhelper.com/
    plz tell me what I have to add to footer file and where
    I’m waiting your response :)

    • admin says:

      I updated the post and showed how I added the footed widgets on the other site. I hope it helps.

      Bud

  • Becky says:

    Thanks for much for the tutorials. Great help! Keep up the good work..

    I just have a quick question about the footer widgets update. I did all of the steps listed. And I can see the “empty box” above the footer. But now how do I get my widgets to show up there? I went to my WP Admin Widgets page and still only see one sidebar… is this correct?

    To see the page I have this on go to:
    http://www.bubblegumdesigns.net/blog/

    Thanks again for your help! =)

  • Becky says:

    Nevermind! I had forgotten to change some of the code above. =)

  • Becky says:

    OK, I’m back. I don’t know what I am doing wrong? It appears to be set up correctly. I have the Sidebar1, Sidebar2, and footer-left, footer-middle, footer-right boxes in my Widgets WP control banner. But the widgets are not showing up on my page. Any ideas or suggestions?

    http://www.bubblegumdesigns.net/blog/

    • admin says:

      Did you make the file ‘footer-bar.php’ and add the php call at the top of your footer.php file?

      If you’re using the 2.4 version of Artisteer you should only have to add this to the top of your footer file…

      < ?php include (TEMPLATEPATH . "/footer-bar.php"); ?>

      I also made a small change to the footer-bar code above.

      Bud

  • Christine says:

    Same problem as Becky. Every thing is in but no luck getting the widgets to show up.

  • Christine says:

    Really not trying to bug you but I got it to work. Not sure if this will help anyone else. Artisteer 2.302 this works check the site http://almoststealing.com

    my solution is here
    http://pastebin.com/6cg89gM4

Awesome Themes



Genesis Framework for WordPress

Favorite Random Quotes

“You may deceive all the people part of the time, and part of the people all the time, but not all the people all the time.”

by Abraham Lincoln