How To Make Your WordPress Theme Compatible With BuddyPress

***UPDATE***

This post is a little outdated now and the new process is outlined at the plugin page in the WordPress repository: http://wordpress.org/extend/plugins/bp-template-pack/

————————————————————————————————————————————————————————————————

BuddyPress 1.2 official release is finally here with native support for WordPress. The BuddyPress site is also sporting a new look highlighting all of the plugin’s features.

bp1.2

We’re going to see floods of new users from the WordPress single user community because of the latest release. You may be asking the question – how can I keep my current theme and incorporate BuddyPress functionality? This tutorial will help you do that.

If you want to keep your present WordPress site theming and include the BuddyPress plugin, you will need to know how to make your theme compatible with BuddyPress. I’m going to walk you through this handy guide, available at the BuddyPress codex, for making your theme compatible.

First thing you need to do is make sure you have WordPress and BuddyPress installed. This has been simplified to 3 steps, as you can see in the instructions currently displayed on the BuddyPress.org site:

install

1. Download and Set Up WordPress with the Famous 5 Minute Install.
2. Plugins >> Add New >> BuddyPress
3. Activate the bundled theme or add your own

This tutorial is assuming that you are wanting to use your own theme but make it BuddyPress-aware.

Step 1. Download the BuddyPress theme extension pack.

This is not something you place in the plugins folder. You need to drop the contents of the extension pack into the WordPress theme folder that you are currently using.

Step 2. Edit the “functions.php” file in your WordPress theme.

Open up this file and add the following line to the very top right after the

1
<?php
1
include( TEMPLATEPATH . '/bp/bp-functions.php' );

Step 3. Add BuddyPress Tags to your theme’s style.css

Add a “buddypress” tag to the top of the file. If you don’t see this line, add “Tags: buddypress” to the last line of the comment header without the quotes. This will tell BuddyPress that your theme is BuddyPress enabled.

Step 4. Refresh your site and check out the changes

The way to know that it’s working is that you will now see the BuddyPress bar across the top of the page. The BuddyPress pages should now be working with your theme, although the stying that comes with the theme extensions pack is fairly basic. You’ll want to get it styled to match your current theme. The ability to make your current theme BuddyPress aware is much simpler than the process used to be and will definitely make WordPress social networking more accessible for those who already have a single user WordPress site in operation. Let us know if you encounter any snags and if you have any more specific tips for adapting themes to BuddyPress. Happy theming! :)

