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.
- Upload the file
page-component.php to your WP theme directory.
- 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.
- 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').
- 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.
- 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.
- 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.
- Immediately before the body close tag, paste the following code:
<div id="bpContainer">
</div>
- 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.
