Note: This guide is for building themes for BuddyPress 1.2 beta and above.
So you want to create your own unique site design or theme? Of course you do, no one likes to sit using the default theme for too long, so here’s a handy step by step guide to building your own custom theme.
BuddyPress themes include more templates than your standard WordPress theme since there are many more areas to skin. However, these templates follow exactly the same structure as WordPress templates, so you shouldn’t feel lost.
Child Themes
Before we start, it’s important to know that building a child theme is the easiest and most future proof way of building a BuddyPress theme. Child themes are actually really simple, instead of building a theme from scratch you simply extend an existing theme.
In the case of BuddyPress you’ll be extending the default theme, and by doing this you will inherit all of the templates, JS, AJAX and if you wish, the CSS. Most importantly though, when new versions of BuddyPress are released with an updated default theme, your theme will automatically update along with it!
Even though you inherit everything from the parent theme, you can override anything. You can override any template by simply copying it from the parent into your child theme. You can also add your own CSS, JS and AJAX features. Anything in the child theme will override the parent without you having to copy the theme entirely.
Let’s Start Building
The default BuddyPress theme is not located in the usual place for themes. It’s actually stored in the BuddyPress plugin folder so it can be updated along with the plugin. That’s okay though, since WordPress knows where it is even if your own theme is in /wp-content/themes/.
The first step is to create a new theme folder in /wp-content/themes/ and give it a unique name. For this example we’ll call our theme “dusk”. In this new folder create a file and call it “style.css”, this will be your child theme’s stylesheet.
Open up “style.css” and add the following code to the header, replacing necessary details with your own.
/* Theme Name: BuddyPress Dusk Theme URI: http://example.org/themes/dusk/ Description: Dark theme for BuddyPress. Version: 1.0 Author: John Doe Author URI: http://example.org/ Template: bp-default Tags: buddypress, two-column, grey, dark */
Notice the “Template:” entry? This tells WordPress that we want to use the BuddyPress default theme (bp-default) as the parent theme and inherit all templates from it. You’ll also notice the “Tags:” line and the tag “buddypress”. This will tell BuddyPress that you are using a BuddyPress capable theme so it won’t nag you in the admin area.
Save the file, and at this point, let’s activate the new theme. Head to your WordPress admin area and then to the “Appearance” menu. You should see your new theme in the list of themes. If you don’t see it, and you’re using WordPress MU, make sure you’ve enabled the theme in “Site Admin > Themes”. Go ahead and activate the new theme.
When you head back to your site home page, you’ll notice that there is no design at all. It’s just text on a white page, possibly with a mangled header image. This is great, exactly what we want. This means your new child theme is working correctly and inheriting all of the template files. If you click around the site you’ll notice it still works, just with no design.
Inheriting CSS
At this point you have an important decision to make, you can start writing your own CSS from scratch, or you can inherit the default theme’s CSS and work from there. If you’re going to make a radically new theme design, you might want to start with a fresh slate. However, if you simply want to change the color scheme, and perhaps alter the layout a bit, I would highly recommend inheriting the CSS.
If you decide to inherit the CSS, you will need to add the following lines to your “style.css” file (below the comment header):
/* Inherit the default theme styles */ @import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css ); /* Inherit the admin bar styles */ @import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );
Once you’ve added these lines, try reloading your home page again. You’ll notice that the design has gone back to the design of the default theme. This is perfect, you can now start making design adjustments in your own theme by adding your own CSS styles below this line. If you’ve decided to not inherit the CSS, then you can just start adding your own styles right below the header comment.
Overriding and Adding Template Files
By default your child theme will inherit all the template files in the default theme. What if you wanted to change some of the HTML though? Most design and layout changes can be done in the CSS, but if you really need to change some of the structure then you can override template files.
As an example let’s override the header.php template file. The first step is to head to the BuddyPress plugin folder (usually /wp-content/plugins/buddypress/) and then to the bp-themes/bp-default folder. In this folder you’ll see the header.php file, copy this file and paste it directly into your child theme’s folder (the same place as your style.css file). You can now make any edits to the HTML you wish and these will be reflected in your child theme. The header.php file in your child theme is essentially replacing the one in the parent.
You can do this with any template file in the parent theme. However, if you want to override a template file that is in a sub folder, you must also recreate the sub folder in your child theme.
functions.php
There is one exception to the template override rule – functions.php. If you create a blank functions.php file in your child theme, the parent theme functions.php will still be loaded. This will allow you to inherit existing functions, but also add your own. You must make sure you give your child theme functions a unique name, otherwise they will clash with the parent.
That is really all there is to creating child themes! I hope you found this guide useful, and remember that if you build your themes in this way, you are going to find upgrading BuddyPress much easier in the future.
