Thesis Tutorial – Creating New Widget Areas

by Anthony on March 28, 2009

[NoticeBox text="This tutorial deals with the Thesis wordpress theme. It may not mean much if you haven't worked with Thesis before."]

The wonderful Thesis wordpress theme comes with two sidebars which are very configurable.  You can insert widgets into either sidebar, exactly as you wish.

But what if you want to put a widget somewhere else?  Let’s take a look at the Tailored Web Services website.  (That’s my employer).   Look at the footer of this site.  There are three columns down there, and each one contains a widget.

So how did that happen?

The key functions here are register_sidebar()and dynamic_sidebar().

Together, these functions allow us to set up an extra “sidebar”, which will be widget-enabled through the wp-admin area.

Let’s start with this:

{code type=php}
<?php
add_action(‘thesis_hook_footer’, ‘customFooter’);
function customFooter() {
?>
<div class=”footer1″>
<ul class=”sidebar_list”>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer1′) ){ ?>
<li class=”widget”>Dynamic Widgets are not enabled</li>
<?php } ?>
</ul><!– sidebar_list –>
</div><!– footer1 –>
<?php
} // customFooter
?>
{/code}

The function customFooter() is designed to insert the right code for a new “sidebar”.  And yes, we’re still calling it a sidebar even though it goes in the footer.

The add_action() line defines where this new block of code should go.  The Thesis User’s Guide contains a reference list of all hooks provided by Thesis.  In this case, we want it in the footer.

The dynamic_sidebar('Footer1') call tells WordPress to output “Footer1″ there if present.

Next, we need to use that register_sidebar() function to let us put widgets in there.

{code type=php}
<?php
register_sidebar(array(‘name’=>’Footer1′, ‘before_title’=>’<h3>’, ‘after_title’=>’</h3>’));
?>
{/code}

By default, your widget titles will always be wrapped in <h3> tags.  You can change that if you want to.  The important argument to this function is the “name”.  The name should be the same as you used in the dynamic_sidebar() call.  Be descriptive:  We should call this “Footer Left”, or “Footer Right” to avoid any confusion later on.

Here’s one I prepared earlier

Paste the code from this page into your custom_functions.php file.  When you add some CSS to float the columns side-by-side, you’ll get the same three-column footer we have on Tailored.

{ 24 comments… read them below or add one }

Career Outlook August 18, 2010 at 3:26 pm

Great post, I have recently bought the thesis after hearing so many good reviews about it but after installing it, I found that it is very difficult to customise it. Thanks for this tutorial, it will going to be very helpful :)

Reply

keythe July 4, 2009 at 8:10 am

Thanks for the response. To be honest, I tried everything you suggested and could not get it to work for me. I pasted your attachment to create the 3 columns and it works fine. I tried the div.col.Footer 1, etc that you suggested to Jim to divide and float the widgets side by side – did not work for me (v.2.8 wp and Thesis 1.5.1 – latest versions). I tried the following: */

#footer div.col {
float:left;
margin;5px 3px 0 0;
padding-left; 10px;
text-align: left;
width: 30em;
}
#footer div.col {
float:left;
margin;5px 3px 0 0;
padding-left; 10px;
text-align: left;
width: 30em;
}
I repeated it so I have two of these and the third I guess just falls into place – did I just get lucky? I tried to change the alignment here – the middle column only to center and when I do that all 3 columns change. I can’t seem to isolate to just the middle column. At least I have 3 columns. I am at my witts end. Maybe I am too old (as my kids reminded me) – I am 60 trying to learn this! I would like it to look like the Tailored site, if possible.
Keythe

Reply

Anthony July 3, 2009 at 11:13 am

Good job Kelcey!

Hi Keythe,
I’ve just commented here with some sample code for Jim that might help you too.

Each widget you put down there will have its own class. Like my Archives widget has these classes: widget widget_archive.

So if I wanted to change the text alignment of different widgets, I might do:
#footer li.widget.widget_archive { text-align:left; }
#footer li.widget.widget_links { text-align:right; }

