posted by | on , , | 12 comments


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.

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,
‘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’) ) : ?>
<?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>
<?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.



Trackback e pingback

No trackback or pingback available for this article

Leave a Reply