Template Pack for Theme Compatibility (v1.2)


Archived file. Good only up to BP 1.6.5 version


To enable compatibility for your existing WordPress theme with BuddyPress, please download and activate the BuddyPress Template Pack plugin. This will run you through the process step-by-step.

The Process At-A-Glance

This requires a working knowledge of HTML and CSS at the very least.

After you install and activate the BP Template Pack plugin, head over to admin dashboard > Appearance > BP Compatibility panel.

Step One

BuddyPress needs some extra template files in order to display its pages correctly. This plugin contains these extra templates, but right now they are in the plugin directory. They need to be inside your active theme directory to work correctly. First of all we can try moving them automatically, please click the button below to attempt to move the templates:

Move Template Files

Click on “Move Template Files” link

Step Two

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.

Click on “move on to step three” link

Step Three

Now that the template files are in the correct location, click through your site (you can come back to this page at any point). You should see a BuddyPress admin bar at the top of the page, try visiting some of the links in the “My Account” menu. You should find that BuddyPress pages now work and are displayed.

If you find that the pages are not quite aligned correctly, or the content is overlapping the sidebar, you will need to tweak the template HTML. Please follow the “fixing alignment” instructions below. If the content in your pages is aligned in the correct place then you can skip to the “Finishing Up” section at the bottom of this page.

Fixing Alignment

By default BuddyPress templates use this HTML structure:

[sourcecode language=”html”]
[HEADER]

<div>

<div> [PAGE CONTENT] </div>

<div>[SIDEBAR CONTENT]</div>

</div>

[FOOTER]
[/sourcecode]

If BuddyPress pages are not aligned correctly then you will need to modify some of the templates to match your theme’s HTML structure. The best way to do this is to FTP to your theme’s files at:

http://yoursite.com/wp-content/themes/active-WordPress-theme-folder/

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 [sourcecode language=”html”]<div>[/sourcecode] tags that surround the content and sidebar.

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 in step two):

  • activity/index.php
  • blogs/index.php
  • blogs/create.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
  • registration/activate.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.

Finishing Up

You’re now all done with the conversion process. Your WordPress theme will now happily provide BuddyPress compatibility support. Once you hit the finish button you will be presented with a new permanent theme options page allowing you to tweak some settings.

Finish

Final Steps

__Disable BP Template Pack CSS
The BuddyPress template pack comes with basic wireframe CSS styles that will format the layout of BuddyPress pages. You can extend upon these styles in your theme’s CSS file, or simply turn them off and build your own styles.

___Disable BP Template Pack JS / AJAX
The BuddyPress template pack will automatically integrate the BuddyPress default theme javascript and AJAX functionality into your theme. You can switch this off, however the experience will be somewhat degraded.

Save Settings

NOTE: 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.

Navigation Links
You may want to add new navigation tabs or links to your theme to link to BuddyPress directory pages. The default set of links are:

  • Activity: http://yoursite.com/activity/
  • Members: http://yoursite.com/members/
  • Groups: http://yoursite.com/groups/
  • Forums: http://yoursite.com/forums/
  • Register: http://yoursite.com/register/ (registration must be enabled)
  • Blogs: http://yoursite.com/blogs/

Reset Setup
If you would like to run through the setup process again please use the reset button (you will start at step three if you haven’t removed the template files):

Reset

Example