Update: The code snippets in this posts are outdated, please do not apply them in your theme without some coding knowledge. The functionality in this post has been updated and included in the WeFoster Theme.

Download the WeFoster Theme (Free)

Creating dedicated sidebars for every BuddyPress component. Let’s get started shall we?

Step 1: Adding the sidebars in functions.php of your Child Theme

Like always we’ll be using the Parent-Child structure to make customizations to our themes, and stay far away from the templates in BP-Default. So let’s start by adding the following code to functions.php of our Child Theme.

[php] /* Register Extra sidebar attributes */
if (function_exists(‘register_sidebar’)) {
register_sidebar(
array(
‘name’ => ‘Sitewide Sidebar’,
‘before_widget’ => ‘<div id="%1$s" class="widget %2$s’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
)
);
register_sidebar(
array(
‘name’ => ‘Profile Sidebar’,
‘before_widget’ => ‘<div id="%1$s" class="widget %2$s’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
)
);

register_sidebar(
array(
‘name’ => ‘Group Sidebar ‘,
‘before_widget’ => ‘<div id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
)
);

register_sidebar(
array(
‘name’ => ‘Activity/Blog Sidebar ‘,
‘before_widget’ => ‘<div id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
)
);

register_sidebar(
array(
‘name’ => ‘Forum Sidebar’,
‘before_widget’ => ‘<div id="%1$s" class="widget %2$s’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
)
);
}
[/php]

Save your file and check out the new sidebars in your widgets area. Wicked! Now the only thing we need to do is use some BuddyPress Conditionals to show the right sidebars on the right components!

Step 2: Modifying sidebar.php to show the right sidebars on the right components

Open up sidebar.php in your Child Theme (copy it over from BP-Default first, if you haven’t done that) and go around line 69. As you can see the sidebar is being called:

[php]<?php dynamic_sidebar( ‘sidebar’ ) ?>[/php]

We are going to replace that line with the following code.

[php] php if ( !function_exists(‘dynamic_sidebar’)
|| !dynamic_sidebar(‘Sitewide Sidebar’) ) : ?>

php /* GROUP SIDEBAR */ if(bp_is_group()){
if(!dynamic_sidebar("Group Sidebar")){?>

<?php /* PROFILE SIDEBAR */ }}
else if(bp_is_member()){
if(!dynamic_sidebar("Profile Sidebar")){ //if user profile etc
?>

<?php /* Forum Sidebar */ }}
else if(BP_FORUMS_SLUG == bp_current_component() && bp_is_directory()){
if(!dynamic_sidebar("Forum Sidebar")){ //if user profile etc
?>

<?php /* SIDEBAR */ } }
else dynamic_sidebar( ‘Activity/Blog Sidebar’ )
?>
[/php]

So what does all of this code mean? What we’re doing is telling WordPress to only show a certain sidebar on a specific type of BuddyPress component. This is done with so-called “if statements”.  If you convert the code to regular talk it would be like this:

If there’s a sidebar called Sitewide Sidebar registered, show it at all times. Then check on what type of BuddyPress page we are and show the right sidebar. If we’re not on a BuddyPress page just show the Blog/Activity sidebar.

That’s the logic behind the code, and you should now have a dedicated sidebar for your BuddyPress components. I’m planning to do a follow-up Trick about assigning dedicated sidebars for popular plugins, and how to show specific widgets on specific pages only!

In the meantime you can go ahead and submit your own awesome BuddyPress tricks here on BP-Tricks!

11 thoughts on “How to give every BuddyPress component it’s own dedicated sidebar

Author gravatar

0

Very nice !
And how can I show NO sidebar in my forums page ?

Author gravatar

0

Do you want to show no sidebar and have a full screen layout? That means you need to edit some CSS and remove the calls to the sidebar in the template: forums/index.php in your Child Theme. Might be a little bit tricky though if you don’t know any CSS 🙂

    Author gravatar

    0

    Yep, that was exactly what I was implying.
    @bpthemeconverts told me to first unregister the sidebar and then assing full width in css (in forums page, of course)

Author gravatar

0

Great about your new project on Infinity! When do you think it will be available?

Author gravatar

0

Interesting! Your solution is indeed better.. BUT the member sidebar did not work for me then testing. I’ve changed that to this:

[code]
if(bp_is_member()) {
if ( is_active_sidebar( 'member-sidebar' ) )
dynamic_sidebar( 'member-sidebar');
else
echo '<p class="tips">Member Sidebar</p>';
[/code]

Besides that I could not find any problems 🙂 Very nice!

Author gravatar

0

Huh…does this still work with BP 1.5 and a networked site? I tried this out and I had no sidebars at all (and no admin bar at the top of the page!)! Even though in the Dashboard’, I could move widgets into the new sidebars. Basically, what I want to do is have the same side bar for forum and group pages, and the “normal” side bar in the rest of the pages. How should I go about that?

Leave a Reply

Your email address will not be published. Required fields are marked *