How to Integrate buddypress to wordpress theme

Share on FacebookTweet about this on TwitterDigg thisPin on PinterestShare on LinkedInShare on StumbleUponShare on TumblrShare on Google+Email this to someone

BuddyPress is an open source social networking software package. It is a plugin that can be installed on WordPress to transform it into a social network platform. BuddyPress is designed to allow schools, companies, sports teams or any other niche community to start their own social network or communication tool.

Now the problem is Buddypress is having its own theme. If you are installing buddypress in separate subdomain with separate wordpress then it is fine, you no need to worry at all. It will have its own theme and design. Now if you want buddypress features should be a part of your website then you need to integrate buddypress theme to your existing wordpress theme.

Buddypress Integration to wordpress

Here are the simple step by step procedure to make buddypress compatible wordpress theme.

Step 1: Install wordpress – Get latest from wordpress.org,
It is always better to try in your localhost and once it is perfect then upload it to your actual website. Know more about how to install wordpress on localhost.

I have installed wordpress on localhost and the link is http://localhost/wordpress/. When I brows my website it will be as shown below.

1. Default WordPress Theme
1. Default WordPress Theme

Step 2: Install buddypress plugin -
Download from wordpress Plugin directory and upload to plugin folder and activate it.

Also you can upload through Plugins->add new from dashboard.

2. Install Buddypress plugin
2. Install Buddypress plugin

Step 3: Update Permalink structure
If default permalink structure is configured in your blog then you will get below message.

Buddypress is almost ready. You must update your permalink structure to something.

3. Update your permalink structure
3. Update your permalink structure message

Click “Update your permalink structure” link or brows Settings->permalinks and update as shown below. Select custom structure and write

/%category%/%postname%/

4. Update your permalink structure
4. Update your permalink structure

Once you click save button a message should come “Permalink structure updated“. If you get a message linke “You should update your .htaccess now” then your .htaccess file is not writable and you need to manually update given code.

Once permalink structure is updated and if you brows any other page you will get a message like

BuddyPress is ready. You’ll need to activate a BuddyPress compatible theme to take advantage of all of the features. We’ve bundled a default theme, but you can always install some other compatible themes or upgrade your existing WordPress theme.

Just leave it for time being. We are on the way to make the compatible theme.

Step 4: Install bp-template-pack and configure

Download from WordPress plugin directory and upload to plugin folder. Also you can install through Plugins->add new

5. Install buddypress Template Pack Plugin
5. Install buddypress Template Pack Plugin

Once the installation is done Brows Appearence->BP Compatibility and follow the instructions step by step.

Step one:

6. BP Compatibility settings
6. BP Compatibility settings

Click Move Template files button.

Step Two:

You will get a message like:

Adding support for BuddyPress to your existing WordPress theme can be a straightforward process by following the setup instructions on this page.

Templates moved successfully! This is great news, BuddyPress templates are now in the correct position in your theme which means you can skip step two and move on to step three.

This says your template files from buddypress theme moved to your pressent website theme.
If you check your template folder, you will be surprised. There are many files.

7. Folder files after plugin intgration
7. Folder files after plugin intgration

Click to move step three.

Step Three: There are some instructions to make the theme compatible. I will explain one by one in next steps.

Step 5: Making theme compatible:

bp-template-pack plugin copied all the template files to your theme folder. Now your job is to make it look like actual website or blog. bp-template-pack plugin wont copy the css file. So first move the folder _inc from wp-content\plugins\buddypress\bp-themes\bp-default to your present theme.

Open style.css of present theme and add the below line at the begining only.

@import url( _inc/css/reset.css );

Make sure you have copied _inc folder.

Now you need to manually add the links to

  • Activity
  • Members
  • Groups
  • Discussion
  • Register

Open your site header.php or sidebar.php, wherever you need these menus. Add the below links.

<li><a href=”http://localhost/wordpress/activity/”>Activity</a></li>
<li><a href=”http://localhost/wordpress/members/”>Members</a></li>
<li><a href=”http://localhost/wordpress/groups/”>Groups</a></li>
<li><a href=”http://localhost/wordpress/forums/”>Discussion</a></li>
<li><a href=”http://localhost/wordpress/register/”>Register</a></li>

Here you can write <?php bloginfo(‘url’); ?> instead of http://localhost/wordpress. It will be easy when you are shifting your them from localhost to actual server. But there will be more function and database call.

<li><a href=”<?php bloginfo(‘url’); ?>/activity/”>Activity</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/members/”>Members</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/groups/”>Groups</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/forums/”>Discussion</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/register/”>Register</a></li>

Now you are almost done. Check your site.
Amazing! You should able to see all the links and buddypress pages. If you find that the pages are not quite aligned correctly, or the content is overlapping the sidebar, you will need to tweak the theme.

By default BuddyPress templates use this HTML structure:

[HEADER]

<div id=”container”>
<div id=”content”>
[PAGE CONTENT]
</div>

<div id=”sidebar”>
[SIDEBAR CONTENT]
</div>
</div>

[FOOTER]

If BuddyPress pages are not aligned correctly then you will need to modify some of the templates to match your theme’s HTML structure.

Brows your theme folder and then open up the page.php file (if this does not exist use index.php). Make note of the HTML template structure of the file, specifically the <div> tags that surround the content and sidebar, include lines like sidebars.

