The Genesis theme framework for WordPress has a BuddyPress compatibility plugin called Genesis Connect for BuddyPress. It is a free plugin, has been for a couple of months. Don’t use it. It’s not fully compatible with BP 1.6.3. Use the officially recommended BP Templates Pack plugin instead.
If you do use Genesis Connect you might find it hard to delete groups, to get the Ajax Load More button to work correctly or you might find other compatibility issues. Another upside to the official template pack is that the templates look nicer than the Genesis Connect ones.
You might need to work a tiny little bit harder to use the BP Templates Pack plugin with Genesis than when using the Connect templates but it is worth the extra effort. You will save time and future headaches; and you have me to help you make your child theme BP compatible.
Using Compatibility Templates
Depending on how much you’ve customized your child theme, you might not need to do any extra work at all i.e you could get away with installing the compatibility templates and doing nothing else. But, if you’ve added new widgets that need to appear between the header and the footer, you’ll need to make those widgets usable in your BuddyPress pages.
Get the BP templates from the WordPress repository and install, activate then configure it by visiting Appearance > BP Compatibility i.e copy the template files over, click Next then click Finish.
The template plugin lets you create 3 custom files under your child theme:
- header-buddypress.php
- sidebar-buddypress.php
- footer-buddypress.php
When present, BuddyPress loads those files instead of your theme’s regular header, sidebar and footer.php files.
To create the custom files:
- Copy the Genesis files¹ header.php, sidebar.php and footer.php² to your child theme’s root folder,
- Renaming each of the files by adding -buddypress before .php, then
- Make edits to those files so that your customizations are loaded with them.
¹ The Genesis parent theme is found under /wp-content/themes/genesis/.
² If your child theme already has a copy of any of the header, sidebar and footer.php files you should copy the contents of your child theme’s versions of them to header-buddypress.php, sidebar-buddypress.php and footer-buddypress.php instead of taking them from the Genesis parent theme.
For Example: BuddyPress Widgets Above Content
Widget areas placed above the content of your pages will not show in BuddyPress pages because BuddyPress loads its own page templates. It loads the Genesis header.php, the Genesis sidebar.php and the Genesis footer.php but not the Genesis templates for the content area.
To get any above content widget areas to show you need to add your widget area to header-buddypress.php.
Here’s the default Genesis header.php file:
<?php /* WARNING: This file is part of the core Genesis framework. DO NOT edit this file under any circumstances. Please do all modifications in the form of a child theme. */ /** * Handles the header structure. * * This file is a core Genesis file and should not be edited. * * @category Genesis * @package Templates * @author StudioPress * @license http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later) * @link http://www.studiopress.com/themes/genesis */ do_action( 'genesis_doctype' ); do_action( 'genesis_title' ); do_action( 'genesis_meta' ); do_action( 'bp_head' ); wp_head(); /** we need this for plugins **/ ?> </head> <body <?php body_class(); ?>> <?php do_action( 'genesis_before' ); ?> <div id="wrap"> <?php do_action( 'genesis_before_header' ); do_action( 'genesis_header' ); do_action( 'genesis_after_header' ); echo '<div id="inner">'; genesis_structural_wrap( 'inner' );
Right at the bottom is the line genesis_structural_wrap( ‘inner’ ); This tells WP to load the inner content within the Genesis structural wrap. The wrap makes the content a specific width and centered within the display area below the header logo and below the navbar.
To add a widget area that displays across the top of the content and the sidebar(s), add the code for the widget area below the line genesis_structural_wrap( ‘inner’ );. The way to add a widget area here is the same as used when adding a widget area to a custom template (this is effectively a custom template, after all).
The code to add the new widget area could be something like this:
function buddy_site_notices_theme_name() {
if ( is_active_sidebar( 'site-notices-theme-name' ) ) {
genesis_widget_area( 'site-notices-theme-name', array(
'before' => '<div class="buddy-site-notices-theme-name widget-area">',
) );
}
}
buddy_site_notices_theme_name();That widget code is placed at the bottom of the header-buddypress.php file so your header-buddypress.php file should look something like this:
<?php
/*
WARNING: This file is part of the core Genesis framework. DO NOT edit
this file under any circumstances. Please do all modifications
in the form of a child theme.
*/
/**
* Handles the header structure.
*
* This file is a core Genesis file and should not be edited.
*
* @category Genesis
* @package Templates
* @author StudioPress
* @license http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
* @link http://www.studiopress.com/themes/genesis
*/
do_action( 'genesis_doctype' );
do_action( 'genesis_title' );
do_action( 'genesis_meta' );
do_action( 'bp_head' );
wp_head(); /** we need this for plugins **/
?>
</head>
<body <?php body_class(); ?>>
<?php
do_action( 'genesis_before' );
?>
<div id="wrap">
<?php
do_action( 'genesis_before_header' );
do_action( 'genesis_header' );
do_action( 'genesis_after_header' );
echo '<div id="inner">';
genesis_structural_wrap( 'inner' );
function buddy_site_notices_theme_name() {
if ( is_active_sidebar( 'site-notices-theme-name' ) ) {
genesis_widget_area( 'site-notices-theme-name', array(
'before' => '<div class="buddy-site-notices-theme-name widget-area">',
) );
}
}
buddy_site_notices_theme_name();Conclusion
As you can see, it’s not that difficult to put widgets into BuddyPress with Genesis.
Adding widget areas to the header is done in the usual way via the child theme’s functions.php but adding widgets anywhere else within the BP pages is best done using any of header-buddypress.php, footer-buddypress.php and sidebar-buddypress.php.
Any CSS should be added to your Genesis child theme’s style.css file.
If you have nay ideas or suggestions for this post, please comment below.
wpDiscuz