Combine Single and Double Sidebars on Your Blog [Thesis]

As I noted in the previous post, many visitors and subscribers of this blog are fellow bloggers and fellow users of the Thesis Theme for WordPress. This is a tutorial for the fellow Thesis users.

What we cover today is the situation in which you want your sidebar to have 2 columns for the top part and 1 column for the bottom, similar to the way my sidebar is setup. A screenshot of my sidebar, where it crosses from 2-column to 1-column, is as follows:

In the 2-column portion of my sidebar, the left column is 120px (12em) and the right column is 220px (22em). In the 1-column portion, the width is the combination of these two: 340px (34em). Now, let’s talk about how we make this arrangement work.

The first thing we have to do is figure out which Thesis hook to use to get a single column to appear after the dual column. In scanning through the hooks references, we find that thesis_hook_after_sidebars is the hook we need. We are going to replace that hook with a function of our own, entitled custom_sidebar_bottom. We will add the code to our custom_functions.php file and then invoke the function using the following:

add_action('thesis_hook_after_sidebars', 'custom_sidebar_bottom');

Before we get into the details of that function, though, let’s talk about what CSS is needed.

Although the thesis_hook_after_sidebars will help us set up a column, Thesis does not provide any default styling for that area. (Nor should it be expected to: that area is totally custom, and warrants totally custom CSS.) So, we have to decide what CSS we need to define the column. I have chosen the following:

#bottomside {width: 100%;}
#bottomside a { font-weight: bold; text-decoration: none; color: #ef7114; }
#bottomside {font-size: 1.2em; font-family:Helvetica,Verdana,Arial,sans-serif; }

I named the div of the area #bottomside, assigned it a width of 100% and assigned it the same font family and sizing that the 2-column area uses.

And, since we are talking about CSS, let’s go ahead and finish talking about it before getting into the hooking code. Specifically, the other CSS that I use in this area are the CSS for my “table-like” ads and the CSS for my Skribit module’s width:

.sbtable_ads_container {
	width: 270px;
	padding: 5px 0 5px 0;
}
.sbtable_ads_left {
	width: 85px;
	float: left;
	padding: 2px;
	margin-right: 8px;
	margin-bottom: 10px;
}
.sbtable_ads_right {
	width: 160px;
	float: left;
	padding: 2px;
	margin-bottom: 10px;
	text-align: left;
}
.sbtable_ads_clear {
	float: none;
	clear: both;
}
#skribitWidget {width: 80%;}

Now for the hooking code:

function custom_sidebar_bottom() {
    if ( !is_page('about') && !is_page('donations') ) {
?>
        <div class="sbtable_ads_clear">
        </div>
        <div id="bottomside">
        <center>
            <div class="sbtable_ads_container">
                <div class="sbtable_ads_left">
                    <a rel="nofollow" href="My Link David Allen Product"><img src="Link to Image" width="80" height="80" alt="GTD Unabridged Audio" title="Click to Purchase or See More Information" /></a>
                </div>
                <div class="sbtable_ads_right">
                    <p>The <a rel="nofollow" href="My Link David Allen Product">GTD Unabridged Audio</a> is an excellent way to learn or reinforce GTD.</p>
                </div>
            <div class="sbtable_ads_clear">
            </div>
        </div>
        <div class="sbtable_ads_container">
            <div class="sbtable_ads_left">
                <a rel="nofollow" href="My Link David Allen Product"><img src="Link to Image" width="80" height="80" alt="GTD Unabridged Audio" title="Click to Purchase or See More Information" /></a>
            </div>
            <div class="sbtable_ads_right">
                <p>I've used the <a rel="nofollow" href="My Link David Allen Product">GTD Notetaker Wallet</a> for years ... great product!</p>
            </div>
            <div class="sbtable_ads_clear">
            </div>
        </div>
<?php 
if ( !is_front_page() ) {
?>
    <div id="googleads" class="widget">
        Code for my 250x250 Google Ads
    </div>
<?php } else { 
?>
    <div id="writeSkribitHere"></div>
        Code of my Skribit widget
<?php }
?>
</center>
</div>
<?php }
}

I’ve put generic values in for the links, ads, and Skribit code, rather than clutter this up with totally unnecessary detail. There is still some unnecessary detail, in that the conditional code for showing Skribit on the Front Page (but not Google Ads) is not necessary to illustrate the concept involved … but the conditional code might be useful to a few of you who want to use some conditional code in your sidebar(s).

I think this function is pretty self-explanatory. If not, feel free to ask questions of me in the comments. Also, feel free to correct me on any mistakes you see: perfection is not my middle name.

One thing that does warrant a mention, though, is the necessity of doing a “CSS clear” before beginning of the div=#bottomside implementation. Without that clearing, the new area tacks onto the right of the 2-column layout, rather than coming back over to the left and starting afresh.

One final aside: I have used <center> within this scheme to center the contents of the bottom sidebar. This alignment code is not valid in a W3C strict-mode validation, although it does work in transitional mode. So, if perfect validation is a priority for you (I like to come as close as practical), you would not want to use that alignment code.