English flagItalian flagKorean flagChinese (Simplified) flagChinese (Traditional) flagPortuguese flagGerman flagFrench flagSpanish flagJapanese flagArabic flagRussian flagGreek flagDutch flagBulgarian flagCzech flagCroatian flagDanish flagFinnish flagHindi flagPolish flagRomanian flagSwedish flagNorwegian flagCatalan flagFilipino flagHebrew flagIndonesian flagLatvian flagLithuanian flagSerbian flagSlovak flagSlovenian flagUkrainian flagVietnamese flagAlbanian flagEstonian flagGalician flagMaltese flagThai flagTurkish flagHungarian flagBelarus flagIrish flagIcelandic flagMacedonian flagMalay flagPersian flag

Adding Custom Menus, Links, Drop Downs, & Flyouts To The Buddypress Bar


It is entirely possible to add your own links to the buddypress bar without modifying core files. It is also possible to add your own drop down menus complete with flyout menus. Let me show you how..

First, lets tackle adding a simple link to the buddypress admin bar.

What I’m going to do is tap into the buddypress admin bar and add a link using a php file placed in the ‘/wp-content/plugins/’ folder and activated via the plugins menu. Create a file in your /plugins/ dir and name it erocks-admin-bar-mods.php then drop the following code into it. After this, go to your plugins page, and activate the BP Nav Bar Mods Plugin.

Lets create that simple link!

{code type=php}
<?php
/*
Plugin Name: BP Nav Bar Mods – Add Link
Plugin URI: http://erikshosting.com
Description: Add A Simple Link To The Buddypress Admin Bar
Author: Erock
Version: 1.0
Author URI: http://erikshosting.com
*///Links and Menus Added To The Following Function Are Always Visible On The BP Bar
function bp_adminbar_currentsite_menu() {
global $bp;
?>

<li>
<!– Insert your link url or relative url, and your link text below –>
<a href=”http://EXAMPLE.COM”>EXAMPLE LINK TEXT</a>
</li>

<?php
}

// Call The Function Above
add_action(‘bp_adminbar_menus’, ‘bp_adminbar_currentsite_menu’, 999);

?>
{/code}

Now Lets Add Multiple Links To The Buddypress Bar..

Pay Special Attention to Enclosing The Href In <li> Tags Each Time.

{code type=php}

<?php
/*
Plugin Name: BP Nav Bar Mods – Add Multiple Links
Plugin URI: http://erikshosting.com
Description: Add Multiple Link To The Buddypress Admin Bar
Author: Erock
Version: 1.0
Author URI: http://erikshosting.com
*/

//Links and Menus Added To The Following Function Are Always Visible On The BP Bar
function bp_adminbar_currentsite_menu() {
global $bp;
?>
<li>
<!– Insert your 1st link url or relative url, and your link text below –>
<a href=”http://EXAMPLE1.COM”>EXAMPLE LINK TEXT1</a>
</li>
<li>
<!– Insert your 2nd link url or relative url, and your link text below –>
<a href=”http://EXAMPLE2.COM”>EXAMPLE LINK TEXT2</a>
</li>

<li>
<!– Insert your 3nd link url or relative url, and your link text below –>
<a href=”http://EXAMPLE3.COM”>EXAMPLE LINK TEXT3</a>
</li>

<?php
}

//Call The Function Above
add_action(‘bp_adminbar_menus’, ‘bp_adminbar_currentsite_menu’, 999);

?>
{/code}

So you see its easy to add multiple links, you just have to repeat the format..

Next Lets Add A Drop Down Menu To The Buddypress Bar

All we gotta do is make use of a <ul> tag inside of your parent items <li> tag. Just like this..

{code type=php}

<?php
/*
Plugin Name: BP Nav Bar Mods – Add Drop Down Menu
Plugin URI: http://erikshosting.com
Description: Add A Drop Down Menu To The Buddypress Admin Bar
Author: Erock
Version: 1.0
Author URI: http://erikshosting.com
*/

