Add a widget anywhere in 3 simple steps
Widget areas are not just for sidebars you may want to place them anywhere on your theme. This tutorial is going to easily show you in 3 simple steps how to add a widget area to anywhere. For illustration purposes I’m going to use the default BuddyPress 1.2 theme.
We have both a video for this tutorial and below that the steps outlined for you.
Tutorial video
The tutorial
First of all you need to decide where you are going to add your widget area. Some themes will have specific styling depending on where you place the widget along with styling you need to put in your widget declaration in your functions.php file. We’re going to keep it simple though for this tutorial. Our new widget area is going to be above the login / logged in user section of the sidebar.
1. Open up file you’re adding widget area into.
This first step requires us in this case to open up sidebar.php we’re going to first locate the section we want to add the code in and for us it is line 5. Now we’re going to place the code:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar-Demo') ) : ?>
<?php endif; ?>
As you can see we’re calling the sidebar demo here. Save that file.
2. Add to functions.php
Open up functions.php and find where the sidebars are declared in your theme. In BuddyPress 1.2 Default it’s at line 8, once we are there we add from line 16 the following code:
register_sidebars( 1,
array(
'name' => 'Sidebar-Demo',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
You can see we are making sure the same name is used as in Sidebar-Demo and also we use the format already used in the default theme. Save that file once you’ve added your code. You can read more about the functions register_sidebars and register_sidebar at the codex. In this example we just copy the default BuddyPress code but the rule is register_sidebar for one and register_sidebars for more than one.
3. Add your widget:
Go into your admin and select appearance > widgets and find in this case Demo and add a widget. Make sure that’s set and then refresh your front of the site. There you go, that’s how to easily add a widget area to any part of your template.
For those that want to go a little beyond this you may want to have a message if no widgets are selected so you could where you place the code in your theme file simply add the following (you would want to style the class textwidget yourself):
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar-Demo') ) : ?>
<div>
<?php _e( 'Please log in and add widgets to this section.', 'buddypress' ) ?>
<a href="<?php echo get_option('siteurl') ?>/wp-admin/widgets.php?s=&show=&sidebar=sidebar-demo"><?php _e( 'Add Widgets', 'buddypress' ) ?></a>
</div>
<?php endif; ?>
As you can see with these simple steps it’s really easy to add a widget area to any part of your theme. We hope you enjoy this tutorial and if you want to have tutorials on any other subjects just let us know.
Comments : 18
Leave a Reply
thanks for the tutorial. I’d like to add a widget area above the homepage in your Studio theme: I’m assuming I need to use a different php file to do that, rather than using sidebar.php.
which file do I need to use?
thanks,
Terri
the best tutorial ever for this argument
I used it 3 times and everytime
This Tutorial is awesome!
It works perfect.
Thank you so much
@Darryl: Only one I know of is about multiple ones sorry: http://wpmu.org/how-to-create-multiple-sidebars-for-buddypress-no-template-edits-required/ – maybe that is it? I think you will find though it’s very easy to do without a plugin though.
Tammie,
Isn’t there a wp-plugin that facilitates this procedure? It seems to I have seen one somewhere, I just can’t find my way back to it.
If I recollect correctly it was a PLR product if that helps.
No sweat, just thought you might be familiar with it.
@Justin: Sorry you’re having issues. Without any more information my guesses would be you the following:
You have a theme that calls sidebars in a different way?
You are not having the same sidebar names in functions.php and also in the place you want to put your widget?
You have a plugin interfering somehow with this – this is a really long shot as simply should not happen.
If you can maybe paste / link to what you’ve done so far I would be more than happy to take a look but unsure what could be the root of your issue at this point without seeing it.
Tammie ~
I’ve been working on and trying to do all of this for days.
I can’t get the demo-sidebar to show up under widgets…
~ Justin
Great thanks!
@Drdave: It works with any theme.
Tammie will this help me with the BP-Social Theme? I really love it but will like to try some new layouts especially below the top-header.
Thanks Tammie
Dave
@PubDirLtd: You can use this method to add widgets literally anywhere on the site but it would be a case of you having to either create CSS / XHTML columns or just having the really wide column widet area of the home page widgetised.
That’s exactly what I was looking for Tammie. Thank you very much. I’ll try and get my head round it if there’s a problem get back to you. I found this the other day http://www.blogohblog.com/adding-extra-sidebar-to-your-wordpress-theme/ and it seemed to get me half the way there. Maybe I can put them both together and succeed this time. We’ll see.
Can I use this method to add a second sidebar (and widgets of course) to the latest BuddyPress standard theme, so that I get narrow, wide, narrow colums? I know there’s a standard 3 column theme already but it has problems and falls over if you access it with Internet Exploder.
You should be able to add a widget to any area using the same principle. For instance the method used in our themes often is to have a locate_template or includes to bring a file in. This code can literally be placed anywhere that’s the beauty of widgets. Just let me know if you need any further explanation but I’d suggest you check out the following links to see about including files:
http://codex.wordpress.org/Function_Reference/locate_template
The method I’m suggesting would roughly be this way:
Normal file contents
locate_template contents
More normal file contents
With in the locate_template file being the widget call that is linked to in functions.php. Personally I like to keep all declarations in one place in the functions.php file but you could in theory use the same principle for that. However, you could link in the other core elements like we do in for instance our Daily theme in the functions.php file using the same format or an includes.
For an example of this is our Daily theme functions.php we have a call to the directory we keep all our files which is library and then a require_once on files for the functions file in this case custom-header which enables custom headers.
define('DEVLIB', TEMPLATEPATH . '/library');
require_once(DEVLIB . '/functions/custom-header.php');
Thanks for the tutorial.
I’m using a wp theme that uses custom functions and css files so that I can preserve the core code for future theme upgrades.
Can you please advise how I would place the code in a custom functions file? So that the widget can appear inside a post or page.
Thanks for your help.
Paul