Displaying the BuddyPress admin bar in other applications

Cross-posted at the CUNY Academic Commons Dev Blog

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.

7 thoughts on “Displaying the BuddyPress admin bar in other applications

  1. Aaron Crews

    Boone – thanks for the tutuorial. I would have never figured out that method. I gave it a shot, but couldn’t get it working. The div is going in properly before the /body tag and the script calls and stylesheet are getting pulled in, but the bp-bar-integration.js is failing at this line:
    jQuery(document).ready(function(){
    wikiIntegration.initLoad();
    });

    Any ideas?

    Reply
  2. Boone Post author

    Hi Aaron. It’s hard to know without seeing your setup, but it sounds like jQuery’s not getting loaded correctly. Try sticking a test line like alert("Hello"); right before the wikiIntegration.initLoad line. If it works, jQuery is working and there’s something wrong with the wikiIntegration function. If not, your path to jQuery might be wrong.

    Someone drew it to my attention that there’s a typo in the bp-bar-integration.js file I uploaded last night. The path in the first line of the wikiIntegration function reads /pbnavslug/ instead of /bpnavslug/. See if that’s affecting you. (It’s been changed in the zip file.)

    Reply
  3. Aaron Crews

    Thanks for the response – I got it working. The pb thing was a problem for me. After fixing that, I still didn’t get an alert after adding in that test line. I had inadvertently put the jquery script line after the bp-bar-integration line so jquery was loaded, just not *yet*. Thanks again for the help. Some small css work on mediawiki and I’ll be in business!

    Reply
  4. Boone Post author

    Aha! I had literally just realized that you had to have the jQuery in the right order about 2 minutes before reading your comments! I have updated the instructions accordingly.

    Glad it’s working for you!

    Reply
  5. Aaron Crews

    I guess some of the tags got stripped out of the above comment. The bottom line is that I edited mediawiki as follows:
    1. I added the div before the tag by editing the bottomScripts function in /includes/Skin.php
    2. The scripts in the header had to be added to the actual skin file. So for the default skin, I added the lines to /skins/MonoBook.php
    3. The toolbar on top overlapped some of the menu and there was a gap between a couple of elements. I modified /monobook/main.css to move the body up 30px and the globalwrapper down 50px.

    Boone – you can delete my prev comment.

    Reply
  6. Pingback: BuddyPress Bar on external pages - WordPress Tavern Forum

Leave a Reply to Boone Cancel reply

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