Make sense?

Reply

keythe July 3, 2009 at 9:47 am

I followed your lead on the 3 column footer for Thesis and I got it to work except the same issue of having them stacked like poker chips instead of spread out across the footer. I continued to read and follow the thread to figure it out. I followed the css from kelcey and it sort of worked. I had to put 3 of the #footer…..etc. in the css file to make them work – and they did EXCEPT, I can’t select the formatting (such as center, right, left text) seperately. If I select text center for one column, they all go centered. I am very new at all of this – started with my first wp/theseis this week! Any help would be appreciated. From what little I have learned about css I am not sure I am doing the right thing. Do I put a value, such as 1,2, or 3 instead of the #? HELP

Reply

kelcey June 19, 2009 at 10:39 am

Hey Anthony – I should have realized that had nothing corresponding to it in my custom style sheet. I just added that class to the style sheet and took away the footer height attribute.. and it works perfectly now. thanks for clearing that up… much better…
—K

Reply

Anthony June 19, 2009 at 10:29 am

Hi Kelcey,

Good job getting to that point. I recommend against using a set height for the footer though.
You can add:
<div style=”clear:both; height:1px; line-height:1px; font-size:1px;”></div>
Underneath the three columns. That’s basically what <div class=”cb”></div> does in my example.

This “clears” the floating elements, pushing the bottom of the Footer container down to cover all the elements within it.

Reply

kelcey June 19, 2009 at 6:40 am

#footer div.col {
float: left;
margin: 5px 3px 0 0;
padding-left: 10px;
text-align: left;
width: 29em;
}

I added this to my CSS and it worked. although after adding it i had to specify a height for the footer, which seemed to be just pushed by the widgets before. in any case… i have it now.. thanks!

k

Reply

kelcey June 19, 2009 at 4:36 am

the funny thing is… im actually a web designer. all of my websites are CSS based. anyway, im not really a PHP guy.. this part im reluctantly learning. just bought thesis. yes, i already reduced the widths on the widget blocks. that doesnt seem to be the problem. ive added a background color to each one so you can see how they are defined. not sure why they wont float correctly. you will see in my header that i have two divs floating correctly, which also change on the subpages.

any help would be appreciated. the site is just a mixture of ipsum lorem and experimenting right now… just getting the lay of the land still….

http://www.kelceyparkerdesign.com/auctionnews/

thanks for your help!

kelce.

Reply

Anthony June 18, 2009 at 9:24 pm

Hi Jeremy and Kelcey,

I recommend you guys invest some time learning more about CSS. It’s invaluable if you’re going to work with the web.

Kelcey, if there’s not enough room for 3 widgets side-by-side at 40em, try using 30em or 20em. Would that help?

If you guys can link me to your sites, I could take a quick look?

Reply

kelcey June 18, 2009 at 7:52 pm

Hi Anthony. i have the three footer sidebars in place, however, this CSS –

.footer1 .sidebar_list li.widget { display:block; float:left; width:40em; }

doesnt seem to be enough to let the three widgets float properly. they are still stacked. im able to float them left or right… but not as a row. is there more CSS that can make this happen?

k.

Reply

Jeremy June 18, 2009 at 11:56 am

Hi Anthony,

I am trying to figure out how to float the 3 footers using CSS but have had no luck. I even peeked at the code on the Tailored site using FireBug but have had no success. I just starting to use css and need some help.

Reply

Nicky June 13, 2009 at 5:35 pm

Hey Anthony,

It helped! Everything is working great now. BIG THANKS to you :D

Reply

Anthony June 13, 2009 at 2:46 pm

Hi Nicky,

My first thought would be that you have whitespace around the code. Your custom_functions.php file should start with < ?php and finish with ?>

If you have any empty lines above/below these tags, that would cause the error message you’re receiving. Does that help?

Reply

Anthony June 13, 2009 at 2:46 pm

Hi Rumblepup,

Yeah, all your CSS should go in your custom.css file. I can’t really help you beyond that – write the CSS that’s good for your site.

