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

WordPress Sidebar Widget Sandwich

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>

 
',
  ));
}
 

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>
 

WordPress Urgent Upgrade

Two days ago WordPress announced an urgent security update.

WordPress 2.3.3 is an urgent security release. If you have registration enabled a flaw was found in the XML-RPC implementation such that a specially crafted request would allow a user to edit posts of other users on that blog. In addition to fixing this security flaw, 2.3.3 fixes a few minor bugs. If you are interested only in the security fix, download the fixed version of xmlrpc.php and copy it over your existing xmlrpc.php. Otherwise, you can get the entire release here.

Also, there is a vulnerability in the WP-Forum plugin that is being actively exploited right now. If you are using this plugin, please remove it until an update is available from its author.

Since we are talking security, remember to use strong passwords and change them regularly. While you’re updating WP and your plugins, consider refreshing your passwords.

From WordPress

Don’t you just love YouTube? I found this after searching for “wordpress upgrade.”

Upgrade Advice

Deactivate plugins before upgrading WordPress. Usually, even if you forget to deactivate plugins everything will be OK. However, once in a while a plugin will conflict with an upgrade, and reactivating them one by one will help indicate the culprit.

My opinion is that it is better to drop a plugin than put off a security upgrade. Plugin authors who are actively maintaining their plugin are usually pretty good about speedy updates.

Protect customization. If you use a customized version of WordPress Default or Classic, consider naming your version and moving it into a folder of its own. No matter how careful we all are, there will come a day when something important gets copied over. If your theme folder is not part of a standard WP install, there is no way that upgrading can accidentally copy over your work.

In case you’re interested, I wrote a brief guide about how to use WP Default to start a new theme.

Wide Sidebar and Header for WordPress Default Theme

This tutorial will walk you through how to widen Kubrick, the WordPress Default Theme, without losing the ability to use the theme’s custom header image coloring. The result will be wide enough for a second sidebar, or for one of the extra wide sidebars that are increasingly popular.

I added 200px to the WordPress Default theme’s header and sidebar, for a 390px sidebar with a total of 940px overall. Look around online and see what kind of width you like. I’ve seen multi-column sidebars anywhere from 300px to 500px wide.

These are copy and paste directions. Programming skills are not required – simply pay careful attention to details. You’ll need basic image editing skills, a text editor like notepad, and the ability to FTP your theme’s files.

  1. Step One: Change background image widths
  2. Step Two: Edit php that customizes image color
    • 2)a: Add 200px to the header image width variable
    • 2)b: Find code that defines header shape coordinates
  3. Step Three: Change style sheet to match new width
    • 3)a: Widen page container
    • 2)b: Increase width of header container
    • 3)c: Widen footer
    • 3)c: Widen sidebar or add a second sidebar

Step One: Change the header image width

Look in /wp-content/themes/default/images/ for the files named kubrickheader.jpg, kubrickfooter.jpg, kubrickbgwide.jpg, and kubrickbg-ltr.jpg or kubrickbg-rtl.jpg. Use an image editing program to increase the width of each by 200px.

Avoid changing the radius of the corners in kubrickheader.jpg by avoiding tools that change the scale of an image. Stick to copy and paste and you’ll be fine. The original header image is 760px wide and 200px high. Adding 200px will result in a finished image that is 960px wide and 200px high. If you want less height, take a look at Reducing Header Height – WordPress Default Theme.

In kubrickbg-ltr.jpg or kubrickbg-rtl.jpg add 200px width to the darker portion that forms a background for the sidebar. Blogs written in languages read from left to right only need kubrickbg-ltr.jpg. You won’t need kubrickbg-rtl.jpg unless blogging in a language that is written from right to left, such as Hebrew or Arabic.

Step Two: Edit php that customizes image color

This gets a little more complicated, but you really don’t need to know how to write the php that draws color customizations. Just find the parts to change, and change only those without adding or subtracting spaces or punctuation. You’ll be changing the code in three places.

Look in /wp-content/themes/default/images/ for the file named header-img.php and open it in a text editor. If you’re like I was the first time I opened it, you don’t know much php but do remember enough algebra to recognize graphing coordinates.

2)a: Add 200px to the header image width variable

Find where the height of the image is defined, and add 200px. The original width is 740px, not 760px, because the outside border is left white.

Change $x2 = 740 to $x2 = 940.