//Links and Menus Added To The Following Function Are Always Visible On The BP Bar
function bp_adminbar_currentsite_menu() {
global $bp;
?>

<li>
<!– Insert your parent link url or relative url, and your link text below –>
<a href=”http://EXAMPLE1.COM”>TOP PARENT MENU LINK TEXT</a>

//Start The Drop Down Menu By Not Closing The LI Tag From The Item Above, & By Starting A UL Tag Below
<ul>

<li>
<!– Insert your 1st dropdown menu sub item link url or relative url, and your link text below –>
<a href=”http://EXAMPLE2.COM”>EXAMPLE LINK TEXT2</a>
</li>

<li>
<!– Insert your 2nd dropdown menu sub item l link url or relative url, and your link text below –>
<a href=”http://EXAMPLE3.COM”>EXAMPLE LINK TEXT3</a>
</li>

<!– Below Ends The Drop Down Menu By Closing The UL and LI Tags –>
</ul>
</li>

<?php
}

//Call The Function Above
add_action(‘bp_adminbar_menus’, ‘bp_adminbar_currentsite_menu’, 999);

?>
{/code}

Pretty Easy.

What About Flyout Menus? You Know, Sub-Sub-Menus?

No Problem, thats just more easy work with the <li> and <ul> tags.. We just repeat what we did above, but go another level with the <ul> and <li> tags. Watch..

{code type=php}
<?php
/*
Plugin Name: BP Nav Bar Mods – Add Drop Down With Flyout
Plugin URI: http://erikshosting.com
Description: Add Drop Down With Flyout Menu To The Buddypress Admin Bar
Author: Erock
Version: 1.0
Author URI: http://erikshosting.com
*///Links and Menus Added To The Following Function Are Always Visible On The BP Bar
function bp_adminbar_currentsite_menu() {
global $bp;
?>

<li>
<!– Insert your parent link url or relative url, and your link text below –>
<a href=”http://EXAMPLE.COM”>TOP PARENT MENU LINK TEXT</a>

<!– Start The Drop Down Menu By Not Closing The LI Tag From The Item Above, & By Starting A UL Tag Below –>
<ul>

<li>
<!– Insert your 1st dropdown menu sub item link url or relative url, and your link text below –>
<a href=”http://EXAMPLE.COM”>EXAMPLE LINK TEXT</a>
</li>

<li>
<!– Insert your 2st dropdown menu sub item link url or relative url, and your link text below –>
<a href=”http://EXAMPLE.COM”>EXAMPLE LINK TEXT</a>
</li>

<li>
<!– Start The Flyout Menu Off The Item Below –>
<a href=”http://EXAMPLE.COM”>EXAMPLE LINK TEXT</a>

<!– Instead of Closing the LI tag, Start a UL tag To Create The Flyout Menu –>
<ul>

<li>
<!– Insert your 1st flyout menu sub- sub item link url or relative url, and your link text below –>
<a href=”http://EXAMPLE.COM”>EXAMPLE LINK TEXT</a>
</li>

<li>
<!– Insert your 2st flyout menu sub- sub item link url or relative url, and your link text below –>
<a href=”http://EXAMPLE.COM”>EXAMPLE LINK TEXT</a>
</li>

<!– Below Ends The Flyout Menu By Closing The UL And LI Tags –>
</ul>
</li>

<!– Go Back To The Drop Down Menu And Add Another Item –>
<li>
<a href=”http://EXAMPLE4.COM”>EXAMPLE LINK TEXT4</a>
</li>

<!– Below Ends The Drop Down Menu By Closing The UL and LI Tags –>
</ul>
</li>

<?php
}

//Call The Function Above
add_action(‘bp_adminbar_menus’, ‘bp_adminbar_currentsite_menu’, 999);

?>
{/code}

Real easy. You can add multiple flyout menus, just continue repeat the format.



