Make Your WordPress Site BuddyPress-Ready

Make Your WordPress Site BuddyPress-Ready

BuddyPress is a great tool for adding social networking to your WordPress site, but what if your site’s theme wasn’t built with BuddyPress in mind? Even worse, what if you have a regular WordPress theme that doesn’t play well with BuddyPress at all?

Missing menus, pages that aren’t displaying properly, perhaps even a sidebar or two that just look completely wrong… I’ll pause here to let you gasp. If this has been the case for any sites you’ve built, don’t panic! Read on.

Up until last year, you had to use BuddyPress-specific themes, which meant you could only use BuddyPress with just any old theme. BuddyPress 1.7 changed all that so you could add the plugin to any theme. Well, almost any theme.

In today’s post we’re going to work with the BuddyPress default templates, as well as create a child theme to help you get your site looking and working exactly how you want it, while also allowing BuddyPress to function perfectly.

Keep in mind that every theme is unique and is usually different in one or many ways. Ultimately, it will be up to you to pick and choose the appropriate parts of your original theme to use with the new files you’ll be creating.

BuddyPress
Make your WordPress Site BuddyPress-ready.

Before You Get Started

First thing’s first – back up your site.

It’s always a good idea to be on the safe side and make a backup of your site in case something bad happens.

Now is a good time to use your favorite backup tool or plugin. If you don’t have a favorite, why not use our Snapshot plugin? The great thing about Snapshot is that it’s not only easy to use but you can restore your entire site if anything happens. Not only does it back up posts and pages, it also makes backups of media files and every table of your database for every plugin and theme. Plus, you can create as many backups of your site as I want and schedule regular backups.

With your site safely backed up, let’s get on with making your site BuddyPress-ready.

1. Create a Child Theme

We’ve looked at how to create a WordPress child theme before, but in this instance we’ll need to do things a little different.

Creating a child theme for BuddyPress will protect any changes you make to your original theme in the event that your theme, or WordPress itself, is updated. If you update, your changes will be wiped, and you’ll have to go back and redo everything. Creating a child theme will prevent that from happening, and will simultaneously preserve your original theme.

Firstly, head over to the BuddyPress.org website download the latest version of BuddyPress.

Next, open up your WordPress install, either through your file manager or through your favorite FTP client. Go to your current theme’s folder and navigate to wp-content > Themes.

Head over to the copy of the BuddyPress plugin you just downloaded and extract the files to your computer. In the extracted files, navigate to bp-templates > bp-legacy, and find the “buddypress” file.

"bp-legacy" folder in the BuddyPress Plugin
The “buddypress” folder in the BuddyPress plugin version 2.1.1 is located under “bp-templates”, then “bp-legacy”.

Upload it into your theme’s folder. Before you do this, take a second to scan the pre-existing folders and make sure there isn’t already a folder there with the same name. It’s not very likely that one like this already exists, but it’s better to be on the safe side before continuing to the next step.

The BuddyPress plugin will search for PHP, and CSS files from the folder you created first, before searching your regular theme’s files, so long as you name it either “buddypress”, or “community”. Keeping your updated files in your new folder will ensure your style changes are adhered to, and quickly.

Once uploaded, you will have successfully created a BuddyPress child theme from your current one.

2. Copy, Paste and Print

Open up the folder for the BuddyPress plugin you downloaded earlier, and in the same location as the “buddypress” folder (bb-templates > bp-legacy), you will see a “css” folder and a “js” folder, as well as a “buddypress-functions.php” file. Among these are the default code files you need to run BuddyPress in your current theme.

From here, open each of the files and compare them with your current theme’s style sheet and page files. You will need to edit the files in the BuddyPress folder you created to include the necessary code in order to make your site work with BuddyPress.

Any remaining files that you don’t need to edit can be safely deleted from the folder you created. Just for good measure, make sure you keep all the original files in case something goes wrong in the future.

You will need to pay special attention to your theme’s style sheet to make sure you are able to achieve the look you want. You’ll also need to look over the files in the “buddypress” folder you uploaded earlier.

The BuddyPress css file located under bp-templates > bp-legacy > css
The “buddypress.css” file is the one you want to compare to your current theme’s “style.css” file. Don’t be confused by the different file names.

You may or may not need to change some or all of your files. It all depends on what your current theme is lacking.

Special hint: In addition to the style sheet, if you want your BuddyPress pages to be structured like the pages you already have in place, you’ll need to edit the following files to get them as close to your vision as possible:

  • buddypress > activity > single > home.php
  • buddypress > activity > index.php
  • buddypress > blogs > index.php
  • buddypress > forums > index.php
  • buddypress > groups > index.php
  • buddypress > members > index.php
  • buddypress > members > activate.php
  • buddypress > members > register.php

This is the trickiest step, but when you compare the files and begin to understand the structure and what’s missing in your new buddypress files, you’ll know that half your work is done.

For example, let’s say you have a page template in your theme that allows for a sidebar on the right. You would need to open the template file which allows for the sidebar, and then find the content area as in the snippet example below:

This is a snippet from the appropriate file in the theme I am using, so your code may not necessarily look the same.

I know this is where I want my BuddyPress content to be, so all I need to do is copy all the code from one of the BuddyPress index pages and paste is where I have indicated in the snippet above.

Finally, I’ll save it the file as the BuddyPress index page I want to replace, in the folder I created for the child theme. Now all that’s left to do is to change all the index files in the “buddypress” folder where I want the sidebar on the right to appear, and save them. After that, my files will be BuddyPress-ready, and just the way I want them.

Final Thoughts

If you haven’t already noticed, you will need a bit of experience in PHP and CSS to really make this work, but you only need to know a little to get by just fine. The information I’ve given you here will be enough to set a solid foundation for getting your theme just right.

It might be easier for you to just change your theme to one that is BuddyPress-compatible, but if you’re in love with your current theme and you don’t want to change it, and you want it to work well with BuddyPress, then these steps will help you get there.

What do you think would suit you best in this kind of situation? Sticking with the theme you love and editing it for BuddyPress, or picking a new BuddyPress-compatible theme? Let us know your thoughts in the comments below.