Original code:

 
// Blank out the blue thing
for ( $i = 0; $i < $h; $i++ ) {

   $x1 = 19;
   $x2 = 740;
 

After editing:

 
// Blank out the blue thing

for ( $i = 0; $i < $h; $i++ ) {

   $x1 = 19;
   $x2 = 940;
 

Add 200px to the width by changing $x2 = 739 to $x2 = 939.

Before editing:

// Draw a new color thing
for ( $i = 0; $i < $h; $i++ ) {

   $x1 = 20;
   $x2 = 739;
 

After editing:

// Draw a new color thing

for ( $i = 0; $i < $h; $i++ ) {

   $x1 = 20;
   $x2 = 939;
 

2)b: Find code that defines header shape coordinates

This is where remembering algebra made me curious about what would happen if I changed the coordinates. Widen the image 200px by adding 200 to the first number in the first five rows of numbers, and you’re through with this step.

Original code:

 
// Define the boundaries of the rounded edges ( y => array ( x1, x2 ) )
$corners = array(
   0 => array ( 25, 734 ),
   1 => array ( 23, 736 ),
   2 => array ( 22, 737 ),
   3 => array ( 21, 738 ),
   4 => array ( 21, 738 ),
   177 => array ( 21, 738 ),
   178 => array ( 21, 738 ),
   179 => array ( 22, 737 ),
   180 => array ( 23, 736 ),
   181 => array ( 25, 734 ),
   );

 

After editing:

 
// Define the boundaries of the rounded edges ( y => array ( x1, x2 ) )
$corners = array(
   0 => array ( 25, 934 ),
   1 => array ( 23, 936 ),
   2 => array ( 22, 937 ),
   3 => array ( 21, 938 ),
   4 => array ( 21, 938 ),
   177 => array ( 21, 938 ),
   178 => array ( 21, 938 ),
   179 => array ( 22, 937 ),
   180 => array ( 23, 936 ),
   181 => array ( 25, 934 ),
   );

 

Step Three: Change style sheet to match new widths

In the WordPress Default theme some divs and classes appear twice, because of the way the Michael Heilemann has separated structure and formatting. It’s OK to either leave them separate or combine them. To keep it simple here for beginners I’ve left them separate, like they are in the original style sheet.

Look for style.css at /wp-content/themes/default/style.css, and open it in a text editor. You’ll be changing the widths of five IDs.

3)a: Widen page container

The div #page is like a container for all of the rest of this layout. Add 200px to the width property.

Before editing:

 
#page {

   background-color: white;
   margin: 20px auto;
   padding: 0;
   width: 760px;
   border: 1px solid #959596;
   }

 

After editing:

 
#page {
   background-color: white;
   margin: 20px auto;
   padding: 0;
   width: 960px;
   border: 1px solid #959596;
   }

 

3)b: Increase width of header container

Add 200px to the width of both #headerimg and #header.

Original CSS:

 
#headerimg {
   margin: 7px 9px 0;
   height: 192px;
   width: 740px;
   }

 

After editing:

 
#headerimg {
   margin: 7px 9px 0;
   height: 192px;
   width: 940px;
   }

 

Original CSS:

 
#header {
   background-color: #73a0c5;
   margin: 0 0 0 1px;
   padding: 0;
   height: 200px;
   width: 758px;
   }

 

After editing:

 
#header {
   background-color: #73a0c5;
   margin: 0 0 0 1px;
   padding: 0;
   height: 200px;
   width: 958px;
   }

 

3)c: Widen footer

Add 200px to the #footer ID’s width. After this step, WP Default’s text should be lining up with your new, wider images.

Before editing:

 
#footer {
   padding: 0;
   margin: 0 auto;
   width: 760px;
   clear: both;
   }

 

After editing:

 
#footer {
   padding: 0;
   margin: 0 auto;
   width: 960px;
   clear: both;
   }

 

3)d: Widen sidebar or add a second sidebar

Here you have a choice. You have room for two sidebars with the width of the original, or one wide sidebar. This should get you started.

Before editing:

 
#sidebar {
   padding: 20px 0 10px 0;
   margin-left: 545px;
   width: 190px;
   }

 

To make one extra-wide sidebar, simply add 200px to the existing sidebar ID. You’ll need to apply some floats and widths to the contents, but that’s a topic for another tutorial.

After editing:

 
#sidebar {
   padding: 20px 0 10px 0;
   margin-left: 545px;
   width: 390px;
   }

 

For double sidebar ideas and directions, also see Add a Second Widgetized WordPress Sidebar.

To style two sidebars, you can try duplicating whatever is defined by the first sidebar’s ID, #sidebar, but with a second, separate ID.

After editing:

 
#sidebar {
   padding: 20px 0 10px 0;
   width: 200px;
   float: right;
   }

 
