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:

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
[css] /* 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;
}
[/css]

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
[css] /* 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;
}
[/css]

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:

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!

Tagged

Leave a Reply

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