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

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!

BuddyPress Hosting Guide Looking for quality BuddyPress hosting? We will guide you through all the available hosting options and help you find the best webhost for your next BuddyPress project!

Something about bowe

BuddyPress fanatic, WordPress Theme designer and MultiSite community builder. Proud co-founder of PressCrew. Loves to use awesome in every sentence. Often described as a Dutch Treehugging Hippie.

11 Responses to How to give every BuddyPress component it’s own dedicated sidebar

  1. josemv February 24, 2011 at 2:00 pm #

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

  2. bowe February 24, 2011 at 2:20 pm #

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

    • josemv February 24, 2011 at 2:26 pm #

      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)

  3. bowe February 24, 2011 at 2:30 pm #

    Yep that would be the best method.. I agree!

  4. Jed Barish February 27, 2011 at 1:26 pm #

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

  5. bowe March 11, 2011 at 10:05 am #

    @jedpga: It should be going into beta by the end of the month! Stay tuned!

  6. Puanthanh March 16, 2011 at 5:54 pm #

    That is partly correct. Check this out
    http://blogcastor.com/extend/codex/how-to-create-buddypress-component-sidebars/

  7. bowe March 17, 2011 at 2:06 pm #

    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!

  8. #denick[VVLVKVVVVKVL] June 1, 2011 at 3:40 pm #

    Do you would like to become more pretty? Do you want to become more
    sexy,well,if you click here , you will know how to do it.

  9. AllMad.org September 12, 2011 at 3:01 am #

    How would I do this for a bbPress forum page?

  10. Frank July 17, 2012 at 12:29 am #

    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