#sidebar2 {
   padding: 20px 0 10px 0;
   margin-right: 30px;
   width: 200px;
   float: right;
   }

 

Reducing Header Height – WordPress Default Theme

The WordPress Default Theme measures about 220 pixels from the top of the screen to the bottom of the header image, with a 760px wide by 200px high header image. Many popular sites have only between 100 and 150 pixels between the top of the screen and the bottom of the header area. Users who don’t know php and want to change the height of the header will sometimes delete references to functions that can customize the colors of Kubrick’s custom header.

I think that’s a shame, if it’s in response to not wanting to mess with the unknown, because complete understanding is not needed. If the desire is a new image, replace away. If it’s less height now, a new image later, here’s a way to start by experimenting with changing the height. I’m a firm believer in learning by experimentation and observation. If you are a non programmer with similar tendencies this may be a fun exercise for you.

These are copy and paste directions. Programming skills are not required – simply pay careful attention to details. You’ll need basic image editing skills, a text editor like notepad, and the ability to FTP your theme’s files.

At the end, you will have taken 80 pixels off of the distance between the top of the screen and the bottom of WordPress Default theme’s header image.

  1. Step One: Change the header image height
  2. Step Two: Edit php that customizes image color
    • 2)a: Subtract 70px from height variable
    • 2)b: Find code that defines header shape coordinates
  3. Step Three: Change style sheet to match new image size
    • 3)a: Reduce height of header container
    • 3)b: Reduce top and bottom outside margins
    • 3)c: Re-center the blog’s name

Step One: Change the header image height

Look in /wp-content/themes/default/images/ for the file named kubrickheader.jpg. Use an image editing program to reduce the height by 70px. The only trick here is to avoid changing the radius of the corners. Avoid tools that change the scale of an image. Stick to copy and paste and you’ll be fine.

The original image is 760px wide and 200px high. I chose to take 70px off of the height, so my finished image is 760px wide and 130px high.

Step Two: Edit php that customizes image color

This gets a little more complicated, but you really don’t need to know how to write the php that draws color customizations. Just find the parts to change, and change only those without adding or subtracting spaces or punctuation. You’ll be changing the code in two places.

Look in /wp-content/themes/default/images/ for the file named header-img.php and open it in a text editor. If you’re like I was the first time I opened it, you don’t know much php but do remember enough algebra to recognize graphing coordinates.

2)a: Subtract 70px from height variable

Find where the height of the image is defined, and subtract 70px. The original height is 182px, not 200px, because the outside border is left white. Change $h = 182 to $h = 112.

Original code:

 
// Get the background color, define the rectangle height

$white = imagecolorat( $im, 15, 15 );
$h = 182;

 

After editing:

 
// Get the background color, define the rectangle height
$white = imagecolorat( $im, 15, 15 );

$h = 112;
 

2)b: Find code that defines header shape coordinates

This is where remembering algebra made me curious about what would happen if I changed the coordinates. Since the height is reduced by 70px, the bottom corners will need to be moved up the y axis by 70px. Subtract 70 from the first number in the last five rows of numbers, and you’re through with this step.

Original code:

 
// Define the boundaries of the rounded edges ( y => array ( x1, x2 ) )

$corners = array(
	0 => array ( 25, 734 ),
	1 => array ( 23, 736 ),
	2 => array ( 22, 737 ),
	3 => array ( 21, 738 ),
	4 => array ( 21, 738 ),
	177 => array ( 21, 738 ),
	178 => array ( 21, 738 ),
	179 => array ( 22, 737 ),
	180 => array ( 23, 736 ),
	181 => array ( 25, 734 ),
	);

 

After editing:

 
// Define the boundaries of the rounded edges ( y => array ( x1, x2 ) )
$corners = array(
	0 => array ( 25, 734 ),
	1 => array ( 23, 736 ),
	2 => array ( 22, 737 ),
	3 => array ( 21, 738 ),
	4 => array ( 21, 738 ),
	107 => array ( 21, 738 ),
	108 => array ( 21, 738 ),
	109 => array ( 22, 737 ),
	110 => array ( 23, 736 ),
	111 => array ( 25, 734 ),
	);

 

Step Three: Change style sheet to match new image size

Look for style.css at /wp-content/themes/default/style.css, and open it in a text editor.

3)a: Reduce height of header container

Take 70px off of the height of the ids #headerimg and #header. In the WordPress Default theme #header appears twice, because of the way the Michael Heilemann has separated structure and formatting. It’s OK to either leave them separate or combine them. To keep it simple here for beginners I’ve left them separate, like they are in the original style sheet.

