Building a Child Theme of the BP Default Theme
The BP Default theme was moved into the BP Classic backwards compatibility Add-on during the 12.0.0 BP development cycle.
Archived file. The BP Default theme will no longer be activated in new installations and will be retired in the near future. http://bpdevel.wordpress.com/2013/11/13/the-future-of-the-bp-default-theme/
This is an approach to child theming based on the BuddyPress Default theme. You may opt to choose a regular WordPress theme and take advantage of the BuddyPress Theme Compatibility introduced in version 1.7 which allows for nearly all WordPress themes to run BP templates within it’s theme and child themeing or customizing your BP templates by copying them to your theme/child theme easy to accomplish!
Should you then still prefer to create your own child theme for the BP Default theme, read on 🙂
The bp-default theme packaged with the BuddyPress plugin is a robust parent theme which includes network-centric template files in addition to special template files similar to what you would find in a regular WordPress theme.
You can easily create your own unique site design or theme based on the bp-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.
Child Themes: What is the point? Why not just create a brand new theme?
Creating a bp-default child theme is the easiest and most future-proof way of building a BuddyPress theme. Aside from taking advantage of bp-default theme’s functionality, you can tweak it to suit your own needs. By extending the bp-default 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 be updated 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.
Stylesheet changes
As of BuddyPress 1.5, BuddyPress Default Theme (bp-default) uses a function, bp_dtheme_enqueue_styles, to enqueue its stylesheets as shown below.
if ( !function_exists( 'bp_dtheme_enqueue_styles' ) ) : /** * Enqueue theme CSS safely * * For maximum flexibility, BuddyPress Default's stylesheet is enqueued, using wp_enqueue_style(). * If you're building a child theme of bp-default, your stylesheet will also be enqueued, * automatically, as dependent on bp-default's CSS. For this reason, bp-default child themes are * not recommended to include bp-default's stylesheet using @import. * * If you would prefer to use @import, or would like to change the way in which stylesheets are * enqueued, you can override bp_dtheme_enqueue_styles() in your theme's functions.php file. * * @see https://codex.wordpress.org/Function_Reference/wp_enqueue_style * @see https://codex.buddypress.org/releases/1-5-developer-and-designer-information/ * @since 1.5 */ function bp_dtheme_enqueue_styles() { // Bump this when changes are made to bust cache $version = '20130629'; // Register our main stylesheet wp_register_style( 'bp-default-main', get_template_directory_uri() . '/_inc/css/default.css', array(), $version ); // If the current theme is a child of bp-default, enqueue its stylesheet if ( is_child_theme() && 'bp-default' == get_template() ) { wp_enqueue_style( get_stylesheet(), get_stylesheet_uri(), array( 'bp-default-main' ), $version ); } // Enqueue the main stylesheet wp_enqueue_style( 'bp-default-main' ); // Default CSS RTL if ( is_rtl() ) wp_enqueue_style( 'bp-default-main-rtl', get_template_directory_uri() . '/_inc/css/default-rtl.css', array( 'bp-default-main' ), $version ); // Responsive layout if ( current_theme_supports( 'bp-default-responsive' ) ) { wp_enqueue_style( 'bp-default-responsive', get_template_directory_uri() . '/_inc/css/responsive.css', array( 'bp-default-main' ), $version ); if ( is_rtl() ) wp_enqueue_style( 'bp-default-responsive-rtl', get_template_directory_uri() . '/_inc/css/responsive-rtl.css', array( 'bp-default-responsive' ), $version ); } } add_action( 'wp_enqueue_scripts', 'bp_dtheme_enqueue_styles' ); endif;
What this means is that the function bp_dtheme_enqueue_styles() enqueues stylesheets in the following order:
a) bp-default theme’s main stylesheet, default.css
b) bp-default child theme’s stylesheet, style.css (if the activated theme is a bp-default child theme)
c) right-to-left CSS stylesheet, rtl.css, and
d) screen responsive stylesheet, responsive.css
Let’s Start Building!
The bp-default theme is located in the BuddyPress plugin folder at /wp-content/plugins/buddypress/bp-themes/ so it can be updated along with the plugin. WordPress knows where it is, even though your own child theme folder is in /wp-content/themes/.
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 Dusk” and so we’ll name our folder bp-dusk. We’ll be uploading the bp-dusk child theme folder to wp-content/themes/
B. Create a style.css file
1. Create a new file and save as style.css in the bp-dusk child theme folder i.e. /bp-dusk/style.css. This will be your child theme’s stylesheet.
2. 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 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 */
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-dusk folder to wp-content/themes/ in 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 Dusk 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:
- you can inherit the default theme’s CSS and work from there, or
- you can start writing your own CSS from scratch.
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 theme’sfunctions.php:
<?php
if ( !function_exists( 'bp_dtheme_enqueue_styles' ) ) :
function bp_dtheme_enqueue_styles() {}
endif;
?>
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-dusk. Then add the link to your theme’s style.css file in header.php between bp_head and pingback_url like so:
<?php do_action( 'bp_head' ) ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ) ?>" />
OR
b) enqueueing your child theme’s stylesheet in your child theme’s functions.php like so:
if ( !function_exists( 'bp_dtheme_enqueue_styles' ) ) :
function bp_dtheme_enqueue_styles() {
// You should bump this version when changes are made to bust cache
$version = '20130629';
// Register stylesheet of bp-dusk child theme
wp_register_style( 'bp-dusk', get_stylesheet_directory_uri() . '/style.css', array(), $version );
// Enqueue stylesheet of bp-dusk chid theme
wp_enqueue_style( 'bp-dusk' );
}
add_action( 'wp_enqueue_scripts', 'bp_dtheme_enqueue_styles' );
endif;
You can also enqueue bp-default theme’s rtl.css and responsive.css or create your own and add to the function above.
Continue on to section 3! 🙂
For BP 1.2 bp-default child themes:
If you’re still using BP 1.2.x and you want to inherit the bp-default theme’s CSS, 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 that you do not want to inherit the CSS, then you can just start adding your own styles right below the header comment.
(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 markup?
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.
(4) 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 (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! That is really all there is know about creating your brand-new child theme powered by the BuddyPress Default theme!
If you need help with anything listed in this tutorial, please post a question on our support forums:
https://buddypress.org/support/topics/
