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





































{ 16 comments… read them below or add one }
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
Fantastic..
2 steps, kept it simple..
Thank you!
Sig Kappel recently posted..Is Your Google Adwords Ad Effective For Your Business
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
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; }
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?
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.
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!
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?
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.
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.
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.
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.
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.
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!
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; }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