SevaTeem

As you may have noticed, the content of the left sidebar has been displayed above the header for the last few posts.

That’s basically down to an attempt at laziness which didn’t work. I thought that I’d get away with adding the styling for the left sidebars in header.php but that left me with a copy of the sidebar above the header so I ended up having to put the optional styling in sidebarLeft1.php, sidebarLeft2.php and sidebarLeft3.php. At the moment there’s no need to add similar coding into the right-hand sidebars as they don’t affect the layout of the screen whether or not they have content.

The code required is really simple and basically amounts to setting margin-left to either 2% or 0 and the width to either 10% or 0 depending on whether or not the relevant sidebar has any content.

That’s the sidebars pretty much fully sorted out now although I might return to them later and make that 10% width a calculated one so that the body of the text plus all enabled sidebars add up to 100% of the screen.

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).

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.