When Artisteer 2.4 came out some of the usual techniques for styling the page changed. Especially when dropping a wide sidebar area over an existing double sidebar. The folks at Artisteer decided to change how the page was styled by using the dispay:table selector. That was a real head scratcher because I can’t remember ever seeing it used in that way. After playing around for a bit I gave up because I had better things to do. Anyway about an hour ago I was doing something completely unrelated and all of a sudden the light bulb came on. It was a 10 minute job and I had a working wide sidebar.

So without anymore fanfare, here it is…

Create and export a theme with a double sidebar.

Open the functions.php file and change register_sidebars from 2 to 3.

if (function_exists('register_sidebars')) {
	register_sidebars(3, array(
		'before_widget' => '<div id="%1$s" class="widget %2$s">'.'<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'.'</div>'
	));
}

Make backup copies of your sidebar1 and sidebar2 files in case you want to go back.

In sidebar1.php change the first line from this…

<div class="art-layout-cell art-sidebar1">

To this…

<div style="width:50%;float:left;">

Do the same thing for the sidebar2.php file. The width I split equally but you could make one bigger than the other as long as they equal 100%.

Next open your index.php file and find the includes for the sidebars. You are going to replace this..

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

With this…

<div class="art-layout-cell art-sidebar1" style="width:40%;">
<div style="width:100%;float:left;">
<?php if (!art_sidebar(3)): ?><?php endif ?>
</div>
<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
</div>

The width percentage on line one should be the total of sidebar1 and sidebar2 from your style.css file. I left the art-sidebar selector in in case a background color or image was used.

Basically what I did was move the art-layout-cell from the sidebar files and created a new div to wrap all of the sidebars in.

The new sidebar3 won’t appear until you place a widget into it from the dashboard.

I left all of the styling in the DIV’s instead of creating classes and adding them to the style.css file because I was too lazy ;-) . That will be for another day.

Load up your theme and see if it works. If does then make the same changes to the single.php, page.php, archive.php, search.php and 404.php files as you did for the index.php file. If it doesn’t work then someone did something wrong.

Here’s the result with a randomly generated Artisteer 2.4 theme…

wide-side

Give it a try and let me know what you think.

  • Carmel says:

    Hi Bud,

    Thank you for updating this, very much appreciated.

    I did find that I had to increase this percentage below to 100% when I put the code into the index.php and the page.php

    otherwise it had the two sidebars sitting almost on top of each other.I’ve only tried it on the one site so far.

    Once again, thank you very much.

    Cheers
    Carmel

  • Carmel says:

    Sorry, the code disappeared it is the first line, the div style width 40% for the index.php page had to make it 100%

    Cheers
    Carmel

  • Nturn says:

    Thanks, for this tutorial.I tried several times and it keeps placing right under the content area. I tried playing with tags and still can’t get it to move to the right.

  • admin says:

    Sorry, I didn’t get all the code pasted in properly on that last chunk of code. My bad! It’s been fixed and should work correctly now.

  • Vincent says:

    Hi Bud,
    Thanks for your tutorial, it work like charm!
    If possible this apply to the footer? Like 3 sidebars in the footer?

    • Vincent says:

      Hi Bud,
      Sorry, my bad as did not notice the similar post.
      I seen your another post about the 3 sidebars the footer.

      I implement with above method, it work nice indeed and even easy.
      To make look fairly, put 33.33% on each sidebars.

      Thanks.

  • Vincent says:

    Hi, finally i figure it out.
    If anyone find the top sidebar moving to the right is because of css issue.

    Thanks once again. I like your tips and hope can share with you.

Awesome Themes



Genesis Framework for WordPress

Favorite Random Quotes

“A vote is like a rifle: its usefulness depends upon the character of the user.”

by Teddy Roosevelt