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 '
	< ?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:

';
	}
	?>
  • <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!

42 Comments

  1. Tutorial Komputer April 1, 2011 at 5:27 pm #

    thanks,
    It’s good…..

  2. H April 4, 2011 at 12:30 pm #

    Thanks a lot for this!

  3. Mitzico April 23, 2011 at 8:05 pm #

    I’ll try it. Thanks a lot!

  4. Louis Gubitosi June 4, 2011 at 10:06 am #

    This is great, thanks. There are some spacing issues in your “< ?php" but after I fixed that, everything was great!

  5. Colin June 29, 2011 at 3:35 pm #

    Thank you for writing this tutorial! Your current code is pretty crazy though… I don’t know if it is supposed to be formatted the way it is. Is there a way that you can post the code on pastebin or something so it is formatted nicely? On multiple browsers your code just gets pretty jumbled. I’m not sure what is correct and what isn’t.

    Otherwise it looks great!

  6. Anna September 1, 2011 at 2:02 pm #

    I can’t get step 3 to work… It complains about unexpected T_OBJECT_OPERATOR, expecting ‘,’ or ‘;’ here: return false;
    echo ‘loggedin_user->domain . ‘”>’; _e( ‘Notifications’, ‘buddypress’ ); if ( $notifications = bp_core_get_notifications_for_user( $bp->loggedin_user->id ) ) { ?> <?php } echo ‘‘; echo ‘

    but I don't know what… I have fixed all the spacing in the <?php.. Can you help me please? :)

    • Mike September 2, 2011 at 9:01 pm #

      @Anna – Try this code for Step 3 http://pastebin.com/ZGXvEsxg. If you’re still getting errors, try disabling all of your plugins except BuddyPress and then clear your browser cache, as well.

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

    OMFG I have been looking for this for like 2 months now LOL. Thank you so much! To me, The WP/BP bar takes up too much space (I’m on a netbook), and it looks better when these are integrated into the theme/WP Menu navigation more. Thanks!

    • Mike October 10, 2011 at 3:00 pm #

      Glad it worked out for you!

  8. Anna September 9, 2011 at 5:32 pm #

    Thanks dude!! It works perfectly! :D

    • Mike October 10, 2011 at 2:59 pm #

      Late reply but thank you very much!

  9. Mike October 6, 2011 at 9:54 pm #

    I’m trying to put the notifications in a new sub nav, but I can’t get it to work. This is what I have: http://pastebin.com/jJgjyZCW

    • Mike October 10, 2011 at 2:59 pm #

      Hey Mike, make sure you’ve followed Step 2 with the custom BP function for this to work. Also, you can try these codes instead of what I have in the tutorials (the copy/pasting of php code into the WYSIWYG totally botched evertyhing) — Step 2 – http://pastebin.com/YEas6HFZ
      and Step 3 – http://pastebin.com/ZGXvEsxg.

  10. CJ Kruger October 30, 2011 at 7:23 pm #

    Thanks for the notifications code ( Step 3 ) :D
    Saved me a few hours of searching – had to change it up slightly being used in a custom build admin bar inheriting the wp default admin bar styles.

    • Mike October 31, 2011 at 9:13 pm #

      You’re very welcome!

  11. Danny November 1, 2011 at 8:42 pm #

    Great tutorial, thanks! However, one minor issue.

    Due to the nature of my menu, i cant apply these to UL, and they need to be applied to LI only (it’s one full menu, with only one UL wrapped around it).

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

    removing UL from them did work for #signup, but not for #navk9.
    The following is what I have now, and it works for #signup.

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

    Changing the #navk9 to either of these does nothing either:

    body.logged-in li #navk9{display: block;}
    body.logged-in ul li #navk9{display: block;}

    The register link disappears when I log out. However the account menu doesn’t.

    Any clues? Much thanks!

    • Danny November 2, 2011 at 1:16 am #

      I managed to get around this by using php to include it, rather than CSS to hide the menu item.

      I cut the code for the My Account menu and put it into a seperate file called adminmenu.php (saved in my theme), then added the following code to the menu in it’s place. This way if a user is logged in, they get the My Account menu. If they’re not, nothing appears.

      Just in case anyone’s having the same problem as me, this may be another solution.

      • Danny November 2, 2011 at 1:18 am #

        That was supposed to show

        if ( is_user_logged_in() ) {
        include ‘adminmenu.php’;
        } else {
        echo ”;
        };

        within php tags.

      • Mike November 10, 2011 at 2:02 am #

        I almost went that route but I was already messing around with a lot of body class css, so I just went that route instead. Thanks for posting your method though… will probably help others =)

  12. Ken November 29, 2011 at 3:03 am #

    I’ve been looking all over for a tutorial to replace the admin bar for logged in users with a custom, small drop down menu like this one. Unfortunately, I cannot get this to work. :(

    I did see the pastebin links for step 2 and 3. I did exactly as instructed and do see the items, but it is not a drop down menu, it just shows the items line by line.

    Step 4 mentioned you stuck with the multi-dropdown navigation, that means that it already should have a dropdown navigation as is, correct? Or is there some additional coding involved that I am missing?

    Appreciate any help, thank you. I’m running the latest WP/BP stable install.

    • Mike November 29, 2011 at 4:44 pm #

      Hey Ken – So the way this method works is by showing/hiding everything through CSS. I’m basically using the body class to change the state of what’s being displayed; the html never changes — it’s just hidden. The same goes for the dropdown menu. All the list items are viewable in the html, but the browser only shows you certain things upon hovering. That entire process is controlled through CSS, so you’ll need some rules in your theme to tell the browser “show menu IF user is logged in.” Alternatively, you can try Danny’s way a few comments above. He is literally changing the code based on whether a user is logged in. It’s a bit more intuitive, since it only calls all your menu’s list items based on that condition, so you don’t have to mess around with body classes. Hopefully, that helps a bit?

      • Ken November 30, 2011 at 2:12 am #

        Hi Mike. I understood the difference between showing the menu to logged in users and not showing it to others; however, the strange issue I’m encountering is that I do not see a drop down menu at all when logged in. It shows each of the menu items line by line instead of a mult-level drop down menu incorporated into the link. I hope this makes sense.

        I was wondering if it should have showed a drop-down menu with your coding or did you guys have to implement/research a drop-down menu solution to the items? Thanks.

        • Mike November 30, 2011 at 5:10 am #

          I think what you’re talking about is the second-level dropdown menu. For example the Messages items like this…

          Messages (first level)
          - Inbox (second level)
          - Sent Messages (second level)
          - Compose (second level)
          - Notices (second level)

          If I understand it correct, your menu is not displaying the second level items. If that’s the case, you’re doing everything correct, if you’ve followed the tutorial; the sub-menus (second-level) items are not included in the example above. *BUT* they’re easy to implement/hard code, since they’re all URL-based (ie. for messages, the list item code for the second-level item Sent Messages would reference the link http://yourdomain.tld/members/yourname/messages/sentbox/).

          If I we’re *still* talking completely different issues, you can email me at mike {at} epictum {dot} com for more clarification =)

  13. Kim December 8, 2011 at 11:23 am #

    Hi Mike,
    Thanks for your tutorial! I´ve followed step 1-4, but am experiencing problems now with the menu I´ve created ad the urls are not working :-(

    I also want to add the sublevels, but have no idea where to find the urls for these (as my admin bar is deleted I can´t go to these parts of my site)

    Would you mind if I send you an email with more details?
    :-)

    • Mike December 9, 2011 at 7:28 pm #

      Sure, you can email me at mike [at] epictum [.] com. I can’t promise that I’ll get a chance to look at it right away, since I’m swamped with a bunch of things, so you may want to try out Danny’s way of customizing the admin bar.

  14. Likestodraw December 16, 2011 at 4:28 am #

    I’m not using this for BP, but do you know where the WP menu is in the P2 theme?

    • Mike January 20, 2012 at 6:16 am #

      I don’t use P2 myself, but if I remember correctly, you might just have to drag the custom menu widget into the sidebar and create your nav that way.

  15. Jason Johnson January 17, 2012 at 4:53 pm #

    I’m getting this error Call to undefined function bp_dtheme_page_on_front()

    • Mike January 20, 2012 at 6:15 am #

      Haven’t run into this issue myself yet and you’re the first to report it. Maybe try from the top and see if it could be interfering with another function or plugin? Also, make sure you’re running the latest release of BP. I think in one of the versions there were a specific set of instructions on how to install older themes like mine.

    • frank May 10, 2012 at 8:51 pm #

      I received the same error. I have have turned off every plugin except Buddypress and WPML. the error remains. *note I have placed step 3 script into my member-header.php

      When I placed the script into the header.php nothing happened. At least now I see the links, followed by the error.

      Fatal error: Call to undefined function bp_dtheme_page_on_front() in /mnt/44444/domains/ccarts.ca/html/wp-content/themes/child-CCA/members/single/member-header.php on line 79

      I have tried removing all other functions one by one but then the site doesn’t run at all. (the page is blank)

      • Mike May 16, 2012 at 6:04 pm #

        Hey Frank – Apologies for the bug. I haven’t upgraded BP on my own site, so I haven’t experienced this error yet, but I also (unfortunately) don’t have time to upgrade/troubleshoot this error right now. Someone in the comment thread above mentioned an alternative way to customize the admin bar using php instead of css, so I’d try out that way and see if it’ll work for you.

  16. Towfiq I. January 17, 2012 at 5:15 pm #

    I think the code is not formatted properly. Can you format the code with or something? I don’t understand the code…
    Thanks

    • Mike January 20, 2012 at 6:13 am #

      There are several pastebin links in the thread above that should help you =)

  17. Carlos January 20, 2012 at 5:43 am #

    Hi Mike,
    Thanks for sharing this tutorial.

    • Mike January 20, 2012 at 6:12 am #

      No prob!

  18. Madison January 25, 2012 at 7:48 pm #

    Thanks for this. Exactly what I needed.

  19. Prateek February 19, 2012 at 6:52 pm #

    thanks! :)

  20. Nick September 9, 2012 at 4:01 pm #

    Oh man, I’ve been looking for this solution for ages! Thanks, works like a charm!

  21. Kalmax June 16, 2013 at 11:37 am #

    I tried to access pastebin but its not opening. Can you send any other link you have for the code. Also I want to ask that can I make admin bar looks like linkedin or so? Thanks in advance for your awesome post. :)

Trackbacks/Pingbacks

  1. WordPress Community Links: Gold star cookie edition | WPCandy - March 26, 2011

    [...] bar.Michael Kuhlmann is a WordPress and BuddyPress developer, and this week shared his tips forcustomizing the BuddyPress admin bar.Sarah Gooding at WPMU.org shows how to completely remove BuddyPress from your site after [...]

Leave a Reply