23 Comments

  1. Thanks. I didn’t know about the flyout menu :) Is there a way to make it more dynamic? For example list all internal pages?

    1. I’ll bet if you throw wp_list_pages(‘title_li=’); in there between some php start and end tags, it would work out fine.

      In fact, I just tested it, and it works even in drop downs and flyouts.
      Also, I felt compelled so I wrote an article on it
      Check it out here: Add All Pages To Buddypress Bar Automatically

  2. hey, i’m trying to add my site’s logo to the front of the admin bar (on the very left, next to where the site name is displayed) how would i do that?

  3. I’ll write an article on that tonight and send you a link when i’m done..
    *EDIT* Here is the Link

  4. Is there some “if NOT logged in” code that could be added? I want to add a Register link but not have it show if a user is logged in.

    1. Just wrap the menu item in this CODE: if ( !is_user_logged_in() ) { ... } /CODE
      put your menu item where the ‘…’ is.
      The way it works is the ! mark makes it an inverse statement.
      Remember to put this inside php tags!

      Here is the wordpress codex page on it: http://codex.wordpress.org/Function_Reference/is_user_logged_in

  5. this is exactly this, what i searching for weeks !!! Thanks to yoi !!!

  6. Hi, thanks for providing this very useful guide for adding custom link in BP nav
    I have 2 question:
    1) it is possible to replace or modify a menu (random blog, user) with your plug-in without modify the core of buddypress? Wen it isn’t possible It is possible to decide the position of the custom menu?
    2) It is possible to remove the link in the parent section of the menu?
    I hope you understand my English
    Semir

  7. This is exactly what I needed. How do you do multiple instances of this though?

  8. Really helped me a lot. Thanks.

  9. This plugin is great! However I’m struggling to dynamically call a logged in user’s username in the URL that I’m hard-coding. The usual php codes to echo username aren’t working in the URL I’m inserting, and if I make it relative after username, it looses the /members/ part and doesn’t work.

    How can I call the username in a link I add via this plugin?

  10. Thanks for this post and the one about removing the downward link arrows. They were very helpful in adding some graphic links to the admin bar.

  11. Hello,

    I would REALLY appreciate any advice that you could offer me. I have a plugin enabled that allows user to login/register using facebook. The plugin is working perfectly. However, I would love to add the “connect with facebook” button to my admin bar. I have both the isolated html code (which I believe involves javascript) and the hook to call the button (provided by the developer…it begins with // but I don’t know how to implement that?)

    Would it be possible for me to follow the above instructions and add the coding in between the where you are putting the links?

    Thank you so much!

  12. Thanks a lot for the clear guide, made my work a lot easier :)
    Related to the check, is it possible to have it show up only for those who have access to a page? I made a dropdown menu that lets me add plugins from the front page but subscribers see the same link. Could i specify who sees it beyond just logged in or out?

  13. I added login / logout forms to the adminbar. Maybe someone likes it. please make it a new post 😉

    >>to your plugin:

    <form name="login-form" id="adminbar-login-form" class="adminbar-standard-form" action="” method=”post”>

    <input type="text" name="log" id="adminbar-user-login" class="input" value="” />

    <input type="submit" name="wp-submit" id="adminbar-wp-submit" value="” tabindex=”100″ />

    ———————–
    then in the default.css find ” form.standard-form#sidebar-login-form input[type=password] ”
    after this section ends with a ” } ” add this:

    form.adminbar-standard-form#adminbar-login-form input[type=text],
    form.adminbar-standard-form#adminbar-login-form input[type=password] {
    background-color:#3F3F3F;
    border:medium none;
    color:#FFFFFF;
    margin-top:5px;
    padding-left:5px;
    width: 100px;
    height:14px;
    }

    I’m not good in coding, so please make it clear and make it as a post to the public.
    Thank you for your GREAT LIFE TIME SAVING plugin 😉

  14. Oh :( some php codes disapeard after my comment submitted :( now what should I do? :(

  15. Hi

    thanks for the great tut. How is it possible to add my custom links before the standard-bp-links? Right now, they are added *after* the standard-menus…

    Thanks!
    Raphael

  16. Thank you very much!!!!

  17. Hi,

    Thanks for your posts. I was able to add menus to my BuddyPress bar but can’t understand how to reveal them only to signed-in users.

    I’m not a programmer but tried to wrap what I thought were the menu items in your code to no avail.

    I also tried wrapping the add_action call at the end of your code which returned an fatal error:
    Call to undefined function is_user_logged_in()

    Can you give me more specific instructions, please.

    Thanks.

  18. How could I get the code that generates the links in the bar, so I could stick them elsewhere in my child theme?

  19. Erik,

    No need to respond to my previous reply. I was finally successful. I was able to figure out where to put the code elements from the example.

    Thanks for your work which led me in the right direction.

    Ron

  20. thanks, im mexican and your tuto is great.