Comments (41)

  1. Hi, i have a question, in the search from (up, right), only is allowed ‘Members’, ‘Groups’, and ‘Forums’,

    I want to add ‘General’, that will search into ‘blog post’, and ‘blog pages’, my question is… how I could do this? I think its a very simple problem, so i think its a very simple solution.

    ;)

    Thanks

  2. Still having problems with step1. Unzipping the extension pack keeps giving me an error about a file with the same name (bp-template-pack), but changing the zip file name or folder doesn’t solve it. Also, assuming the package is successfully extracted, do ALL files contained in the package need to uploaded to the theme’s folder? That is a lot! Thanks.

  3. Thanks for the great post!

    I’m working on a custom BP theme, which needs tweaking … but … during my testing, I continue to get the following at the top of the page (I followed the directions here closely – what am I missing / screwing up??):

    ——————————————————————————-
    Warning: include(/home/getinda1/public_html/imnoob.net/wp-content/themes/psd2css/bp/bp-functions.php) [function.include]: failed to open stream: No such file or directory in /home/getinda1/public_html/imnoob.net/wp-content/themes/psd2css/functions.php on line 2

    Warning: include() [function.include]: Failed opening ‘/home/getinda1/public_html/imnoob.net/wp-content/themes/psd2css/bp/bp-functions.php’ for inclusion (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/getinda1/public_html/imnoob.net/wp-content/themes/psd2css/functions.php on line 2
    ——————————————————————————-

    Thanks for any help or fix-it tips!!

    Jason
    imnoob.net

  4. Copy all the files of bp-template-pack to your main theme directory.

    or change this line in functions.php

    include( TEMPLATEPATH . ‘/bp/bp-functions.php’ );

    into

    include( TEMPLATEPATH . ‘/bp-template-pack/bp/bp-functions.php’ );

  5. Yeah the issue you’re getting is because you tried to upload the bp-template-pack folder to your server instead of uploading all the files inside it. You won’t receive that error if you change the template path as shown in the comment above or simply upload the contents of the folder instead of the folder itself.

  6. Choas / Sarah!

    Is it inappropriate to say, “I LOVE YOU!!!!!” Thank you guys, it worked like a charm and my custom theme is being recognized. Now, on to figuring out how to develop internal customs themes (“child”, right??).

    One note, at least for my isolated case, is it required BOTH the line additional in “functions.php” & correctly copying the bp-theme-pack files to my “wp-content/themes” folder … maybe that was what you were saying all along (forgive my non-techie brain).

    Again, thanks a million (but, I’m pretty sure I’ll be back soon!)

    Jason

  7. Hello! I’ve followed the steps (very simple indeed). However, I received the following error when attempting to click through to the first ACTIVITY link:

    “404 Not Found Error: The requested URL /share/members/Tom/activity/ was not found on this server.”

    The same error occurred when attempting each of the drop down selections (Profile, Messages, Friends, Groups, Settings)

    The theme I am using is located via: /share/wp-content/themes/lightword which is where I added the contents of the BP Template Pack contents (note: I added each folder within the pack, not the parent pack folder itself).

    Within the LIGHTWORD theme, I located “functions.php” and added “include( TEMPLATEPATH . ‘/bp/bp-functions.php’ );” per instructions.

    I then added /* Tags: buddypress */ to the CSS file.

    I saved and uploaded each.

    Any suggestions on what I should modify? NOTE: I am NOT a PHP programmer.

    Thanks for any help!!

  8. This is really cool. Thanks for sharing the info.

    I’ve got on BP site running on v 1.1.3 with two plugins – bp link and bp events. I’m still running wpmu 2.8.6 and too scared to update the wp version as I might break the other plugins – lots and lots of custom code. Do you know of anyone that can assist in the upgrading of my system?

    Regards,
    AntonRSA

  9. I am attempting to add bpress 1.2 to a child theme for the new Studio Press Genesis theme. Should I add the extension pack to the child theme folder or the main Genesis directory?

    Thanks!

  10. ChaosDarky,

    I tried the following method and it didn’t seem to make a difference. My links still do nothing.Try to use my permalinks structure..

    /%category%/%postname%.html

    Michelle – did that work for you?

  11. I’m struggling with step 3. I don’t know css at all. Where and what do I need to add the tags to. Any help you can give me would be great, I’m still getting the “buddypress is ready” message on my dashboard.

    Thanks!

  12. This new plugin is such a great help in setting up buddypress with your own theme. Still doesn’t change the fact that my buddypress bar links don’t go anywhere. They just refresh the home page. Does anybody have a solution for this?

  13. HEre’s what the BP compatibility says:

    To remove the “BuddyPress is ready” message you will need to add a “buddypress” tag to your theme. You can do this by editing the style.css file of your active theme and adding the tag to the “Tags:” line in the comment header.

    So..I go to the style.css and click on the “comments” on the right hand toolbar (which brings it up in the style.css).

    Question where exactly is the “Tags:” line? and when I find it I am needing to type the word “buddypress” there. I’m assuming “tags: buddypress”…???

    Thanks so much for your help. I can’t wait to get started building my site!

  14. This is a perfect solution but there’s one question I’ve been asking everyone, when we add buddypress to the main theme how do we get the profile layout to match rest of the site?

    How do we add widget areas to the homepage of the theme, i.e in the content areas to display latest activities etc?

    Sounds quite confusing.

    Any help here?

  15. Like Jeff,

    I am also unable to have any page from buddypress load under the “My Account” and “Notifications” tabs. Curiously, the only page that loads is the Random Group link under the “Visit” tab on the far right. Perhaps that is a clue as to why the other pages of buddypress are not loading?

    My permalinks have been adjusted off of the default. I do not know what to do to get my buddypress to work!

  16. OK. For all of us out there that are having problems with the buddypress bar not working, I think I might have somewhat of a solution.

    I found out, at least on my site, that its an admin issue. I decided to log out and made sure that the buddypress bar was visible to non-logged in users as well. Then I created a new test user through the buddypress bar. For the test user everything works perfectly. It must have to do with the admin account being made previous to the buddypress install I’m guessing.

    So short story long, create a test account through the buddypress bar and hopefully that will help.

    I still have no idea how to get my admin account to do jack with the buddypress links or pages, but at least this helps me see how it works for my new users.

  17. Ok, I have installed buddypress sitewide… added bp-template-pack/bp/bp-functions.php to my functions file and added the tag to my style.css When I hist a profile link on my theme.. I get a backend profile :( is there something I am missing?

Participate