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.

Kubrick is a widget enabled theme which means that there are loads of optional things that we can include on the sidebar with no effort on our part and gives the theme user a whole lot of control over how the sidebar will look. That bit works automatically and we don’t need to change the code.

However, Kubrick also includes an options page which we will be changing substantially in due course. First off though we need to change everywhere it says “Kubrick” or “kubrick” to “SevaTeem” so that everything that used to work is included within the theme. That also means renaming the images from “kubrickxxx.jpg” to “SevaTeemxxx.jpg” although in practice we’ll not be bothering too much with them for a while as SevaTeem will be more limited than Kubrick in some respects in this area eg we’ll only be offering a choice of a full-screen background image and one that is the background to the header.

Making these changes doesn’t change how the theme looks but is step one of the real work in implementing the theme.

Before you get carried away writing in all kinds of options to a new theme, it’s as well to look at what options are already available through the use of various plugins.

For example, I was thinking of including the option of having social bookmarking links on the posts but, of course, that’s not necessary as the Sociable plugin does it already. Likewise, it’s not necessary to let people add a copyright message as that’s handled admirably by DDSig.

Certainly, before you start off adding loads of options to a theme it’s best to check what’s available already in the form of plugins. That’s not to say that you can’t add them in as optional components in your theme (I’ll probably buildin the functionality of DDSig for instance) but you wouldn’t want to be doing something like Sociable which obviously needs updated on a regular basis.

At first glance, this seems to be amongst the easier things that you can do.
All you need to do is to change the “width: 760″ to “width: 60%” and you’re done although it’s best to change the width of the sidebars to 20% too.

The problem is that we’re using a full page background image and the text now flows all over it. As you can see from the image here, the sidebar text is unreadable.

There are several ways to correct this:

1. change the image either by selecting a new one or manipulating the current one;
2. change the colour of the sidebar text;
3. put a solid background colour behind the sidebar; or
4. reduce the width of the main column.

For simplicity, we’re going to go for the last option at the moment and reduce the width from 60% to 40% which restores the look to that of the fixed width version.

To get the background image applied across the whole page, you need to dive into the CSS and remove all the sections that kill it off by specifying the the background image is set so some specific colour. You also need to set the margin and padding to zero for the page as otherwise there’s an annoying offset effect where the central column is a little bit lower than the two columns to the side.

Next is to go to the header.php file and mark the background as “background-attachment: fixed” which has the effect that the text scrolls but the image stays in a fixed position on the screen. Another option would be to create a horizontal image that repeats below the main background image and I’ll be looking into that in due course.

This is the first time that we’ve looked at the use of styling within a PHP file and it’s a good deal more powerful than styling within the normal style.css file since we can use parameters. In fact, we’ll be moving more and more of the style sheet into a PHP file as we go along as I want this stylesheet to be fully configurable. It’s possible to do that by writing a new style.css file via a configuration menu but that’s pretty messy and requires the end user to do a bunch of stuff that they shouldn’t need to get involved with which is why there will eventually be a style.php file for this theme so that the users of it will be able to do things like changing the colour, background image and so on very easily.

The stylesheet is at the core of establishing the look and feel of a Wordpress blog.

Simply by playing around with the stylesheet you can make radical changes to the overall look of the blog very easily. For example, step one of my adventure in creating a new theme here was to start with the basic Kubrick theme that’s the default used by Wordpress and change the background.

I’m ultimately intending to have a background photo that is behind everything in the content screens which meant stripping out a lot of the “background-color” lines within the Kubrick stylesheet and replacing the references to the various Kubrick images to background.jpg. I’d to add “margin:0 and padding:0″ to the body style to remove the annoying little offset effect that you get when the central column isn’t quite lined up with the left and right ones. The Kubrick theme also refers to the background image within header.php so that needed to have two lines changed.

It’s way too much hassle to design a new theme and use it on the main blog so this blog will be serving as the testbed for my new theme. That probably means that it’ll look pretty weird a lot of the time!

Anyway, here goes with the SevaTeem theme…