How to Create a Buddypress Template
The BuddyPress framework for WordPress helps you create complex social networking sites, community portals and collaboration tools through an extensive library of templates and plug-ins. Any WordPress theme will work with BuddyPress with little or no modification, however you may wish to create a set of custom templates to handle BuddyPress-specific features, such as the forum, activity stream or member profiles. The easiest and safest method of doing this is to create a BuddyPress Child Theme rather than modify the BuddyPress core.
Other People Are Reading
Instructions
-
-
1
Create a new folder and name it after your new theme. Open your HTML editor and create two new files. Save the first file as "functions.php" in your new folder. Save the second as "style.css."
-
2
Enter the following template header text into your style.css:
/*
Theme Name:
Theme URI:
Description:
Version: 1.0
Author:
Author URI:
Template: bp-default
Tags:
*/
Fill out each field. At a minimum, your style.css must contain a theme name and template value. The template value should remain bp-default; however, if you want to base your new design on the functionality of a custom BuddyPress theme framework, such as Buddymatic, enter its theme name there instead.
-
-
3
Open the BuddyPress framework folder and then open the "_inc" folder located in "bp-themes/bp-default". Open each of the style sheets found under "css." Copy the contents of the default.css document beginning with the "body" style and paste it into your style.css document just below your template header text. Continue to copy and paste the reset.css and adminbar.css styles into your style sheet.
-
4
Edit, remove or add styles as desired. To more easily see which styles affect parts of the overall layout, you may use the "Inspect Element" feature of the Opera browser or the Firebug add-on for Firefox. For example, if you want to change the background image, you would edit the following line of the "body" style:
background: #000000 URL( ../images/mybg.jpg) fixed no-repeat;
Create an "images" folder in your new theme folder and make sure any styles referencing images use the correct path to the image file.
-
5
Open the template files in the BuddyPress "bp-themes/bp-default" folder containing parts of the layout you wish to customize. For example, if you want to customize the content that appears on your main page, open the "index.php" file and save it to your new theme folder. You may add template tags, HTML,or style classes which will override the default BuddyPress template.
-
6
Add any custom functions to your functions.php file. You may also add additional WordPress functions to this file, such as registering sidebars or adding plug-in functionality. However, do not copy the contents of the default functions.php file into your file. If you have nothing to add, save the file as a blank file to your new theme folder and it will automatically inherit the default functions of whichever template you declared in the header of your style.css.
-
1
Tips & Warnings
To add another level of customization to your theme, create custom page templates using BuddyPress template tags found in the BuddyPress Codex and save them to your new BuddyPress theme folder just like you would for a normal WordPress theme. You will be able to select these page templates in your WordPress page editor to give certain pages a special look and functionality.
Avoid copying the entire BuddyPress default theme as that structure is not supported by new versions of BuddyPress and will cause conflicts. Your Child Theme should only contain the template files that have been modified beyond the default to help reduce the risk of conflicts. The template (.php) files and style.css should all be in the root of your theme folder. Additional JavaScript, style sheets or images may be organized into sub-folders.
References
- Photo Credit Pixland/Pixland/Getty Images
