Aweber - Email Marketing Made Easy
Add Additional Sidebars to Thesis – Can Also Be Used To Make A Widgetized Footer

Add Additional Sidebars to Thesis – Can Also Be Used To Make A Widgetized Footer

July 7, 2010 · 16 comments

in Thesis

I was building a client’s website using Thesis and I needed to create some additional sidebars. The design called for a custom home page with 3 individual sections near the footer. I wanted to make each section a widgetized sidebar so it would be easy to add content to them using WordPress widgets.

You may have seen themes out there that have a widgetized footer which has maybe 3 or 4 sections where you can add any widget you wanted. Well, this tutorial will be useful for you if that’s what you want to do with Thesis, or just add additional widgetized sidebars.

How To Add Extra Widgetized Sidebars in Thesis

I’m not saying this is the only way to achieve this, and there may even be a better way to do it, but this definitely does the trick and worked perfectly for me.

Step 1 – Register The Sidebars

I have to give credit to Berchman for this bit of code. Actually, in his post he credits Kristarella for this code. So thank you both. But basically, open up your custom_functions.php file and add this code to it:


// Register sidebar

register_sidebars(1,
    array(
        'name' => 'Sidebar 3',
        'before_widget' => '<li class="widget %2$s" id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    )
);

Now, if you need more than just one, simply paste that same code as many times as you want. Be sure to give each one a unique name though. After you save and upload the file to the custom folder, you will notice that the new sidebar now appears in the widgets section in WordPress.

You can drag and drop any widget you want to your new sidebar or sidebars. However, for this to work, you need to still tell WordPress where in your theme you want the sidebars to appear.

Step 2 – Where To Display The Widgets

Now all you need to do is paste in this code wherever you want the widgetized sidebar to appear:

<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('YOURSIDEBARNAMEGOESHERE') ) : ?>
     <p>This is what shows when no widgets are added.</p>
<?php endif; ?>

Obviously you will need to insert your sidebar name in the place shown above. Since we’re working in Thesis, you can’t just paste this into a footer.php file for example. So I recommend you either use the Thesis Openhook plugin or just use your custom_functions.php file to insert this code in the applicable location using Thesis hooks. A big part of this is also the CSS styling. I’m not going to get into that since you’ll want to style it in a way that works with your design, but if you have questions, leave a comment and I’ll respond. If this was helpful for you, leave a comment too!

Was this post helpful? Consider subscribing to my blog via RSS or

This Site Runs on the Thesis WordPress Theme

Thesis Theme thumbnail

If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced user, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.

If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:

{ 16 comments… read them below or add one }

suraj October 26, 2010 at 8:15 am

Nice tutorial, I am working on my new blog with thesis and I hope it will work for me.
suraj recently posted..Collection of Most colorful desktop wallpapers

Reply

Sig Kappel December 9, 2010 at 9:16 pm

Fantastic..
2 steps, kept it simple..
Thank you!
Sig Kappel recently posted..Is Your Google Adwords Ad Effective For Your Business

Reply

Dave April 17, 2011 at 10:20 am

Thank you for the code. I struggle a bit with CSS. However, I wonder why when I follow your instruction there is a bullet before the widget header?

Dave

Reply

Thesis-Blogs.com April 17, 2011 at 10:26 am

I had a look at your site and don’t see the bullet, so perhaps you figured it out. But if that happens, you want to add a “list-style:none; ” to the element where you’re seeing the bullet. Typically something like this: .custom #something ul { list-style:none; }

Reply

Regina June 19, 2011 at 8:14 pm

How can you make a widgetized footer “sticky”? I’m not sure how I can combine this code with the other code from the sticky tutorial to make it work. Any suggestions?

Reply

Thesis-Blogs.com June 19, 2011 at 11:14 pm

If you’re referring to this sticky footer tutorial, then there should be no difference if you’re widgetizing the footer. As long as the necessary HTML tags appear in the right places, it will work.

Reply

Regina June 20, 2011 at 6:58 am

