How To: Add More Sidebars in Thesis

Adding more sidebars in Thesis (or any WordPress theme) is REALLY easy! It’s only three steps, and I’ll show you how to create 3 additional widgets to your footer.

Step #1: Insert the following code into custom_functions.php near the top

register_sidebar(array('name'=>'Footer Column 1', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer Column 2', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer Column 3', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));

This code simply tells WordPress to “add a new widget space”.

Step #2: Insert the following code into custom_functions.php near the bottom

// Footer Widgets
function footer_widgets_html() {
?>
 <div id="custom_footer">
 <div class="column1">
 <ul>
 <?php    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Column 1') ){    ?><?php    }    ?>
 </ul>
 </div>
 <div class="column2">
 <ul>
 <?php    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Column 2') ){    ?><?php    }    ?>
 </ul>
 </div>
 <div class="column3">
 <ul>
 <?php    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Column 3') ){    ?><?php    }    ?>
 </ul>
 </div>
 </div>
<?php }
add_action('thesis_hook_after_footer','footer_widgets_html');

Here we’ve setup a Function to build 3 columns inside the Thesis Hook: After Footer. The PHP just checks to see if there is a Sidebar named “Footer Column 1″, if there is print it.

Step #3: Add the following code to custom.css

/* --- Footer Widgets --- */
#custom_footer { /* The parent DIV containing all 3 widgets */
 height: 350px;
 width: 100%;
 margin: 30px 0 0 0;
}
#custom_footer h3 { /* Headline color */
 height: 40px;
 font-size: 20px;
 color: #000;
}
#custom_footer a { /* Link color */
 color: #000;
}
#custom_footer ul li { /* Remove bullets */
 list-style: none;
}
.column1 {
 height: auto;
 width: 30%;
 margin: 0 0 0 15px;
 padding: 5px;
 float: left;
}
.column2 {
 float: left;
 height: auto;
 width: 30%;
 margin: 0 0 0 15px;
 padding: 5px;
 float: left;
}
.column3 {
 height: auto;
 width: 30%;
 margin: 0 0 0 15px;
 padding: 5px;
 float: left;
}

Here we just add some quick styling to line-up all 3 columns next to each other. The end result, while basic, gets you headed in the right direction