Original CSS:

 
#headerimg 	{

	margin: 7px 9px 0;
	height: 192px;
	width: 740px;
	}

 

After editing:

 
#headerimg 	{
	margin: 7px 9px 0;
	height: 122px;
	width: 740px;
	}

 

Original CSS:

 
#header {
	background-color: #73a0c5;
	margin: 0 0 0 1px;
	padding: 0;
	height: 200px;
	width: 758px;
	}

 
#headerimg {
	margin: 0;
	height: 200px;
	width: 100%;
	}

 

After editing:

 
#header {
	background-color: #73a0c5;
	margin: 0 0 0 1px;
	padding: 0;
	height: 130px;
	width: 758px;
	}

 
#headerimg {
	margin: 0;
	height: 130px;
	width: 100%;
	}

 

3)b: Reduce top and bottom outside margins

If you want, you can lessen the margin between the top edge of the screen and the top of the header image. If so, you’ll need to find #page.

Original CSS:

 
#page {
	background-color: white;
	margin: 20px auto;
	padding: 0;
	width: 760px;
	border: 1px solid #959596;
	}

 

After editing to reduce the top and bottom outside margins by 10px:

 
#page {
	background-color: white;
	margin: 10px auto;
	padding: 0;
	width: 760px;
	border: 1px solid #959596;
	}

 

3)c: Re-center the blog’s name

The original CSS allows for 70 pixels of padding above the site’s name. Now that 70px has been taken off of the header height, 35 pixels needs to be removed from top padding.

Before editing:

 
/*	Begin Headers */
h1 {
	padding-top: 70px;
	margin: 0;
	}

 

After editing:

 
/*	Begin Headers */
h1 {
	padding-top: 35px;
	margin: 0;
	}

 

WordPress: Add a Second Widget-Ready Sidebar

This is the tutorial I wish I had found when I first wanted to know how to add a second widget-ready sidebar.

  1. Step One: Create a second sidebar file
    • 1)a: Add content to sidebar2.php
    • 1)b: Upload sidebar2.php
  2. Step Two: Add the new sidebar to your WordPress layout
    • 2)a: Find the code that calls the original sidebar
    • 2)b: Add your own includes
  3. Step Three: Use functions.php to tell your theme about the new sidebar
    • 3)a: Insert widget-ready CSS
    • 3)b: check your work

Step One: Create a second sidebar file

Create an empty text file and give it a name. For the purpose of these instructions I’m using the file name sidebar2.php.

1)a: Add content to sidebar2.php

The example below will work for a second widgetized sidebar. Surrounding the second sidebar with a CSS div named “sidebar2” provides a way to control positioning and use styling independent from another sidebar.

Note the difference between the original dynamic_sidebar() that you’ll you’ll find in a single sidebar theme, and the use of dynamic_sidebar(2) for a second sidebar. This difference is how the dialog at Options > Themes > Widgets knows which sidebar gets which widgets.

 
<!-- begin sidebar2 -->
<div id="sidebar2">
<ul>
     <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>

     <?php endif; ?>
  </ul>
</div>
 
<!-- end sidebar2 -->

 

1)b: Upload Sidebar2.php

The new sidebar should go in the directory containing your theme. If you’re using the WordPress Default theme, you need to upload it to /wp-content/themes/default/.

Step Two: Add the new sidebar to your WordPress layout

Decide where you want the contents of your second sidebar file to appear on a page, and in what kinds of pages. Some possible destinations are index.php, single.php, page.php, 404.php, search.php, and archives.php. What you choose will depend on your needs.

2)a: Find the code that calls the original sidebar

Where does the original sidebar appear now? The home page? The single post view? Some template files will contain a way to insert the existing sidebar. Methods that may be used will look something like one of these three examples.

This first example uses the WordPress include tag, get_sidebar. In this case, if a theme doesn’t have its own sidebar.php, WordPress will use the sidebar.php from the WordPress Default theme.

 
<?php get_sidebar(); ?>
 

These next two examples use a php “include” to call a single sidebar with the file name sidebar.php. The first assumes that sidebar.php is in the same directory as any template files containing this code. The second specifies TEMPLATEPATH. TEMPLATEPATH is the default location for the files contained in whatever theme is currently in use. Either will work, unless you’re doing something fancy that is out of the span of this tutorial.

 
<?php include("sidebar.php"); ?>

 

 
<?php include(TEMPLATEPATH."/sidebar.php");?>
 

2)b: Add your own includes

