SevaTeem

The first crack at this is quite simple really.

You add the includes for the three sidebar PHP files into the usual files (ie archive.php, index.php, page.php, search.php and single.php), create the three new sidebars in functions.php and you’re away.

That does actually work as you can see. However, there are a couple of problems which it creates. First, we have the main text running right over the dress but more importantly any empty sidebars on the lefthand side still take up space.

In fact, at the moment empty sidebars on the right also take up space but you don’t notice that as the space used is off the side of your screen but in the case of those on the left the empty space moves the main text over to the right. I’ve cheated a little in that we renamed SidebarRight1.php (the original Kubrick sidebar) as SidebarLeft1.php so that when I removed all the content from the first right hand sidebar, there wasn’t the usual default content that the Kubrick theme provides.

You’re probably thinking that I could just set the width of the left sidebars to “auto” and the problem would go away. That works to some extent but “auto” sets the width of the column to the size required by the longest string of text so it would work if the content was just the Meta stuff but doesn’t work if it’s, say, the recent posts. Also, there’s the problem of the margin: even though there is currently no content in the left sidebars, that margin is enough to shift the blog text over to the right.

To fix that problem what’s needed is to make a small change to sidebarLeft1, 2 and 3 and corresponding changes in the stylesheet to allow for a zero margin and zero width sidebar when there’s no content. You could make the same changes in the sidebarRight1, 2 and 3 but that’s not necessary as empty right hand sidebars don’t affect the layout of this theme (yet).

Whilst I’m only planning to run with two sidebars myself, it’s very easy at this point to add a lot of flexibility in courtesy of the widget facility.

So, what I’ve done is add the option to have three sidebars to the right of the text. Leaving the widgets blank will mean that they won’t appear but it gives the user of the theme the flexibility to enable them. I’ve also tidied up the naming of the sidebars so in place of the original “Sidebar 1″ and “Sidebar 2″ there’s now “Sidebar 1R”, “Sidebar 2R” and “Sidebar 3R”.

As you can see I’ve moved back to a variant of the original background image but with the image enlarged and cropped so that the girl moves further over to the right. I’ve also changed the colours of the text in the sidebars to increase the contrast with the current image and make them readable.

Next up is to look into adding a sidebar on the right. Incidently, if you’ve ever wondered why a lot of themes end up with lots of sidebars on the right, it’s because it’s the easiest thing to do.

This is surprisingly easy once you get your head around the widget facility in Wordpress.

Ultimately, we’ll be finishing up with one left sidebar and probably two on the right but the two rightmost ones will, for the moment, be identical so all you need to do to add an extra one is to edit the functions.php file and replace the first section with the following:

if ( function_exists(’register_sidebar’) )

register_sidebar(array(

‘name’=>’Sidebar 1′,

‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,

‘after_widget’ => ‘</li>’,

‘before_title’ => ‘<h2 class=”widgettitle”>’,

‘after_title’ => ‘</h2>’,

));

register_sidebar(array(

‘name’=>’Sidebar 2′,

‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,

‘after_widget’ => ‘</li>’,

‘before_title’ => ‘<h2 class=”widgettitle”>’,

‘after_title’ => ‘</h2>’,

));

Then create a very short sidebar2.php:

<div id=”sidebar”>

<ul>

<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar(’Sidebar 2′) ) : else : ?>

<?php endif; ?>

</ul>

</div>

And finally, edit index.php and single.php to add:

<?php include(”sidebar2.php”); ?>

Just after where it has <?php get_sidebar(); ?> (towards the end of the file).

Then you can go to the presentation section of the theme and add stuff into the second sidebar.

In practice, I’ve done a little more than that as I want to retain the fluid width which means changing a few fixed widths for the sidebars to percentage widths.

One other side-effect is that the second sidebar runs straight into the skirt on the original image and is unreadable, hence the change of image at this point. As you can see, this image isn’t ideal either so I’ve had to change the font to bold ’til I get a more suitable image.