Sorry, but I’m new to all of this. I’m learning, but I don’t know how to know if the HTML tags are in the right place. As of now, I have both code in there, but the footer is not sticking to the bottom. I also don’t know how to edit the HTML in my pages. I read somewhere that you can’t edit the HTML on Thesis, that you have to do it with only php & css. Is this not true?
Regina recently posted..Pampers Splashers – only 689 SHIPPED!

Reply

Thesis-Blogs.com June 20, 2011 at 10:23 am

The code will insert the tags in the right place. I had a look at your site and it looks fine to me. What is the problem?

Reply

Regina June 20, 2011 at 11:08 am

On pages where there is little or no content, the sidebars are overlapping with the footer. For example, if you click on ‘Giveaways’ you can see what I mean.

Reply

Thesis-Blogs.com June 20, 2011 at 6:25 pm

I see what you mean. I had a quick look at the code and it seems fine to me. It would take me longer to try and troubleshoot and can’t really dedicate the time to it right now. My suggestion right now would be to fill the page with some copy so it pushes the footer down. You could also try disable some of your plugins to see if that resolves it.

Reply

eDee October 21, 2011 at 11:50 am

This worked like a charm, only one little problem
This is my test site http://how2fakeit.com/ (fresh install)
Can you tell me why the 3 new sidebars are all in 1 line up and down and not side by side?
I need 3 straight across.
Thank you.

Reply

Thesis-Blogs.com October 21, 2011 at 12:04 pm

I’m not seeing three sidebars on your site. Also, to clarify, I wouldn’t use this to add a “sidebar” to the typical sidebar section of your site. It’s mainly used for a multi-column widgetized footer. To add additional sidebars, just use the thesis options.

Reply

eDee October 21, 2011 at 1:27 pm

Hi,
Sorry, I had to delete the theme and reinstall it. I have no idea what I did wrong, but I created one bad error.
Anyway, I have the thesis theme back up. I did step 1, installed “Thesis OpenHook”
Put the second code into the Footer and checked the ‘Execute PHP’ option.
And it worked! YAY, but can you post an example of what the code would look like if I needed 3 sidebars at the bottom, please.
Step one reads to repeat it as many as you need and give each one a different name – I tried that and they stacked themselves up. Do I need to change anything in the CSS? (I’m using Thesis 18)
What do I have to do with step 2 (putting the code into the OpenHook footer part) to get the sidebars across?
Thank you for your help. This is a wonderful tutorial, I know I’m just missing one little piece that’s going to pull it all together.

Reply

eDee October 21, 2011 at 1:29 pm

PS Yes, I’m using this in the footer.
Please forgive any delay in my replies, kids are getting home from school :)
(If I can’t get back here before dinner I’ll be back at 9 eastern.)
eDee recently posted..Hello world!

Reply

Thesis-Blogs.com October 22, 2011 at 11:01 am

Try this slightly modified method. Remove the code from your openhook plugin and paste this into the custom-functions.php file:

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

function widgetized_footer() {

?>
<div id="widget_footer">
	<div>
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ) : ?>
		<?php endif; ?>
	</div>

	<div>
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) : ?>
		<?php endif; ?>
	</div>

	<div class= "last">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) : ?>
		<?php endif; ?>
	</div>
</div>

<?php
}

add_action('thesis_hook_footer','widgetized_footer');

Here’s some basic styling for your custom.css file. You’ll need to modify or add to it as desired:

.custom #widget_footer {
	overflow:hidden;
}

.custom #widget_footer div {
	float:left;
	width:30%;
	margin-right:10px
}

.custom #widget_footer .last {
	margin-right:0;
}

Reply

eDee October 22, 2011 at 12:14 pm

Thank you so much.
I figured out most of it this morning, but your code just helped me put the final touches on it.
Thanks again,
~e
eDee recently posted..$25 Gulf Gas Card Giveaway

Reply

Leave a Comment

When commenting, you can use basic HTML tags. If you are pasting in any code, please escape it here and then include that code within <pre></pre> tags. Thanks!

CommentLuv badge

Previous post:

Next post: