Anna Linnea

I recently got a question about how to set up a Wordpress theme with three sidebars and a content column, and since that’s not an uncommon idea but a bit tricky to figure out how to do when you’re new to Wordpress I thought I’d answer in the form of a blog post and maybe help mor than one person.

Read more after the jump!

I’ll be using my own WP Blank theme to show you how to do this and what we will create is a layout that looks like this: sidebar | sidebar | CONTENT | sidebar.

Defining sidebars

First we need to make sure that we have 3 sidebars defined in the theme function.php-file. Open it up an look for this:

<?php
if ( function_exists('register_sidebars') )
register_sidebars(2, array(
'name'=>'Sidebar %d',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
?>

The highlighted piece of code is where it’s defined how many sidebars there are in this theme. Naturally you change this into 3 and voilá; you have an extra sidebar. In terms of keeping your PHP-code clean this is the best way to do it, but it might be a bit confusing once you’re in the widget-area in your admin-panel.

So we are going to name these sidebars instead and this is going to generate a bit more code in functions.php. You can replace the first piece of code (shown above) with this:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Sidebar Left',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
)); ?>
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Sidebar Middle',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
)); ?>
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Sidebar Right',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
)); ?>

I’m quite sure you can figure out what the sidebars are going to be named now…?

It will look something like this in the admin section now:

Creating the sidebars

To get the sidebars to show up we now need to define them in the theme files. There are a number of different ways to do this and the way I’ll show might be a bit “clumsy” and old school, but in return it’s easier for beginners to understand just what it is they are doing this way. What we’ll do is create three different .php-files, one for each sidebar.

Open up the existing “sidebar.php” and replace all the code in it with this:

<div class="sidebar-wrap">
<div class="sidebar" id="sidebar_left">
      <?php	/* Widgetized sidebar */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>    

			<?php endif; /* End of widgetized sidebar */ ?>
</div>
</div>

Next, duplicate that file and name it “sidebar2.php” and make the highlighted changes:

<div class="sidebar-wrap">
<div class="sidebar"  id="sidebar_middle">
      <?php	/* Widgetized sidebar */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>    

			<?php endif; /* End of widgetized sidebar */ ?>
</div>
</div>

And finally do the same thing once more, naming it “sidebar3.php” and setting the id to “sidebar_right” and the “dynamic_sidebar” to 3.

Now you have three different files named sidebar.php, sidebar2.php and sidebar3.php and every one of these will contain one of the three sidebars you defined in functions.php.

Executing the sidebars in your theme

No reason having a bunch of sidebars if nobody sees them, ey?

To place your newly created sidebars we’ll use index.php as an example. Open it up and look for:

<?php get_sidebar(); ?>

Comment that out (or remove it) and replace it with

<?php include('sidebar3.php'); ?>

Then you move to the beginning of index.php and directly under

<?php get_header(); ?>

you’ll put:

<?php include('sidebar.php'); ?>
<?php include('sidebar2.php'); ?>

Now it’ll look something like in the screenshot below and that means we’re half way there, all we need to do now is tell the css-code how we want the sidebars placed.

Positioning the sidebars with CSS

To do this we’ll use the css id’s we specified earlier: sidebar_left, sidebar_middle and sidebar_right. If you are using the WP Blank theme open up style.css and look up where it says

@import url("layouts/sidebar_left.css");

and change this to

@import url("layouts/sidebar_3.css");

(or whatever you want to call your new stylesheet) and then create a new, empty stylesheet in the layouts-folder.

Add this code to place the columns in the order I showed you in the beginning of the post (sidebar | sidebar | CONTENT | sidebar) and make the sidebars 150px wide and the content column 450px:

#sidebar_left {float:left; clear:left;width:150px}
#sidebar_middle{float:left; clear:none;width:150px}
#sidebar_right {float:left; clear:right;width:150px}

#wrapper {width:913px; margin:0 auto}
.posts-wrap {float:left; clear:none;width:450px}
#footer,#header {float:none;clear:both}

And now your theme should look like this:

Of course you can change the look of this layout, but that’s a whole other tutorial!