Use a separate include for each sidebar. In both examples below, the first include will call the original sidebar, if it has the default file name of sidebar.php. The second will call our new sidebar, with the file name of sidebar2.php. Place the sidebar.php line where you would like to see sidebar.php’s contents generated, and the sidebar2.php line where you want sidebar2.php to appear.

 
<?php include("sidebar.php"); ?>
 
<?php include("sidebar2.php"); ?>

 

Or you could use this:

 
<?php include(TEMPLATEPATH."/sidebar.php");?>
 
<?php include(TEMPLATEPATH."/sidebar2.php");?>

 

Step Three: Use functions.php to tell your theme about the new sidebar

Think of functions.php as a sort of a master of ceremonies for instructions specific to your WordPress theme. The simplest, widgetized, single-sidebar theme will have a functions.php file that contains something like this, without further specifications:

 
if ( function_exists('register_sidebar') )

  register_sidebar();
 

To add a second sidebar to such a simple theme, change the “1” to a “2” and make “sidebar” plural. If you’re adding two sidebars, change the “1” to a “3.”

 
if ( function_exists('register_sidebars') )

  register_sidebars(2);
 

3)a: Insert widget-ready CSS

A few more lines of code make a big difference, giving more control over CSS and automatically creating a lovely, nested navigation list. For an example, take a look at the first few lines of the functions.php that comes with WordPress’s single-sidebar Default theme. That theme and some others have special CSS powers because of a slightly more complicated funtions.php. In the example below, where you see li id="%1$s" and class="widget %2$s", WordPress will automagically insert IDs and classes named after whatever widget is displayed. To make use of those IDs and classes you’ll need to edit your stylesheet.

 
if ( function_exists('register_sidebar') )
  register_sidebar(array(

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

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

 
',
  ));
 

To add a second widgetized sidebar and retain the nifty formatting by the example above, you could add a curly bracket to the end of the first line, make “sidebar” plural and add the number 2 on the second line, and nest the whole thing with a closing curly bracket on the eighth line. The result will look like this:

 
if ( function_exists('register_sidebar') ){

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

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

 
',
  ));
}
 

Two sidebars should now show up at Presentation > Widgets.

3)b: Check your work

Open your home page and click refresh. At this point, your site might look odd because of CSS layout problems, but there should not be any php error messages. If something besides CSS styling is off, re-trace your steps and check for typos, missing bits or extra spaces before and after php opening and closing tags.

A Few Blog Navigation Plugins

What do the top search marketing blogs not have at the top of their sidebars? More often than not, they don’t list just exactly what I’m going to tell you about here: lists of recent posts, popular posts, recent comments, top commentators…

Of course there are exceptions, but the top spots are more likely than not reserved for advertisements. Scroll a bit and multi-author blogs show a list of authors, a list of categories, and maybe individual links to something in particular. Much of the navigation stuff in the top blogs is not generated by a stack of plugins, and as often as not sidebars contained fewer deep links than I expected.

This kind of thing makes me curious, which leads me to a topic or three for another day. Today I’m going for the beginner nav, plugin variety. I’ve gone foraging through pluginland and installing a few of the blog navigation biggies, described below. As a value statement, I’m making a choice to start where I am, and leave off trying to look like the big boys. If this blog ends up having navigation like theirs in the future, it will get there because of what happens in this blog and with my own sensibilities.

After a while, if (more like when) I make changes, I’ll give you a peek at stats and feedback. If you don’t want to wait until then to chat about blog navigation evolution, feel free to leave a comment on this post.

I Like Site Maps

A well done site map is first my choice of how to find something quickly on a site I don’t know well. Though I’ll give a site search a try, I appreciate that a site map can show me all there is, not just what pages are chosen in a search result.

Dagon Design Sitemap Generator

The Dagon Design sitemap generator is one of those set it and forget it plugins you’ll wonder how you ever lived without. There’s even an option to include a link to your XML site map. It works, it’s configurable, and the output is not bad to look at, either. You install, make a page named whatever you want to name your site map, and paste in one line of code. A minor sticking point for users who are not used to doing WordPress without the WYSIWYG will be getting the code to stay as-is. The answer is simple. Don’t try to use the WYSIWYG for that one page. Click the “html” button to get to the code view.
By Dagon Design
Configure at Options > DDSitemapGen

Generates a fully customizable sitemap

Plugins for Blog Sidebar Navigation

Displaying recent comments and the most popular are the two that seemed most basic, so here goes.

Get Recent Comments

