Skip to:
Content
Pages
Categories
Search
Top
Bottom

Themes & the BuddyPress Template Pack

This is Legacy Document

The details in this page have either been updated or are deprecated completely. Legacy Docs are retained for historic reference.

To enable your existing WordPress theme for 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: Moving template files automatically

BuddyPress needs some extra template files in order to display its pages correctly. This plugin will attempt to automatically move the necessary files into your current theme.

Click the button below to start the process.

Move Template Files
Click on “Move Template Files” link

Templates moved successfully!

Great news! BuddyPress templates are now in the correct position in your theme, which means that we can skip Step Two: Moving Templates Manually, and move directly to Step Three. Cool!

Continue to Step Three.
Click on “move on to step three” link

Step Three: Tweaking your layout

Now that the template files are in the correct location, check out your site. (You can come back to the current page at any time, by visiting Dashboard > Appearance > BP Compatibility.) You should see a BuddyPress admin bar at the top of the page. Try visiting some of the links in the “My Account” menu. If everything has gone right up to this point, you should be able to see your BuddyPress content.

If you find that the pages are not quite aligned correctly, or the content is overlapping the sidebar, you may need to tweak the template HTML. Please follow the “fixing alignment” instructions below. If the content in your pages is aligned to your satisfaction, 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:

<?php get_header( 'buddypress' ); ?>

	<div id="content">
		<div class="padder">

			[ CONTENT ]

		</div><!-- .padder -->
	</div><!-- #content -->

<?php get_sidebar( 'buddypress' ); ?>
<?php get_footer( 'buddypress' ); ?>

If BuddyPress pages are not aligned correctly, then you may need to modify some of the templates to match your theme’s HTML structure. The best way to do this is to access your theme’s files, via FTP, at:
/xxxxx/wp-content/themes/twentyeleven/

Open up the page.php file (if this does not exist, use index.php) of your active/preferred WP theme. Make note of the HTML template structure of the file, specifically the div tags that surround the content and sidebar.

There are two methods for making the necessary template changes.

A. The first method is to change the HTML structure in the following BuddyPress template files which were transferred into your active/preferred WP theme to match the structure of your WP theme’s page.php or index.php file.

B. Alternatively, you may find it easier to make copies of your theme’s header.php, sidebar.php and footer.php and rename them to header-buddypress.php, sidebar-buddypress.php, and footer-buddypress.php.

Then you can alter the structure of these new template files (header-buddypress.php, sidebar-buddypress.php, and footer-buddypress.php) to resemble your theme’s page.php (or index.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, which will allow you to tweak some settings.

Finish
Click on “Finish” link

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:

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

Template-Packed WordPress Themes

Default WordPress Themes

WordPress Themes Repository


Other WordPress Themes