sidebar
Coding

How to give every BuddyPress component itís own dedicated sidebar

Hi folks! It’s been a while since I’ve been able to write awesome BuddyPress tutorials. It’s not because I got bored with BuddyPress, there was simply too much BuddyPress related stuff going on. I spent some time working with the WooThemes guys on Canvas for BuddyPress and my BP-Slick Theme has almost sold 100 copies. And I’m also working on a something extremely secret called Infinity, which should make all you BuddyPress lovers really happy!

Anyways I’ve decided to pick up the pace again, and have some great tricks in the works. This being the first one; 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.

/* 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>',
)
);
}

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 dynamic_sidebar( 'sidebar' ) ?>

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

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' )
 ?>

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!

About Bowe Frankema

 How to give every BuddyPress component itís own dedicated sidebar Building communities on BuddyPress is something I‚Äôm very passionate about. The decision to focus exclusively on BuddyPress projects over the last few years inspired me to share back some of the things I've learned here on BP-Tricks! You can find me on WordCamps & BuddyCamps across the globe and on Twitter! Follow me on Twitter

I'm constantly updating my BuddyPress Hosting Guide and SiteGround and WPEngine
have proven to be a great fit for hosting your BuddyPress community.

Need some help finding the perfect host? Check out my in-depth BuddyPress Hosting guide!

Discussion

11 responses to ‘How to give every BuddyPress component itís own dedicated sidebar

  1. 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 :-)

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

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

    Besides that I could not find any problems :) Very nice!

  3. 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 *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>