Easily hide specific tabs on BuddyPress member and group pages

hidding-tabs

Today I received a question on Twitter from @Calzo:

[tweet https://twitter.com/#!/calzo/status/167981462283501568]

I’d thought I’d share the solution with everyone, in case someone else would like to know! We’ll be using some simple CSS to quickly hide any profile or members tabs we don’t need. “Why would you do this?” I hear you ask. Well if you’re building a custom theme or forking BuddyPress templates, you might change up your navigation which could make certain tabs not needed anymore. A good example for this can be seen in my latest BuddyPress Theme called Balance. It comes with a simple member widget that makes the “Profile” tab unneeded when being used:

Screen Shot 2012 02 10 at 6.23.09 PM 300x228 Easily hide specific tabs on BuddyPress member and group pages

Hiding the unneeded tabs with some CSS

So how would we hide the tabs we don’t need? Simple we’ll use some CSS to hide them! Luckily every tab has it’s own unique ID, so we can easily target them. Let’s start with the profiles.

Hiding Profile Tabs

/* Hide Certain Profile Icons  */
#user-activity {
	display: none;
}
#user-xprofile {
	display: none;
}
#user-friends {
	display: none;
}
#user-groups {
	display: none;
}
#user-profile {
	display: none;
}
#user-settings {
	display: none;
}
#user-messages {
	display: none;
}
#user-forums {
	display: none;
}

Those are all of them, and if you’d use this code you’d lose all tabs. So remove the CSS of the ones you’d want to keep. If you’re done and you know some CSS, you can combine them into one declaration.

Hiding the Group Tabs

/* Hide Certain Group Icons */
li#members-groups-li a {
	display: none;
}
li#forums-groups-li a {
	display: none;
}
li#admin-groups-li a {
	display: none;
}
li#invite-groups-li a {
	display: none;
}
li#home-groups-li a {
	display: none;
}

And that’s it! Add this CSS to the stylesheet of your child theme, so you don’t lose these changes on BuddyPress updates, and you’re golden!

Bonus Tip: Hide tabs added by 3rd party Plugins

If you’d like to hide tabs added by third party plugins, you can use FireBug to quickly find the CSS you need to target. Simply open up your Firebug/Chrome inspector and inspect the tab you want to hide. You get something like this:

Screen Shot 2012 02 10 at 6.40.17 PM 300x195 Easily hide specific tabs on BuddyPress member and group pages

Copy the name of the ID you’d like to change and set a display none on it, using the CSS examples given in this trick. That’s how easy it is!

