Skip to content


Displaying the BuddyPress admin bar in other applications

By popular demand, here’s the method we used at the CUNY Academic Commons to get the BuddyPress admin bar to appear on the non-WP/BP portions of our site. In our case, that means MediaWiki and bbPress, but theoretically this method could work for any kind of software out there.

I should note that I did not devise this method. It was invented by the inimitable Zach and Lucas of Cast Iron Coding.

The concept is as follows. A bit of jQuery looks for a div of a certain ID on a page and, when it finds it, opens a dummy WP page that contains essentially nothing but the BP admin bar loader, which then appears on your page. Download the zip file containing the necessary files (admin-bar-integration) and follow these steps to make it happen.

  1. Upload the file page-component.php to your WP theme directory.
  2. Create a new page in WordPress. The page should be blank. In the Attributes box, select the Template called “Component (do not use)”. Name the page bpnavslug and publish it, making sure that you take note of the permalink. You’ll need that URL (relative to your site’s webroot) in step 4.
  3. If any part of your site creates a menu or a list of your WordPress pages, you’ll want to exclude this empty page from those listings. Find the function call wp_list_pages in your theme (often in header.php or index.php) and add an exclude argument. For example, if the page number of bpnavslug is 4, make sure all references to wp_list_pages read wp_list_pages('exclude=4').
  4. Open the file bp-bar-integration.js. On line 3, you’ll see the path /bpnavslug/. Replace it with the path to the bpnavslug post you created in step 2.
  5. Upload bp-bar-integration.js to your server. For the sake of argument, I’ll put mine at /wp-content/js/bp-bar-integration.js.
  6. Now let’s turn to the application where you want the admin bar to appear. Open the theme file that contains the </body> tag. In bbPress, for example, this is usually footer.php.
  7. Immediately before the body close tag, paste the following code:
    <div id="bpContainer">
    </div>
  8. Next, open the template file that contains the document head (header.php in bbPress, for instance). Make sure that jQuery is also called somewhere in the head. If it’s not, the following code will call up jQuery on a standard installation of WP:
    <script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
    Now paste the following line somewhere in the head (make sure it comes after the call to jQuery):
    <script type="text/javascript" src="/wp-content/js/bp-bar-integration.js"></script>
    Be sure to replace the src attribute with path from your upload in step 5.
    Finally, you’ll have to include the CSS for the admin bar. On a default installation of BuddyPress 1.0.3 or less, the following code will work:
    <link rel='stylesheet' id='bp-admin-bar-css' href='/wp-content/plugins/buddypress/bp-core/css/admin-bar.css' type='text/css' media='screen' />
    On a more recent version of BP (1.1+), the admin bar stylesheet has been rolled in with the rest of the styles. Either create your own stylesheet containing just the admin bar code, or import the entire stylesheet:
    <link rel='stylesheet' id='bp-admin-bar-css' href='/wp-content/themes/bp-default/style.css' type='text/css' media='screen' />

A note: This method appears to be incompatible with the Google Analytics WP plugin (which appends Google’s JS to the footer of every WP page, and thus into bpnavslug, and ends up gumming up the works). You could probably get around this with some creative if-statements in the GA plugin itself.

Good luck. Because of the diversity of people’s setups, I can’t guarantee that this method will work for everyone, nor can I provide support to everyone who tries it. But I do encourage you to post whether you’ve been successful in the comments, and to help each other figure things out.

Posted in Plugins and Extensions.

Tagged with , , , , .


