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!
- - - - - - - - You've finished reading How to give every BuddyPress component it’s own dedicated sidebar on BP-Tricks.