How to Build Two-Column Sidebar Boxes

by Mike Nichols

Many Thesis users want to use boxes spanning two sidebars for announcements, images, ads, or other purposes. Requests for instructions for making and using sidebar boxes are frequent on the DIYthemes Forums.

Sidebar boxes are easy to build and use, and this article gives you all you need to get started. The illustrations show how using different hooks places the sidebar box in different locations along the sidebar.

Build a two-column box in custom.css

Put the following code into your custom.css file. The code’s comments tell you how to set up the box.

It is very important that the width of your sidebar box not exceed the sum of your sidebar column widths. If it does, the best that will happen is that it will hang over into the border around your page — and it can completely mess up your sidebars if very much wider than it should be!

/* Build a two-column box for sidebars */
#sidebar_two_column_box {
	/* width should be no wider than the sum of your sidebar column widths */
	width: 390px;
	/* height to suit */
	height: 140px;
	/* border width style color */
	border: 1px solid #000000;
	/* background if desired */
	background: #FFFFFF;
	/* keeps box contents away from the edges of the box */
	padding: 1em 1em 1em 1em;
	/* separates box from elements around it */
	margin: 2em 0 2em 0;
}

Put the box to work in custom_functions.php

The basic job of the following function is to wrap your text, images, or ads in a div whose id calls the box-building code you put in custom.css — think of it as a container for your box. Within the div is the code for the contents of the box. Then after the function, the “add_action” statement hooks the box where you want it to go.

Here is the basic function to put into your custom_functions.php file, along with all the possible “add_action” statements for the sidebars. The “add_action” statements will be discussed individually below.

/* Two-column box in sidebars */
function sidebar_box() { 
?>
	<div id="sidebar_two_column_box">
		YOUR CODE OR TEXT
	</div>
<?php
}
/* 1. hooks sidebar box above multimedia box & sidebars */
add_action('thesis_hook_before_sidebars','sidebar_box');
/* 2. hooks sidebar box below multimedia box & above sidebars */
add_action('thesis_hook_after_multimedia_box','sidebar_box');
/* 3. should hook sidebar box after the last widget in sidebars */
add_action('thesis_hook_after_sidebars','sidebar_box');
/* 4. hooks sidebar box below the last widget in sidebar 1 */
add_action('thesis_hook_after_sidebar_1','sidebar_box');
/* 5. hooks sidebar box below the last widget in sidebar 2 */
add_action('thesis_hook_after_sidebar_2','sidebar_box');

Where the different hooks locate the sidebar box

You can’t help but have noticed that there are 5 “add_action” statements. Each one places the sidebar box in a different spot along the sidebars. All of the possible sidebar hooks are listed for your convenience. Important! You can only use one “add_action” statement at a time, so delete or comment out the ones you will not be using!

Figure 1: Sidebar box above the multimedia box

Figure 1: Sidebar box above the multimedia box

The first add_action statement uses the hook “thesis_hook_before_sidebars”, which puts the sidebar box above the sidebars and the multimedia box, if it is present.

Figure 2: Sidebar box below the multimedia box and above the sidebars

Figure 2: Sidebar box below the multimedia box and above the sidebars

The second statement uses the “thesis_hook_after_multimedia_box” hook, which puts the sidebar box below the multimedia box if it is present, and above any widgets in either sidebar.

Figure 3: Sidebar box below the sidebars

Figure 3: Sidebar box below the sidebars

The third statement uses the “thesis_hook_after_sidebars” hook, and puts the box below the last widget in the sidebars — that is, if it can be made to work! More often than not, it places the box in the middle of your widgets! The better solution is to determine which of your sidebars is longer, and use the “add_action” statement for that sidebar to place the box below the sidebars, as in Figure 3.

In Conclusion

Though short, this article has shown you the principles of how to build a sidebar box, how a function wraps around the div that calls the box, and how to put the box where you want it.

I hope you find this article useful on your blog! Remember that your comments are always welcome, and that you can email me directly using the “Contact” button in the menu.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!

Be Sociable, Share!