Month: February 2008

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

• WordPress Sidebar Widget Sandwich
• WordPress: Add a Second Widget-Ready Sidebar
• Wide Sidebar and Header for WordPress Default Theme

This tutorial will cover adding several “sidebars” to sidebar.php using simple “if” statements, and where to place unwidgeted content in the same file. This is a first step to my next tutorial, which will present some ideas for how to style a wide, widgetized sidebar.

Mixing widgetized and unwidgetized sidebar content can be confusing. Once in a while there is a script or a plugin that is not available as a sidebar widget, or a widget that is a hassle to reproduce as unwidgetized code. Sandwiching a few widgets between unwidgetized content lets you use both flavors as needed.

1. Step One: Add more sidebars to functions.php
2. Step Two: Add extra “sidebars” to sidebar.php
3. Step Three: Understand where to put unwidgetized content

Step One: Add more sidebars to functions.php

Adding the example code below to functions.php allows for three “sidebars.” The code to add a sidebar to funtions.php is the same if a sidebar is an include or if it is called by an “if” statement as in my example sidebar.php contents in step two. To help with styling later, have used an array that adds an ID and class named for each widget used.

The number in the register_sidebars line is equal to the number of sidebars that will show up at Presentation > Widgets. Dragging widgets into those sidebars won’t have any effect unless each specific sidebar also appears somewhere in your template.

 

if ( function_exists('register_sidebar') ){
  register_sidebars(3,array(

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

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

 
',
  ));
}
 

Step Two: Add extra “sidebars” to sidebar.php

I like to add an extra “sidebar” or two to sidebar.php, when I am first setting up a theme. This gives me flexibility down the line. If the building blocks are already in place, I won’t have to re-think anything if I later need to mix widgeted and unwidgeted content. Note that additional “sidebars” won’t show up in Presentation > Widgets unless there is corresponding code in funtions.php.

Using an “if” statement means that “sidebars” without active widgets won’t show up in the generated page, unless there is alternative code before the php endif of that “sidebar” – see “Heading” under !dynamic_sidebar(1) below.

If widgets are active for a “sidebar,” alternative content before the php endif of that sidebar won’t show. That makes for a handy place to leave myself notes that I don’t want to show in the generated page.

Though !dynamic_sidebar() gives the the same result as !dynamic_sidebar(1), once I have more than one sidebar I like to add the “1” to help me remember that there are more than one of them.

Example content for a sidebar.php file:

 
<div id="sidebar">

<ul>
 
   <?php /* Widgetized sidebar. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>

<li>
<h2>Heading</h2>
<ul>
<li>list item</li>
<li>list item</li>
</ul>

</li>
 
   <?php endif; ?>
 
   <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>

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

   <?php endif; ?>
</ul>
</div>
 

Step Three: Understand where to put unwidgetized content

Still in sidebar.php, find the start and end of each “if” statement. You don’t have to know what an “if” statement is, or how to write one. All that’s needed is to learn to recognize where they start and end.

These “if” statements say are that “if” there is a “dynamic_sidebar” then widgets active in whichever numbered “!dynamic_sidebar” should be used, followed by closing the “if” statement with an “endif.” A “sidebar” with active widgets will only show widgets. Unwidgeted content between a pair of “if” and “endif” will only show when the “sidebar” referred to by that particular “if” statement has no active widgets. So, basically, unwidgetized content needs to go before the “if” and after the “endif.”

In the illustration below, I placed “This line…” in between list item tags because standard widgets will generate navigation lists. When setting something up, formatting notes to myself using (x)html that will coordinate with the with the rest of that area helps me to stay organized.

Another look at sidebar.php:

 
<div id="sidebar">
<ul>
<li>This line will show, regardless.</li>

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

<li>This line will NOT show when the first sidebar has active widgets</li>
 
   <?php endif; ?>
<li>This line will show, regardless.</li>
 

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

<li>This line will NOT show when the second sidebar has active widgets</li>
 
   <?php endif; ?>
<li>This line will show, regardless.</li>
</ul>

</div>