[tweet https://twitter.com/#!/calzo/status/167993468310917121]

Got any BuddyPress tricks you’d like to see answered?

Leave a reply in the comments and I’ll do my best to answer them in an upcoming trick! Also you can follow me on Twitter to receive the latest BuddyPress news. It’s good to be able to share some tricks with you again!

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.

20 Responses to Easily hide specific tabs on BuddyPress member and group pages

  1. Rick Roberts February 13, 2012 at 9:12 pm #

    Wow, you don’t know how hard I have been looking for this! Thanks so much.

    I wonder if you might answer another question. I want to put a Members tab on the BP navbar. Is that just as easy?

    • bowe March 6, 2012 at 4:42 pm #

      Adding tabs is another thing. I think you should look at the BuddyPress Skeleton Component Plugin to see how that is done. I might dive in as well, because it’s a good question :-)

  2. Ted March 2, 2012 at 9:18 pm #

    Nice, but how about adding tabs to groups? All I want is to copy how the plugin section of the buddypress.org site works. It would be so easy if there was a plugin that lets you add a page to your groups and lets you edit those pages like you would a post. I’d pay for that.

  3. Matteo April 3, 2012 at 3:18 pm #

    Nice for hiding, but if you need to remove from the html, here it is how you should do: http://wordpress.stackexchange.com/questions/14469/remove-tabs-from-buddypress-groups-and-members-pages

    If you need to remove a nav item (not SUBnav item), you can use the function bp_core_remove_nav_item(ITEMNAME)

  4. William Melvin May 11, 2012 at 11:15 pm #

    On my site being anonymous is essential. When a member is getting e-mail notifications when some blogs on their group the notification has that blogger’s e-mail with it. Is there any way to get a notification e-mail without that bloggers e-mail address showing up?

  5. aditya May 12, 2012 at 7:26 pm #

    hi, i am in the middle of a project and i am stuck!!! So, we have 3 types of groups- public, private and hidden. All of these are listed separately. Now, we need to show the activity streams of all the three types (public, private & hidden) in different subnavs under the ‘activity’ nav item. So whichever groups a user is part of, the activity streams of those go into their respective subnavigations.. I hope i was able to make some sense.. it’d be great if you could help me out.

  6. Jaime May 23, 2012 at 10:59 pm #

    First of all thank you for a providing this great resource, i was wondering if you had any solution to the problem discussed in this thread: http://buddypress.org/community/groups/how-to-and-troubleshooting/forum/topic/interactive-profile-fields-during-registration/?topic_page=2&num=15&_wpnonce=a46737cde2#post-122997

    Cheers Jaime

  7. Eric Andrew Lewis June 18, 2012 at 3:12 pm #

    Your CSS solution works as a quick and dirty solution, however it could be hacked by inputting the exact URL to the link that’s being hidden. A more secure / robust solution might be modifying the $bp->bp_nav array around the bp_init action.

  8. Kris Cone July 19, 2012 at 9:00 pm #

    Thanks for the info.

    Is there any plugin out there that lets you manage the buddy press tabs?

    We would like to Move some tabs under other tabs. For example, move Settings under Profile, because it kind of fits better there with the password, notifications, etc being part of Settings. We also might then have a need to do some drop downs from there if a sub nav menu item has options as well. For example, once you add a following plugin, you now have Friends, Followers, Following, Groups, etc….could be combined into ONE Social tab, but some of these sub menus have their own sub menu items…

    Thanks

  9. mike August 1, 2012 at 11:43 pm #

    random question

    how do you get that native looking twitter widget?

  10. Nicolas Galarza Ricci December 20, 2012 at 1:22 am #

    Hi everybody! Ok, after 10 hours of research and trying, I surrender and ask to people who know more than me.

    I’m trying to change the default tab “home” of each buddypress groups for the “forum”, so I can Hide (in the way this post explains, cause that does work!) the “home” tab and only use the forum.

    I’ve tried hundreds of different codes I’ve found on diferent blogs and with some changes I made but no one does ANYTHING in the way the tabs are shown or oppened in the groups.

    The last one I tried is this one (the simpliest one) http://screencast.com/t/tJE8UFQy7

    There is also the root in which I created the bp-custom.php file.

    I can’t think anything to fix this. Please could anybody help me with this? Does anybody thing about anything that is causing this?

    Thank you all!

  11. Ollie Silviotti January 8, 2013 at 5:31 pm #

    If anyone else wants to know how to remove the tabs completely rather than just hiding them with CSS, I combed through the $bp object (thanks to Eric Andrew Lewis for the tip) and found that the top level tabs are held in an array under $bp->bp_nav and the sub navigation (the one that sits underneath the tabs) is held in another array $bp->bp_options_nav

    What I did was to var_dump() those 2 arrays so I could look at the contents and see what I wanted to remove and then did it like this:

    add_action(‘init’, ‘removeTabs’);
    function removeTabs() {
    global $bp;
    if(isset($bp->bp_nav['activity'])) {
    unset($bp->bp_nav['activity']);
    }
    }

    That removes the top level activity tab, use $bp->bp_options_nav if you want to remove something from the sub nav

    Hope that’s helpful to somebody

    • Pearson January 13, 2013 at 5:50 pm #

      Which file would I add this?

      • bowe January 13, 2013 at 7:20 pm #

        To style.css of your currently active theme :-)

      • Ollie Silviotti January 13, 2013 at 8:26 pm #

        For the CSS fix, style.css; for my solution you can add it to the functions.php file of your theme

  12. Kris Cone April 28, 2013 at 6:22 pm #

    is there a way to move a top level menu item, like followers or following, to under a main tab, like Friends? I have a plugin for follow and it adds a top level, which i would like it as a sub menu item.

  13. charliepryke September 11, 2013 at 1:39 pm #

    Sorry, this just hasn’t worked for me.

  14. Patrick September 24, 2013 at 1:04 am #

    Is there any way to remove the RSS tab in Buddypress group. I have disabled the RSS feed with Disable FEEDS plugin but I cant get rid of the RSS tab.

  15. charliepryke January 24, 2014 at 5:20 am #

    Is it possible to hide tabs for a specific group?
    For example, you might be able to see members and forums on one group, but not in another?

  16. Michael February 27, 2014 at 3:05 pm #

    Thanks for this great lesson. Please, where can I put the .css file in my child-theme to avoid over writing during updates. Thanks

Leave a Reply