29 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Harry, BikeTravellers.com says

    Thanks, this looks very promising.
    But it did not work…
    Not sure why, tried it on bp1.1.1, MU2.8.4a & MediaWiki 1.15.1

    Changed Monobook.php for the head/body sections.

    All the files seem to get loaded, see http://biketravellers.com/bicipedia for an example, but the end result is that the page is just a weird version (some CSS problem likely) of the normal Monobook (I normally use an unedited, standard version).

    After it looked like this, I did change all the paths to absolute and single quotes to double quotes as you mix them above, but result is the same.
    Any idea? Cheers, Harry

  2. Harry, BikeTravellers.com says

    ps: http://biketravellers.com/bpnavslug/ works, (I think as expected)

  3. Avatar of Boone Gorges Boone Gorges says

    Harry – the Javascript file has the wrong path in the first line. It says ‘pbnavslug’ where it should say ‘bpnavslug’. I think this is a typo from the original file I uploaded. I’ll fix it there.

    Everything else looks like it should work (I think). Looks like you separated out the admin bar css – do you mind if I steal those files and include them in the zip file?

    Boone

  4. Harry, BikeTravellers.com says

    Hi Boone, good catch (I had to read your comment 3 times before I noticed the difference :)
    yes, it was a typo in the original files. I changed it, but no success/difference, see links above.

    Of course, use what you want, but I am not sure if those css files make any difference. As it was not working, I checked the included css files and was not sure if all the relative paths of the included css files would work. But not much difference…

    Seeing the code, I think you also developed it for MediaWiki, less for bb-press? Can you share any specifi code you used for the BP/MW integration that might differ?

    as mentioned, I have wpmu/bp in the root, mw one level down. Permalinks on main blg are domain.com/title. I also changed all paths to absolute URL’s could that cause any problem?
    Thanks, cheers, Harry

  5. Avatar of Boone Gorges Boone Gorges says

    Harry, try changing the order of the jquery and bp-bar-integration script calls in the head. I was just messing around on my local install and I noticed that jquery needs to be called first.

    The code is exactly alike for bbPress and for MW. In fact, just for fun, I made it work on a local page with nothing but lorem ipsum text.

  6. Harry, BikeTravellers.com says

    Cool, now the bar shows, after lowering the bp-bar call. By the way, it conflicted completely with the StatCounter plugin (and so maybe likely with other Footer plugins as well?).

    After showing the bar/footer for a second, the page went blank and showed a Stacounter message before that also went black.

    After de-activating the plugin the bar shows as expected, just my MediaWiki tabs are still floating higher than normal, so I assume there is a css conflict somewhere, will check.

    Cheers, Harry

  7. Harry, BikeTravellers.com says

    ps: the bar only shows up on FF & Safari (Win), not IE (8), though all calls are in the source. Not even teh fancy ‘compatibility view (emulating IE7) shows it, though clearly the same CSS conflicts appear as in FF (which apparently have to do with different definition of ‘content’ in MW).

    No idea why the bar will not show? Cheers, Harry

  8. Harry, BikeTravellers.com says

    Works nicely now, except still nothing for IE. Any MS specialists out there?

    By the way, these additions to MediaWiki:Monobook.css helped me see the tabs, menu and logo again, you can add it to the instructions or files. Probably there are simpler ways, but with the CSS-mix, this might be most secure, maybe tweak a bit for better results:

    #p-logo a, #p-logo a:hover {
    height:210px;
    }
    #p-personal .portlet, #p-personal .pBody {
    margin-top:38px;
    }
    #p-cactions .pBody {
    margin-top:32px;
    }

    Cheers, Harry

  9. Harry, BikeTravellers.com says

    Hi Boone, I noticed that the bar is working on Cuny, even in IE.
    Did you add anything to accomplish that ? Nice layout for the wiki by the way and I like the small Admin bar as well.

    Cheers, Harry

  10. Avatar of Boone Gorges Boone Gorges says

    Hi Harry. I wasn’t the one who implemented the admin bar across our sites, so I’m not sure if anything special had to happen. Have you done troubleshooting (putting alerts in various places in the code) to see how far it’s getting in IE? I’m afraid I try not to think too much about IE if I can help it.

  11. Harry, BikeTravellers.com says

    I don’t use it much either, but 70% of the rest of the world is more important than me :)
    Actually FF has crashed daily this week, but that is a different discussion.

    Have no clue where/how to find it, checked some included files and moved some stuff around, but no success. Anybody else knows how to handle the bugtools in IE8 for http://biketravellers.com/bicipedia ?

  12. Ray says

    That’s a creative solution to adding the BuddyBar!

    You’re right though that any plugin utilizing the WordPress footer will probably need to find some creative workarounds.

    I have one suggestion.

    Instead of get_footer() in page-component.php, you should preferably use wp_footer().

    That way if you have a lot of stuff in your WordPress theme’s footer, you won’t have to worry about it! This is untested, but should work!

  13. Harry, BikeTravellers.com says

    Well, I had given up, as even testing on other skins, and cleaning Localsettings.php & Common.js from MediaWiki did not help, but this tip from Ray gives a twist to the story:

    When I change get_footer() to wp_footer(), then suddenly the BP top nav bar appears in IE8! hurray!

    But simultaneously the footer disappears in FF (and also does not appear in IE)…

    I have no clue anymore about what is going on :)

  14. Ray says

    Hey Harry,

    You could also change get_footer() to:

    if ( function_exists(‘bp_core_admin_bar’) )
    bp_core_admin_bar();

    Try that!

    I actually had to use this AJAX technique to grab some data off the root WP blog to some other WPMU blogs since the switch_to_blog() function wasn’t cooperating with me!

    So Boone (and Zach) just wanted to say that your technique worked for me for something else altogether :)

  15. Harry, BikeTravellers.com says

    Hi Ray, thanks for the note. I tred replacing the fucntion as indicated, but the result was that neither top bar nor footer appeared (both FF & IE), so I changed it back to wp_footer, which at least shows the top bar.

  16. 1stAngel says

    It worked, (after a little play in the css), its awesome, I love you!

    using BP 1.2 the files are now in plugins > themes > your theme

  17. Avatar of Boone Gorges Boone Gorges says

    Awesome, 1stAngel! And thanks for the reminder about themes. I’ll update this post when v1.2 of BP comes out officially.

  18. Harry, BikeTravellers.com says

    Just noticed that this method conflicts with the WordPress stats plugin. When that is activated and the user is not logged in, the MediaWiki page gets shown, including buddybar, and then refreshes to a white screen, with only that annoying little WP stats smiley on top…
    When logged in, this does not happen, when the wp plugin is deacivated, it works fine either way.
    the site is still on BP1.1.3 (wpmu 2.9.1), not tested on new BP yet..

  19. Avatar of Boone Gorges Boone Gorges says

    Harry, it sounds like this is another case where there’s a conflict with wp_footer. You could try setting a condition for wp-stats not to load when the visitor is looking at a wiki page (similar to the one already in place for logged in users) – but then you’d miss those hits. I’ll have to mull over whether there are other solutions.

  20. Flo says

    Is it possible to view the admin bar outside Buddypress on a normal PHP/Html site which is inbstalled on the same server as Buddypress?

  21. Avatar of Boone Gorges Boone Gorges says

    Flo – Yes, that’s exactly what this tutorial is intended to help you do.

  22. Flo says

    It worked. Then I have deletet ”
    ” just to take it out again. Then I pasted ”
    ” in again and it doesn´t work anymore, don´t get it!

  23. Harry, BikeTravellers.com says

    Just one more tip: Somehow it does not play nice with Wp Super Cache. After adding ‘bpnavslug’ to the Supercache excludes, it worked again.

  24. Flo says

    One question. Now it shows in every browser but it seems that i have to load the page a few times and/or I have to visit the Buddypress mainpage before the bar is loading in the extern toplevel page? Annyone know how to fix it?

  25. Flo says

    It seems IE shows the bar every time, but FF only if the user loads first the buddypress mainsite and returns then to the toplefel. I don´t get it. Someone have a idea?

  26. NoahY says

    It’s much easier, and much more extensible (for subdomains, other domains) to just include an iframe with the content:

    and then just style bp-nav as follows:

    #bp-nav {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    margin-bottom:25px;
    z-index:50;
    }

  27. Charles says

    And if in the Attributes box, not appear the Template called “Component (do not use)”?

Continuing the Discussion

  1. Buddypress for WPMU - Displaying the BuddyPress admin bar in other applications linked to this post on October 13, 2009

    [...] Read the original: Displaying the BuddyPress admin bar in other applications [...]

  2. BuddyPress Admin Bar integration | Open Cart Know How linked to this post on October 29, 2012

    [...] I’ve found this tutorial: http://dev.commons.gc.cuny.edu/2009/10/ … lications/ [...]



Some HTML is OK

or, reply to this post via trackback.

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image

Additional comments powered by BackType



css.php