Building a Child Theme (Legacy)

The BP Default theme was moved into the BP Classic backwards compatibility Add-on during the 12.0.0 BP development cycle.

Archived file. Good up to BP 1.5 version

Creating your own unique site design or theme is extremely simple to do, thanks to the Parent-Child functionality available in BuddyPress. This step-by-step guide will help you build your own custom theme. BuddyPress themes include more templates than your standard WordPress theme, However, these templates follow exactly the same structure as WordPress templates.

Child Themes: What is the point? Why not just create a brand new theme?

Building a child theme is the easiest and most future-proof way of building a BuddyPress theme. You can take advantage of an existing theme’s functionality, tweaking it to suit your own needs. By extending the default BuddyPress theme, you inherit all of the templates, JS, AJAX and if you wish, the CSS, all while preserving the core bp-default theme files. When new versions of BuddyPress are released with an updated default theme, your theme will automatically update along with it!

You can override any Parent theme template simply by either (1) copying it into your child theme and tweaking it or (2) creating a new, “same-name” template file in your Child theme directory. You can also add your own CSS, JS and AJAX features. For more information about Child themes, please go to the WordPress Codex page.

Let’s Start Building

The default BuddyPress theme is not located in the usual /wp-content/themes/ directory. It is stored in the BuddyPress plugin folder so it can be updated along with the plugin. WordPress knows where it is, even though 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, the theme is called “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
*/

Note the “Template:” entry, which 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. In the WordPress admin area, “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.

Check 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 default theme adminbar 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.