You will need to change the HTML structure in the BuddyPress templates that you copied into your theme to match the structure in your page.php or index.php file. The files that you need to edit are as follows (leave out any folders you have not copied over):

  • /activity/index.php
  • /blogs/index.php
  • /forums/index.php
  • /groups/index.php
  • /groups/create.php
  • /groups/single/home.php
  • /groups/single/plugins.php
  • /members/index.php
  • /members/single/home.php
  • /members/single/plugins.php
  • /registration/register.php

Once you are done matching up the HTML structure of your theme in these template files, please take another look through your site. You should find that BuddyPress pages now fit inside the content structure of your theme.

You’re now all done with the conversion process. Your WordPress theme will now happily provide BuddyPress compatibility support.

Now if there any problem with style sheet you need to edit your style.css file.

Let me know if you find defficult to integrate. We will do it for you in a nominal price. Just drop a mail to info@electrofriends.com

There wont be any charge to give a sudgession or help. Just drop your doubts using below form. I will be happy to reply.

Share on FacebookTweet about this on TwitterDigg thisPin on PinterestShare on LinkedInShare on StumbleUponShare on TumblrShare on Google+Email this to someone

18 Responses to “How to Integrate buddypress to wordpress theme”

  1. Hi

    the menu of the buddypress plugin appear in the footer of my template not sure how can i fix this can you please help?

    thanks

    Reply
  2. Hi Simi,

    I had the same issue whilst trying to integrate Buddypress with my own custom theme. I just installed the Buddypress template pack, followed the instructions and it worked for me.

    Hope this helps,

    Reply
  3. Would I have to change my current wordpress template for it to work? or when you install a buddypress template does that go alongside your normal one?

    Please help me on this.

    Reply
  4. Youdha

    Hi

    I’ve done all the steps. and successful, but when I click on each link such as Home, Activity, Group and others. My page has not changed. can not link to it.

    please explain and help, where should I fix?

    Thanks

    Reply
  5. Youdha

    Hi Riam
    Your _inc folder in :
    wp-content/plugins/buddypress/bp-themes/bp-default

    Reply
  6. fine description and really helpful.
    can i use any permalink without – /%category%/%postname%/
    please email me if anyone know.
    bappyf@gmail.com
    thnx…

    Reply
  7. Hi, someone knows how make this stpes but in WordPress Multisite? because template pack plugin don´t works on MU installs

    Thanks

    Reply
  8. The last lipstick I used was Peach Peony by Maybelline. I found it at the Dollar Store and I love it!
    Mama Laura recently posted..Birthday wrap up: FOTD

    Reply
  9. Flipping WP

    I’ve found another file that you’ll likely want/need to modify for template matching reasons:

    /YOUR_THEME_DIRECTORY/members/single/activity/permalink.php

    When I clicked open one of the statuses that I wrote, it took me to a page that used that file.

    Reply
  10. First thanks for this article, i found it so useful, Can u tell me how can i allow registered users to create their own blogs??????

    Reply
  11. Ranjith i was trying to do all the things which you worote here. Anfortunatly i have got lost. first of all
    1. in style.css file where should i put this @import url( _inc/css/reset.css );? right at the beginning ? i put it here :
    @import url( _inc/css/reset.css );
    /*
    Theme Name: Original Premium News
    Theme URI: http://www.woothemes.com/
    Description: Original Premium News by WooThemes
    Version: 2.4.5
    Author: WooThemes
    Author URI: http://www.woothemes.com/

    Copyright: (c) 2009 WooThemes.
    License: GNU General Public License v2.0
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    did i do correct or should i have put it in front of :
    */

    /*========= SETUP =========*/

    *{
    border: 0;
    margin: 0;
    padding: 0;
    }

    then i have copied the _inc file to the folder of my theme just inside of the folder.

    2. you have tald to put this files:Activity
    Members
    Groups
    Discussion
    Register

    to header.php
    i have opened my header.php file but to be honest i do not have any clue where should i put all of that files? because i am not so knowlagabe in php and in programming.

    Dear Ranjith i was wondering if you can please help me,i would have been so gratefull to you, if you will do so. Cause i was doing it so long and still there is no any progress.
    Will be looking forward to hearing from you soon.
    With the best wishes Kanat.

    Reply
  12. Eric Gahagan

    I am stuck on the step where I must tweak the code. The member directory and Friends pages do not fit in my theme. I am using rtPanel theme for wordpress. Do I need to tweak the css files or just edit the html?

    Reply
  13. Diggy Bimpe

    hello, i’m also stuck on the step where i must tweak the code, I am stuck on the step where I must tweak the code. The member directory and Friends pages do not fit in my theme as well. I am using Matrix theme for wordpress. any help please? i am willing to pay for any fees. thanks

    Reply
  14. You’d superb suggestions there. I did a research about the problem and identified that likely almost anyone will agree together with your internet page.

    Reply
  15. Ashok Saini

    i applied all things which are told above…..and its really work….

    but here two plugins…buddypress and bp template pack….

    and you told in brief about bp template pack but not about buddypress plugin…

    my site url is http://klahost.com/dolphin-hotel/ but register page is not working…

    can u help me?

    Reply
  16. Hello,
    Is this article still useful?
    Maybe is to old?
    I can’t find buddypress template pack anymore.

    Thanks

    Reply

Leave a Reply