BuddyPress Companion Stylesheets
What are Companion styles and why?
As of BuddyPress 2.3 we have introduced a process to enqueue stylesheets that support specific WordPress bundled default themes. BuddyPress stylesheets are now available for the following:
- Twenty Sixteen Theme
- Twenty Fifteen Theme
- Twenty Fourteen Theme
- Twenty Thirteen Theme
- Twenty Twelve Theme (for BP 2.5.0)
The motivation for doing this was to ensure that we presented BuddyPress in the best possible light when activated out of the box running under one of the WordPress twenty-something themes, as it afforded us the ability to style specific BP elements to work within those themes and deal with any possible conflicting styles.
These stylesheets are referred to as ‘Companion’ ones as they run in addition to the default BP stylesheet rather than as a replacement, they compliment our existing stylesheet, providing theme specific enhancements and minor correction where the themes styles affect the BP elements. as these sheets are targetting a specific theme we are also then able to look with more detail at such aspects as breakpoints, providing a better responsive experience.
Released with BP 2.3
For the initial task we are releasing two stylesheets to support WP TwentyFifteen and TwentyFourteen themes, with the intention that in subsequent BP releases we’ll tackle the older themes working backwards, twentythirteen being already underway but slightly too late to make the cut for BP 2.3 inclusion. In future we will release a supporting companion stylesheet for new WP themes as they are released e.g Twentysixteen.
The Process
The process for including these styles, although new, follows the tried and tested principles BP already uses for it’s ‘Theme Compatibility’ implementation.
We introduced for the first time pre-processor support in the creation of our .css/rtl.css files writing the initial stylesheet rules as twentyfiften.scss as it was felt that it was time we updated our approaches to better fit with current practises.
In buddypress-functions.php in the bp-template/bp-legacy/ directory where we currently run our enqueue_styles() function for stylesheets we now have a blocks that enqueue a stylesheet based on the theme name.
Running twentyfifteen as the site theme would now enqueue a file with the handle ‘bp-twentyfifteen-css’
For child themes it was decided that they should inherit the styles too so we enqueue the companion stylesheet using get_template() to create a path that always points to the parent theme.
Overloading & customizing the styles
As we have followed the established principles for theme compatibility and hierarchical support modifying or customizing these sheets is extremely simple:
If you are running for example twentyfifteen but have created a child theme for custom styles and templates then the same process for theme compatibility applies, creating a directory named buddypress/ or community/ in your child theme root directory and then adding a directory for css/ and either copying the existing twentyfifteen.css over or creating a new file named the same would be loaded and used in preference to the existing core file.
Existing styled Themes
If you are already using a WP twenty-* child theme and don’t require these new styles applied automatically to the BuddyPress pages &emdash; maybe they clash with your existing customizations &emdash; then you can simply dequeue the stylesheet in your child theme’s functions file.
function my_dequeue_bp_companion_stylesheet() {
// Change 'twentyfifteen' to the WordPress theme you are using
wp_dequeue_style( 'bp-twentysixteen' );
}
add_action( 'bp_enqueue_scripts', 'my_dequeue_bp_companion_stylesheet', 20 );
Alternatively, `bp-twentyfifteen`, `bp-twentyfourteen`, `bp-twentythirteen`, etc.
