As you may have seen previously in this chapter, just because you add a second or third sidebar to your theme does not mean that it will be placed where you want it in your layout.
We will adjust the layout of a two-column theme to a three-column theme with a sidebar on each side, by using only CSS, in your style.css file.
Getting ready
We will be using a basic theme customized from the WordPress Classic theme. If you are already using the Classic theme, the measurements should work precisely. You may have to adjust the width, padding, or margins from the examples in this recipe to fit your layout. We will be spending most of our time in the style.css file of the theme, so if you are unfamiliar with CSS, you may want to visit www.w3schools.com to learn more about it, as this recipe assumes a basic knowledge of CSS and stylesheets.
How to do it...
First, open up the sidebar-two.php file, or whatever file is your secondary sidebar file, in your editor. It may already have a div tag wrapped around the sidebar code that looks like:
<div id="menu">. Rename the id to <div id="menu-left"> and make sure there is a closing div tag </div> at the end of the file. Save the file.
Next, we will begin adding the positioning information to the styles.css file, so open that file up. Find the #menu{} rule and copy it and all the others below it that have #menu. The last one should be #menu ul ul ul.children {font-size: 142%;padding-left:
4px;}. There are too many to list here, but you can refer to the styles.css file included in
Paste the #menu{} rules below the closing bracket of the last #menu ul ul ul.children{}
style. Add -left to each of the newly pasted #menu style rules so that they all begin with
#menu-left.
Now adjust the declarations within #menu-left{} to add more padding, set the width and height, and align sidebar-two to the left , so that your CSS looks like the following:
#menu-left {
position: absolute;
background: #fff;
border-left: 1px dotted #ccc;
border-right: 1px dotted #ccc;
border-top: 10px solid #e0e6e0;
padding: 20px 0 10px 10px;
We now need to adjust the height, padding, right alignment amount, and width of the #menu rule that controls the positioning of the main (right) sidebar:
#menu {
position: absolute;
background: #fff;
border-left: 1px dotted #ccc;
border-top: 10px solid #e0e6e0;
padding: 20px 0 10px 30px; body, #header, and #content rules will need their declarations adjusted to make room for the two sidebars. Scroll up to the body selector. Add the declaration width:100%; to the bottom of the styles, just before the closing bracket so that the body style rule now looks like the following code:
border-bottom: 1px solid #565;
border-top: 3px solid #565;
color: #000;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
margin: 0;
padding: 0;
width:100%;
}
The #content styles now need their padding, margin, and width adjusted. Adjust the margins and padding, and add a width declaration as shown in the next block of code:
#content {
The #header styles are in the last section of the style sheet that needs adjusting, in order to control the positioning of the sidebars. Add a width selector of 25.5em, change the border-top to none and set the padding declaration to 20px 40px 20px 60px as shown in the code example below:
#header {
background: #333;
font: italic normal 230% 'Times New Roman', Times, serif;
letter-spacing: 0.2em;
margin: 0 6em 0 5em;
padding: 20px 40px 20px 60px;
width:25.5em;
border-bottom: 3px double #aba;
border-left: 1px solid #9a9;
border-right: 1px solid #565;
border-top: none;
}
Save and then upload the secondary sidebar file (sidebar-two.php) and the style.css file.
When you view the result in your browser, the blog should now look like the next screenshot:
How it works...
In a basic WordPress theme, the #menu or #sidebar styles control the positioning of the sidebar on the screen. Adding a secondary div to control the secondary sidebar, and making adjustments to the layout creates an area for the secondary sidebar, and gives the theme user greater control over the layout. The style.css file controls the presentation and positioning of the objects within the screen, including the posts, widgets, header, footer, and sidebars. First, we added a new div style to the secondary sidebar in its sidebar file, assigning that CSS style to the sidebar. Then, the new style rule was created in the style.css file that told WordPress the height, width, and location of the sidebar within the layout. The positioning for the other key elements, primary sidebar, header, and content area, also had to be adjusted.
There's more...
You can make room for additional sidebars, or have one sidebar be wider than the other, depending on how you adjust the width, margins, and padding of the styles in your styles.css file, and how you apply them in the other files of your theme. Also, check the .feedback class and .story class in your stylesheet, as you may have to adjust padding in those as well.
Position: absolute versus float
We kept the sidebar styles set to absolute positioning in order to keep this recipe focused on its core purpose: adjusting the layout of the sidebars. In most cases, you will want to explore using the float property, as this gives you more options as a designer, and allows your layout to be flexible instead of fixed.
Doing more with design and layout
If this recipe sparked your interest in doing more positioning actions through the use of CSS in your theme, you will want to visit the Blog Design and Layout section of the WordPress codex, at http://codex.wordpress.org/Blog_Design_and_Layout.