I tried a few and decided to keep Krischan Jodies Recent Comments widget, because it displays the author name, links to the post and lets me choose how much of a snippet I want to show from the comment. Some others link to the author of the post, or do not show a post snippet. The options and instructions available with this plugin are remarkably complete and thoughtfully written. Kudos. One disappointment is that it includes a function for showing Gravatars, but not MyBlogLog avatars or favatars or whichever version is found first. Krischan, if you see this and have time on your hands, consider yourself nudged by a dedicated avatar junkie.
By Krischan Jodies
Configure at Options > Recent Comments

Display the most recent comments or trackbacks with your own formatting in the sidebar. Visit Options/Recent Comments after activation of the plugin.

Popularity Contest

Popularity contest is one of many carefully crafted plugins by Alex King. This plugin will tally up points and assign a percentage value that compares each post with the blog’s most popular post. The most popular post gets a score of 100%. If my most popular post has 1,000 points and this one scores 100 points, this post would get a popularity score of 10%. That percentage is installed at the end of each post. The stats-curious who install this one should not forget to take a look at the “popularity rankings” link at the top of Options > Popularity. Coolness. Wait a few weeks and see it change. More coolness.

By Alex King
Configure at Options > Popularity

This will enable ranking of your posts by popularity; using the behavior of your visitors to determine each post’s popularity. You set a value (or use the default value) for every post view, comment, etc. and the popularity of your posts is calculated based on those values. Once you have activated the plugin, you can configure the Popularity Values and View Reports. You can also use the included Template Tags to display post popularity and lists of popular posts on your blog.

JAW Popular Posts Widget

The Popularity Contest plugin above gives instructions and code examples for how to put top posts links in a sidebar, but it does not come with its own widget. As my other sidebar stuff is widgetized, I was glad to see that Thomas Steen has provided a nice, simple Popularity Contest widget.
By Thomas Watson Steen
Configure at Presentation > Widgets

Adds a sidebar widget that shows the most popular posts. Requires the Sidebar Widgets plugin from Automattic and the Popularity Contest plugin by Alex King.

Blogrolling My Footer

A couple posts ago I wrote about at-a-glance features that help me get a quick sense of what’s going on with a blog. For the next few posts I’m going to chip away at adding some of those features to my own blog. My first target will be some sidebar links devoted to comments and commentators. In order to shoehorn them in, more widgety sidebar space will be required. I’ll either need a second sidebar or a smaller blogroll.

I don’t want a smaller blogroll. I think that having a generous-sized blogroll acts as a resource base for readers and gives insight into my values by showing sites that I admire. If anything, I want room for a bigger blogroll, without losing any more sidebar real estate.

One solution is to move the blogroll into the footer.

Bigger Footers Are On The Rise

  • BBC UK Beta has an extended footer area that contains a site-map style directory.
  • NetSquared, an entity that helps nonprofits utilize the Internet’s community-building power, also uses an extended footer area. NetSquared uses the footer to repeat the header’s horizontal top level navigation links, with the addition of sub links. There is no blogroll.
  • BloggingExperiment.com also forgoes a blogroll. Blogging Experiment reserves most of the sidebar for ads, using an extended footer for “Recent Comments,” “Most Commented,” and “Top Commentators.”

What I have in mind is a little different. Even when I add advertisements and more “static” content I’ll be keeping the blogroll.

Moving my blogroll to a larger footer area won’t just open up some sidebar elbow room. It will also give some separation between on- and off-site links, something that may be a kindness to users like myself who are wary of mixed on- and off-site links.

On the other hand, a footer blogroll may not be recognized as a blogroll, because blogrolls are traditionally expected to be vertical and appear in the sidebar. Also, when I see a lot of links in a footer I expect spam. I’ll need to make sure that my footer-blogroll is clearly labeled and neatly structured – unlike spam.

Moving a Blogroll From Sidebar to Footer

A trip to the WordPress Codex taught me that there are two non-depreciated template tags that will make a list of blogroll links, get_bookmarks and wp_list_bookmarks.

The template tag get_bookmarks has lots of yummy features that allow the user to retrieve the bookmark information directly. I went with wp_list_bookmarks, because it seemed more convenient to leave categories and whatever up to the various possibilities available at Dashboard > Blogroll. If I want to later, I can change the way my blogroll links are sorted by adding configuration to wp_list_bookmarks.

Using wp_list_bookmarks is as simple as it gets. Pick a place to put it, in my case within footer.php, just above existing footer links. The output will be list items. Surround the list items with ul tags for an unordered list, and assign an ID to the ul for styling the whole kit and kaboodle. I named my ID “blogroll.”

 
<ul id="blogroll"><?php wp_list_bookmarks(); ?></ul>
 

