Styling Wide Widgetized Sidebars, Part I

There are two general approaches to styling a wide, widgetized sidebar: fill one dynamic_sidebar with individually styled widgets, or fill a sidebar container with several instances of dynamic_sidebar. Though perfectionists and geeky control freaks will appreciate the control of individually styled widgets, for pure speed and simplicity the multiple dynamic_sidebar path is hard to beat.

This tutorial will walk you through creating a sidebar container filled with several, widgetized dynamic “sidebars.”

  1. Step One: Add more sidebars to functions.php
  2. Step Two: Set up sidebar.php
  3. Step Three: Styling instances of dynamic_sidebar
  4. Step Four: Bring on the widgets

Step One: Add more sidebars to functions.php

This code in functions.php will allow for the six instances of dynamic_sidebar required by this tutorial. Background information about this code can be found in other tutorials listed at the end of this entry.

 
if ( function_exists('register_sidebar') ){

  register_sidebars(6,array(
    'before_widget' => '
<li id="%1$s" class="widget %2$s">',
    'after_widget' => '</li>

 
',
    'before_title' => '
<h2 class="widgettitle">',
    'after_title' => '</h2>

 
',
  ));
}
 

Step Two: Set up sidebar.php

This sample content for sidebar.php will create locations for six instances of dynamic_sidebar. Retaining the list structure as suggested here will create a hierarchical navigation list. You’ll also see that I’ve created three classes: .widebar, .leftbar and .rightbar. Because IDs are meant to appear only once in a page, classes are the better choice in this case.

These newly minted sidebars won’t show up until widgets have been dragged into them.

 
<div id="sidebar">
<ul>
 
<!-- begin widebar -->
<li class="widebar">
<ul>
<?php /* Widgetized sidebar. */

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>

<?php endif; ?>
    </ul>
</li>
 
<!-- finish widebar  and begin leftbar -->
<li class="leftbar">

<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>

        <?php endif; ?>
    </ul>
</li>
 
<!-- finish leftbar and begin rightbar -->
<li class="rightbar">

<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?>

<?php endif; ?>
    </ul>
</li>
 
<!-- finish rightbar and begin widebar -->
<li class="widebar">

<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) : ?>

<?php endif; ?>
    </ul>
</li>
 
<!-- finish widebar and begin leftbar -->
<li class="leftbar">

<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(5) ) : ?>

<?php endif; ?>
    </ul>
</li>
 
<!-- finish leftbar and begin rightbar -->
<li class="rightbar">

<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(6) ) : ?>

<?php endif; ?>
    </ul>
</li>
 
<!-- finish rightbar -->
</ul>
</div>

 

Step Three: Styling instances of dynamic_sidebar

Here’s a jump start on stying, complete with crazy background colors to help you see what’s cooking. You may or may not need to add clear: right to .widebar, or a clear: left to .leftbar and a clear: right to .rightbar. A width of 100% or close to it can be added to .widebar.

Using a fixed width for #sidebar and a less-than 100% percentage for the combined width of .leftbar and .rightbar automatically takes care of some of the pickier aspects of allowing for space between columns in a confined space. If your #sidebar refuses to become as wide as width: 390px, check to see if there is enough room in your layout for a 390 pixel wide space.

 
#sidebar{
      padding: 10px 0;
      width: 390px;}

 
.widebar {
      clear: right;
      background-color: yellow; }
 

.leftbar {
      float: left;
      width: 49%;
      background-color: pink;}

 
.rightbar {
      float: right;
      width: 49%;
      background-color: lime;}

 

If using Kubrick (the WordPress Default theme) you may want to remove that theme’s odd though clever bullets.

CSS to delete or comment out:

 
.entry ul li:before, #sidebar ul ul li:before {

      content: "\00BB \0020";}
 

New styling to complete:

 
.entry ul {

      }
 
.entry li {
      }
 
#sidebar ul {

      }
 

Step Four: Bring on the widgets

Go to Presentation > Widgets and drag some widgets into your new sidebars. If you’ve used my example, Sidebars 1 & 4 will be two column wide crossbars, 2 & 5 will be lefthand columns, and 3 & 6 will become righthand columns. Some experimentation will be needed to make each “sidebar” feel like the right length. At this point you’ll want to backtrack and double check how the CSS above is working for your particular theme.

Good luck!

More on functions.php or widening Kubrick