How to customize BuddyPress admin bar

When I re-designed AvenueK9.com, I didn’t want to have the default BuddyPress admin bar displayed like the one below.

And when WordPress 3.1 shipped out with the its own admin bar (below), I didn’t want that either!

Both are very useful, but when your only focus is to design something that doesn’t look so out-of-the-box, in terms of BuddyPress and/or WordPress designs, you’ll inevitably find yourself writing writing some custom code snippets. In my case, to de-clutter all whatever-bars, I started from scratch and hard-coded my own navigation. The neat thing is, since my current Avenue K9 BuddyPress theme is a child theme off of the Default BP theme, WP and BP upgrades are still a breeze. I don’t anticipate the actual navigation items changing either, so these following set of mods have worked out for me thus far.

Before I dive straight into the what and how, let me just say this: The following is not an official guide for how to customize the BuddyPress Admin Bar much like my previous how-to BuddyPress post. In fact, I scoured the BP forums on how to do exactly this, so if the php code isn’t quite kosher, feel free to only use whatever information you feel applies to you.

Let’s start. Here’s a picture of what we’re about to do…

As you can see, I’m also running Paul Gibbs’ Achievement plugin on my dog site, so you can see how an unlocked Achievement notice would look like in action.

Step 1: De-cluttering the WP/BP bars

To remove the default BuddyPress Admin bar, open up your wp-config.php file and add this line near the Multi-Site lines..

define ( 'BP_DISABLE_ADMIN_BAR', true );

To remove the WordPress 3.1 admin bar, add the following line to your functions.php file…

<?php add_filter( 'show_admin_bar', '__return_false' ) ?>

If your theme does not have a functions.php file, launch Notepad, create a file called functions.txt, upload it to your server, change the extension from .txt to .php and copy/paste the line above.

Step 2: Create a new BuddyPress function to initialize your custom BP admin menu

Create a new php file labeled bp-functions.php and upload it into your theme folder; this is in addition to your functions.php file — they are two separate files.

Next, copy/paste the code below into the bp-functions.php file:

< ?php function my_bp_adminbar_notifications_menu() {
	global $bp;

	if ( !is_user_logged_in() )
		return false;

	echo '

• loggedin_user->domain . ‘”>’; _e( ‘Notifications’, ‘buddypress’ ); if ( $notifications = bp_core_get_notifications_for_user( $bp->loggedin_user->id ) ) { ?> < ?php } echo ‘‘; echo ‘
  ‘; if ( $notifications ) { ?> < ?php for ( $i = 0; $i <li >
• <a href=”loggedin_user->domain ?>”>

	< ?php
	}

	echo '

';
	echo '';
}
?>

Step 3: Add custom BP admin navigation items to your theme

This step will most likely take place in your theme’s header.php file, unless you’ve got some seriously tricked-out version of your theme. For the AvenueK9.com site, I used the following code:

• My K9 Account
  • <a href=”profile/edit/”>My Profile
  • <a href=”achievements/”>My Achievements
  • <a href=”messages/”>My Messages
  • <a href=”groups/”>My Groups
  • <a href=”friends/”>My Friends

  < ?php function my_bp_adminbar_notifications_menu() { global $bp; if ( !is_user_logged_in() ) return false; echo ‘

  • loggedin_user->domain . ‘”>’; _e( ‘Notifications’, ‘buddypress’ ); if ( $notifications = bp_core_get_notifications_for_user( $bp->loggedin_user->id ) ) { ?> < ?php } echo ‘‘; echo ‘
    ‘; if ( $notifications ) { ?> < ?php for ( $i = 0; $i <li >
  • <a href=”loggedin_user->domain ?>”>

  < ?php } echo ‘

  ‘; echo ‘

';
	}
	?>

• <a href=”settings/”>Settings
• <a id=”logout” href=”">

Notice that the line below (second nav item from the top) links to the directory for the Achievements plugin. You do not need this line, if you don’t want to display it or if you’re not running the plugin on your site.

<li><a href="<?php echo bp_loggedin_user_domain() ?>achievements/">My Achievements</a></li>

Step 4: Applying CSS to your Custom BP admin navigation

This step is all up to you and how you want to display your nav items. I decided to stick with the multi-dropdown navigation but you could as easily also display it as a horizontal bar (like an older version of the official BuddyPress.org site had it, if you were lucky enough to see it!). There are a thousand different ways to style this, so suffice to say that I won’t go over this step in detail. Just style away!

Step 5: Hiding custom BP admin navigation for logged out users (optional)

If you even want to go a step further with your BP mods, you can do the same thing I did at my dog site — hiding the buddypress admin menu for logged out users like so…

This actually serves two purposes: Not only will logged out users not see a bunch of useless nav items (they won’t work if you’re not registered), but replacing “My Account” with “Become a K9ner” actually utilizes this space to register new users. Obviously, the call to action could be something completely different and doesn’t even need to point to your registration page, but if you’ve already dedicated some real estate to the BP admin menu, you might as well use it efficiently.

Here’s how:

I’ve actually created a new nav item and placed it above the custom BP admin code like so (bold)…

<ul id="signup"> <li><a href="http://avenuek9.com/signup/">Become a K9ner</a></li> </ul>
<ul id="navk9">
<li><a href="#">My K9 Account</a>
<ul>

Since the Default BP theme ships with body classes, I can control which navigation is displayed or hidden using the body class .logged-in like so…

body.logged-in ul#signup{display: none}
body.logged-in ul#navk9{display: block}

So if you’re logged in, this css will hide the Become a K9ner link and display the customized My Account nav instead.

That’s it!

If you’ve previously customized your navigation menus on your BP site, you can easily copy over all your css rules and apply them to your newly-created admin navigation. Cheers!

Tags | admin bars, BuddyPress, custom menu, how-tos