You can easily create your own unique site design or theme based on the BuddyPress default theme, Thanks to the Parent-Child functionality available in WordPress that was implemented in the BuddyPress default theme. This step-by-step guide will help you build your own custom bp-default child theme. When new versions of BuddyPress are released with an updated Buddypress default theme, your theme will automatically be updated along with it!
You can override any Parent theme template simply by either
- copying it into your child theme and be tweaking it or
- creating a new, “same-name” template file in your Child theme directory. You can also add your own CSS, JS, and AJAX features.
Let’s start building child theme !!
The bp-default theme is located in the BuddyPress plugin folder at so
/wp-content/plugins/buddypress/bp-themes/ it can be updated along with the plugin. WordPress knows where it is, even though your own child theme folder is in.
A. Create a new theme folder
The first step is to create a new theme folder and give it a unique name. For this example, the theme is called “BuddyPress Master” and so we’ll name our folder bp-master. We’ll be uploading the bp-master child theme folder to wp-content/themes/
B. Create a style.css file
- Create a new file and save as style.css in the bp-master child theme folder i.e. /bp-master/style.css. This will be your child theme’s stylesheet.
- Open up the new style.css file and add the following code to the top of the file, replacing necessary details with your own.
/* Theme Name: BuddyPress Master Theme URI: http://wbcomdesigns.com/themes/bp-master/ Description: Master theme for BuddyPress. Version: 1.0 Author: Smita Author URI: http://wbcomdesigns.com/ Template: bp-default Tags: buddypress, two-column, grey, dark */
Two important items:
- Template: bp-default – this tells WordPress that we want to use the BuddyPress default theme (bp-default) as the parent theme, and inherit all templates from it.
- Tags: BuddyPress – this tells BuddyPress that you are using a BuddyPress-compatible theme so it won’t nag you in the admin area.
3. Save the style.css file.
4. At this point, upload bp-master folder to wp-content/themes/ in the server. In the WordPress admin area > Appearance > Themes, you should see your new theme among the list of themes. If you don’t see your child theme in the list of themes and your installation is Multisite, make sure you’ve enabled your BuddyPress Master theme in Network Admin > Themes.
5. Go ahead and activate your new child theme.
6. Check your home page of your site. You’ll notice that the design and layout of your child theme mirror those of the BuddyPress Default theme. Congratulations! This means your new child theme is working correctly and inheriting all of the styles and template files.
(2) Inheriting CSS (or not!)
At this point you have an important decision to make:
1. you can inherit the default theme’s CSS and work from there, or
2. you can start writing your own CSS from scratch.
2.1 Inherit the default theme’s CSS and work from there
If you simply want to change the color scheme and perhaps alter the layout a bit, it is highly recommended to inherit bp-default theme’s CSS. In BP 1.5+, you don’t have to do anything! Just start writing your new styles in your child theme’s style.css file and when you’re done, continue to section 3!
2. Start writing your own CSS from scratch.
If you plan to create a radically new theme design, you might want to start with a fresh slate. If you’re using BP 1.5+ and you decide you do not want to inherit the CSS, create a functions.php file in your child theme folder and add the following to your child themes functions.php:
This tells BuddyPress not to queue up the default styles. Now, you can start designing to your heart’s content! Remember though, you still need to get your child theme’s style linked to your template files. You can do this by either:
a) Copying over the header.php file from the bp-default theme into your child theme’s folder, bp-master. Then add the link to your theme’s style.css file in header.php between bp_head and pingback_url like so:
link rel="stylesheet" href="" type="text/css" media="screen" /> link rel="pingback" href=""
b) enqueueing your child theme’s stylesheet in your child theme’s functions.php like so:
Continue on to section 3!
(3) Overriding BuddyPress’ Template Files
By default, your new child theme will inherit all the template files from the BuddyPress Default theme. Most design and layout changes can be done in the CSS, but what if you wanted to change some of the HTML markups? It’s now time to override some template files!
Let’s say I wanted to override the header.php template file.
The first step is to navigate to the BuddyPress plugin folder (usually /wp-content/plugins/buddypress/) and then to the BuddyPress Default theme folder — bp-themes/bp-default. In this folder, you should 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 from the BuddyPress Default theme.
You can do this with any template file from the BuddyPress Default theme. However, if you want to override a template file that is in a subfolder, you must also recreate the subfolder in your child theme.
There is one exception to the template override rule — functions.php.
If you create a blank function.php file in your child theme, the parent theme (or in our case, the BuddyPress Default theme) functions.php will still be loaded. This will allow you to inherit existing functions from BuddyPress Default, but you can also add your own customized code in here as well! You must make sure you give your child theme functions a unique name, otherwise, they will clash with the parent.
And that’s it! You are good to go