Category: Tools and Tutorials

This tutorial will walk you through creating a single widgetized sidebar container filled with individually styled widgets that can span a wide sidebar or float to either side to create the appearance of columns.

An alternative strategy was covered in 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.

Styling Wide Widgetized Sidebars, Part I

1. Step One: Choose a width
2. Step Two: Add widget styling to functions.php
3. Step Three: Define style declarations
4. Step Four: Find and add widget style names

Step One: Choose a width

I recently scouted around for common wide sidebar widths and what fits into them and came up with a target of about 400 pixels wide. To my eye, 350 to 400px is a good width for a recent comments plugin that would get into a lot of little rows of text in a narrower column – see my sidebar for an example. Three of the popular 125px square ads and some padding will fit nicely into a 400px wide text widget. Or, a 400px wide sidebar could hold two 200px wide columns. Some popular widgets such as My Top Spots are 200px wide.

I’m assuming that you already have a wide sidebar to style. If not, the tutorial Wide Sidebar and Header for WordPress Default Theme should be helpful.

Step Two: Add widget styling to functions.php

This code in functions.php will allow for one instance of dynamic_sidebar. Where you see li id="%1$s" and class="widget %2$s", WordPress will automatically insert IDs and classes named after whatever widget is displayed. h2 class="widgettitle" inserts a single class, “widgettitle,” for the sidebar H2s used by WordPress’s Default theme. If your theme uses H3s or H4s or some other tag, you’ll need to replace the H2 in functions.php with what is true for your theme. To make use of those IDs and classes you’ll need to edit your stylesheet.

More background information about this code can be found in other tutorials listed at the end of this entry.

 
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>

 
',
  ));
 

Step Three: Define style declarations

Decide what shape you’d like for your sidebar parts, create some CSS declarations to match, and add them to your theme’s style sheet. A declaration is the width: 100% part of a CSS rule. You’ll add the selectors (IDs and classes) in Step Four. Here are some examples to help you get started. I’ve left off margins and padding because they will vary according to what else you have going on.

 
/* full width */

 {width: 100%;
   clear: both;}
 
/* left column */
 {width: 49%;
   float: left;
   clear: left;}

 
/* right column */
 {width: 49%;
   float: right;
   clear: right;}

 

Step Four: Find and add widget style names

Go to Presentation > Widgets in your WordPress dashboard and drag the widgets you want into your sidebar, in the order in which you want them to appear. Depending on how floats and clears line up, for the most part the order will be from left to right, from top to bottom.

Next, take a look at the source code of the generated page and make note of the IDs and classes created around your widgets. Try using FireFox with the Web Developer Toolbar to quickly find them. I like to edit my CSS using CSS > Edit CSS from the Web Developer Toolbar, while using Outline > Outline Current Element to quickly find the names of classes and IDs created around each widget.

You’ll see that in many cases there are separate selectors for different items within a widget. You may not need to use all the various classes and IDs provided.

In addition to the outer ID there is often an inner wrap. The inner lines can usually be styled with something like #inner_id ul li. Take a look at a facsimile of some code generated by the get recent comments widget.

 
<li id="get-recent-comments" class="widget widget_get_recent_comments">
<h2 class="widgettitle">Recent Comments</h2>
<div id="get_recent_comments_wrap">
<ul>

<li>
<a href="http://url-here/postname/#comment-100" title="Post Title, Date">Commenter Name</a>: Comment text...</li>
<li>
<a href="http://url-here/postname/#comment-101" title="Post Title, Date">Commenter Name</a>: Comment text...</li>
</ul>

</div>
</li>
 

When I styled my sidebar, I started by adding the outer ID to whatever declaration made sense from step 3 above. Then, I created a separate rule for the inner ID. For example, look what I did with the recent comments widget:

 
/* full width */
#get-recent-comments {
   width: 100%;
   clear: both;}

 
#get_recent_comments_wrap ul li {
   list-style-image: url("http://ablereach.com/images/triangle.gif");
   margin-left: 20px;}

 

Go through each active widget and add IDs and classes to your stylesheet as needed.

Here are a few examples of the IDs and classes associated with some popular widgets. Every widget is a little different, and there are a lot of widgets and plugins out there, so for accuracy I recommend that you check the source code yourself.

• Categories
  li id="categories-1" class="widget widget_categories"
  A second instance of Categories would be called categories-2.
• Pages

  Outer: li id="pages" class="widget widget_pages"
  Inner: ul li class="page_item page-item-2

• Text Box
  Outer: li id="text-1" class="widget widget_text"
  Inner: div class="textwidget"
  A second instance of Text Box would be called text-2
• Recent Posts
  li id="recent-posts" class="widget widget_recent_entries"

More on functions.php or widening Kubrick

• Styling Wide Widgetized Sidebars, Part I
• WordPress Sidebar Widget Sandwich
• WordPress: Add a Second Widget-Ready Sidebar
• Wide Sidebar and Header for WordPress Default Theme

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>
 

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;
   }

 

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;
	}

 

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.