This is the output:

 
<ul id="blogroll">
<li id="linkcat-2" class="linkcat">

<h2>Blogroll</h2>
<ul>
<li><a href="http://www.url.com/">Link</a></li>
<li><a href="http://www.url.com/">Link</a></li>

<li><a href="http://www.url.com/">LInk</a></li>
</ul>
</li>
</ul>
 

Styling a Footer Blogroll

In my current theme, applying clear: both to previously existing footer content was the best way to keep my new blogroll container ID from squeezing to one side. Your mileage may vary, depending on how your theme is laid out and your css defined.

I gave the container ul, #blogroll, a width that allows for a little space to the left and right. Floating #blogroll to the left allows however many columns of list items will fit inside to line up next to each other.

 
#blogroll {
          width: 760px;
          float: left;
          text-align: left;}

 

Assigning width:100% to #blogroll ul spreads the inner ul to the full width of the outer #blogroll container. Using margin:auto for both left and right margins assures that the left and right margins of #blogroll ul will be the same and meet the outside edges of the 100% width, without needing to apply a specific pixel value.

 
#blogroll ul {
          width: 100%;
          padding: 0;
          margin: 5px auto; }

 

Now that we’ve laid out our containers, applying list-style-type: none to #blogroll li will get rid of the bullet before each list item. Next, give a consistent width to all list items under #blogroll ul li, set them to display: inline and float them to the left.

 
#blogroll li {

          list-style-type: none;
#blogroll ul li {
          width: 25%;
          display: inline;
          float: left; }

 

Fine Tuning

I didn’t include most padding and margins above because everyone’s theme and preference will be a little different. I’ll add that using a little margin and padding between the bottom of the blogroll and the top of the footer links will create a natural space for a divider line. I used a two pixel border that is the same color as the border between my sidebar and text content.

Coordinate the look of a footer blogroll with that of sidebar links is a nice touch for headers and links

 
#blogroll h2 {
          color : #ce0000;
          font-size : 1.6em;
          font-family: Times New Roman, Sans-Serif;
          font-weight: bold;}

 
#blogroll ul li a {
          color: #507AA5;
          text-decoration: none;}

 
#blogroll ul li a:hover {
          color: #507AA5;
          text-decoration: underline;}

 

End result: a pretty new blogroll and lots of wide open side bar. Next up I’ll get widgety in my new side bar space.

Feeding the (feed)Reader

Yesterday was odd. I had pretty good readership according to FeedStats, but MyBlogLog, Google Analytics and the stat thingy that comes with my server told me I had two visitors on January 12th, aside from myself. Two! Not kidding! Also yesterday, one person added themselves to this blog’s MyBlogLog Community, and two others went to my MyBlogLog member page and added me as a contact. Someone must have thought I was doing something right! Thank you, especially for doing it yesterday!

Let the Full-Text Hoopla Begin

For those who prefer to access me via feed, I’m going to switch to full text. I’ve done excerpts up until now because I wanted to cut down on vulnerability to scrapers until this site is better established. If 70-95 percent of you are seeing this via feed, am I doing myself any favors? Let’s consider some statistics:

  • Referring Sites 81.62%
  • Direct Traffic 15.62%
  • Search Engines 2.76%

70-95 percent from feeds trumps just under three percent from search engines, hands down, no matter what the search terms are. Besides, paying attention to my stats is paying attention to my users is a branding statement. Thar ye be.

Falling For FeedBurner

I’ve resisted FeedBurner. Some of my past experience has been with email based newsletters, and I didn’t want to use a service that took over management of email-based subscription. FeedBurner doesn’t do Customer Relationship Management (CRM) type list management stuff. Asking users to register separately seemed like a pain in the patoo for the user.

That was before considering yesterday’s stats led me to a new attitude.

Since I am in a surrendering to enlightenment sort of mood, I, well, surrender. Point blank and with abandon. There are now feed reader generated “Subscribe” links in my sidebar, but I didn’t stop there.

Surrendering came with some seductive benefits. In the options of my brand spankin’ new account on FeedBurner’s site, over and over again, I said “yes!” I was expecting stats and chicklets, but I got a lot more. I found a configurable bonus linky thing to paste into my WordPress theme. The end of each post will now contain links for subscribing, Stumbling, Emailing one’s self a copy, sharing on Facebook and saving to del.icio.us. Handy. I found a way to have Feedburner automatically add my affiliate code to any links I make here to Amazon. Also handy – I’m likely to link to books, and also likely to forget to add the code.

To top it off, FeedBurner can export a list of subscribers into a CSV file that I can then import into CRM software. If I do ever decide I need to add permission-based email newsletter, I could send out a round of emails that offer an option to subscribe. My privacy policy already covers me with this text: We may infrequently pass links and information about other services on to you, but we will never share information about you with others.

It took a while to get through FeedBurner’s many options, and I’m still fixing things. All the various tabs and options are a lot to get through! Their FAQ are pretty good, and I’m determined; I’ll live.

FeedBurner Resources

FeedBurner FeedSmith Plugin

Helps to set up Feedburner.
By FeedBurner
Set up at Options > FeedBurner

Originally authored by Steve Smith, this plugin detects all ways to access your original WordPress feeds and redirects them to your FeedBurner feed so you can track every possible subscriber.

A Defined and Navigable Space

My 100 posts project needs a home. I want all 100+1 in their own group, with easy navigation between them, and I’d like some sort of countdown widget.

For a countdown I chose KB Countdown Widget.

KB Countdown Widget

KB Countdown is a sidebar widget that comes with nice documentation and several pre-configured options. You can even add html. My only complaint is that because of this plugin I didn’t have a reason to learn to write the php myself, but, hey, it’s done today instead of later, so I think I’ll live. You can see it in action at the top of my left column.
By Adam R. Brown.
Configure at Presentation > Widgets.

Count the years/months/days since, until, or between events. Optional bar graph for tracking progress between two dates.

Adding Tag Tags to a WordPress Theme

I want each post to show a list of any associated tags. I think the end of the post is the best place for a list of tags, and because categories are the big stuff of what the post is about I’m going to leave categories at the top. Tags feel more like a “related posts” sort of a thing, which is more expected at the bottom of a post.

According to the codex, to add a list of tags that are associated with a specific post, I need to use the following:

<?php the_tags(); ?>

First available with WordPress Version 2.3, this template tag displays a link to the tag or tags a post belongs to. If no tags are associated with the current entry, the associated category is displayed instead. This tag should be used within The Loop.

The WordPress Codex on the_tags

To list the tags at the end of a post, paste

<?php the_tags(); ?>

after

<?php the_content(__('Read more'));?>

and before

<?php endwhile; else: ?>

In my theme I only needed to add it to index.php. In yours, you may also need to do the same to single.php. Here’s what it looks like in my index.php:

<?php the_content(__('Read more'));?>
<div style="clear:both;"></div>

 
<?php the_tags(); ?>
 
	<?php endwhile; else: ?>

 
<?php _e('Sorry, no posts matched your criteria.'); ?>
 
<?php endif; ?>

<h2>Comments</h2>
 

If you try adding this code and nothing shows up, check to make sure you’ve added it before the endwhile; else: bit that marks the end of The Loop.

Adding Previous Post and Next Post Links

To help people cycle through my series, today I added links for going backwards and forwards between posts. The WordPress Codex has some straightforward examples of how to use next and previous links.

This is the basic code:

<?php previous_post(); ?>    <?php next_post(); ?>

The parameters for both of these tags are format, text and title. These parameters should be separated by commas and enclosed in apostrophes. I made use of them like so:

I chose to insert two pair of left angle brackets, followed by the permalink: '« « %'

Add “Back” and a colon: 'Back: '. If no link is present, no “Back” and colon will show. To make it clearer exactly what these links are, I have labeled them with “back” and “next.” Other choices are words like “previous” and “forward,” but my command decision of today is that I like “back” and “next” because they are nice and short.

Use the title: 'yes'

So far, we have this:

<?php previous_post('&laquo; &laquo; %', 'Back: ', 'yes'); ?>

<?php next_post('% &raquo; &raquo; ', 'Next: ', 'yes'); ?>

Because some of my titles are long enough to trigger a line break, I want a line break between my longer previous post and next post links. Also, I think they’d be a little easier on the eyes if “Back” floated to the left, and “Next” floated to the right. I used floated divs for this, choosing not to add a class to my stylesheet because it wouldn’t cut down on the amount of code. If you do a View > Source and this is no longer so… well, could be that I changed my mind. ;-)

 
<div style="float: left">
<?php previous_post('&laquo; &laquo; %', 'Back: ', 'yes'); ?>

</div>
<div style="float: right">
<?php next_post('% &raquo; &raquo; ',
 'Next: ', 'yes'); ?>

</div>
 

Tuck it in between

<?php the_tags(); ?>

and

<?php endwhile; else: ?>

and I’m done with the previous and next post links.

Voila. Home sweet 100+1 post home.