Reply

Nicky June 13, 2009 at 11:00 am

To let you know more about warning message received, it says that it cannot modify header information in wp-includes/pluggable.php on line 850 as it is alreadry sent by the code you provided in the post.

Not sure what has happened, but I’m unable to access wp-admin.

Please advise!

Reply

Nicky June 13, 2009 at 10:40 am

Hello,

I’m not sure what I did wrong but I’m getting this warning message everytime I make changes and save them -

“Warning: Cannot modify header information – headers already sent by ……. etc etc”

Please advise!

Reply

rumblepup June 13, 2009 at 9:33 am

I’m lovin’ the ability to add widget areas, but I’m having the same problem as Mark. I’m trying to figure out where to put the css code in the custom.css, or I’m doing something completely wrong.

Reply

Anthony May 20, 2009 at 10:30 pm

Hi Allison,
Sorry for the delay getting back to you. I’ve had at look at your site, and it seems you’ve figured out the CSS to put the widgets side-by-side. If you need something specific, let me know and I can take a look for you. That said, I’d definitely recommend investing the time to learn CSS. You can do some amazing things with your designs.

Hi Kelly,
Sure, you can insert a “sidebar” anywhere. “Sidebar” is basically what Wordpress calls the widget area. You could, if you wanted to, insert a “sidebar” under the first post on every page, for example.
Where I say: add_action(‘thesis_hook_footer’, ‘customFooter’);
That says to insert the sidebar at the Footer hook. You could insert new sidebars on different hooks if you wanted to.

Hi Mark,
With the code I use for my examples, you’d basically have this CSS:
.footer1 .sidebar_list li.widget { display:block; float:left; width:40em; }
Set the width as required for your site. Eg, if you want 3 columns, pick a width that is 1/3 of your total available width.

Hope that helps.

Reply

Mark May 20, 2009 at 6:24 pm

Hi.

I’m very much loving the idea of having some widgets in my footer and I can easily copy and paste the php into my custom functions but I cant seem to get the css to display the widgets as columns instead of the default rows.

I would really appreciate it if you could point me in the right direction here!

Which bits should I be pulling from the php code to use in my css?

Kind Regards

Mark

Reply

Kelly May 9, 2009 at 8:22 am

is it possible to use this to create widgets for the main content area? I’d love to be able to stick widgets in those areas!

Reply

Allison April 14, 2009 at 6:43 am

Hi,
Thanks for this tutorial. I’m very much a newbie so I’m pretty excited that I got your custom 3 column widget code put into my custom_functions file. You say to just add some css to float the columns side by side. I’d like to do that, but that is still pretty greek to me. Could you tell me what code to add to do that and where should I put it? All I can really do is copy whatever you have and paste it in. Creating it on my own is probably not going to happen (yet anyway). I have the open hook plug in. should I put it in there somewhere or back on the custom_functions.php again? I really appreciate your talent!
Allison

Reply

Rick Beckman March 30, 2009 at 12:42 pm

Regarding the first block of code, you can add the code directly to the “Footer” box in OpenHook. The first add_action() link, the last } line, and the function ... { line aren’t necessary (OpenHook virtualizes the creation of a function and the addition of that function to a hook for you.)

Regarding the second block of code — the one-liner — I would bet that would need to be in your custom_functions.php file. All of OpenHook’s items only load when visiting the blog itself — when the individual hooks are processed. Registering a sidebar has to take place at a point that will be *always* processed so that it is active both in the admin panel and on the actual blog.

Reply

Anthony March 30, 2009 at 12:36 pm

Hi Geoff,
I don’t use the OpenHook plugin myself, preferring to edit the PHP files directly.

I’ve asked the plugin author to chime in on this one. (http://twitter.com/KingdomGeek)

Reply

Geoff March 30, 2009 at 9:39 am

Can I use this with Thesis OpenHook plugin?

Reply

Leave a Comment

{ 6 trackbacks }

Previous post:

Next post: