Adding Sidebars to All BuddyPress Pages

[12/06/13 - I have posted the updated version of this tutorial at http://codex.buddypress.org/themes/bp-theme-compatibility-and-the-wordpress-default-themes/twenty-eleven-theme/ ]

BuddyPress uses the theme’s page.php to generate BuddyPress components enabled by the user for the site. So when you navigate to the different BP pages, the components are laid out in single columns because the theme’s page.php file has a one column layout.

In order to have a layout with sidebar for regular pages using the Twenty Eleven theme, you’ll need to select Sidebar Template in the Page Attribute metabox where you’re at the Add New > Page or Edit Page panel. However, this method of selecting the page layout for the BP components does not work with BP Theme Compatibility.

Follow the steps posted below to have sidebars in all your BuddyPress pages.

Step 1.
Create a Twenty Eleven child theme. Follow the general instructions in BP Codex (no need for Compatibility Process and below) to create a Twenty Eleven child theme. WP Codex has more information about creating child themes.

Step 2.
Create a new file, name it buddypress.php and add the following code. Save file.

<?php
/**
 * BuddyPress 
 * A Page Template with Sidebar for all BuddyPress Pages.
 */
 get_header(); ?>

		<div id="primary">
			<div id="content" role="main">

				<?php while ( have_posts() ) : the_post(); ?>

				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<header class="entry-header">
						<h1 class="entry-title"><?php the_title(); ?></h1>
					</header><!-- .entry-header -->

					<div class="entry-content">
						<?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
					</div><!-- .entry-content -->
					<footer class="entry-meta">
						<?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>
					</footer><!-- .entry-meta -->
				</article><!-- #post-<?php the_ID(); ?> -->

				<?php endwhile; // end of the loop. ?>

			</div><!-- #content -->
		</div><!-- #primary -->
		
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Step 3.
Create a functions.php file in your child theme if you don’t have one yet. You will need to remove the .singular body class generated by Twenty Eleven theme’s functions.php file for the regular pages with single column layout. Otherwise your sidebar will laid out underneath the BuddyPress component.

Add the following to your new functions.php file then save file.

<?php
// Tweak to remove .singular body class in BuddyPress pages
function mme_remove_a_body_class($wp_classes) {
if(  if ( function_exists ( 'bp_loaded' ) &&  !bp_is_blog_page() ) :
      foreach($wp_classes as $key => $value) {
      if ($value == 'singular') unset($wp_classes[$key]);
      }
endif;
return $wp_classes;
}
add_filter('body_class', 'mme_remove_a_body_class', 20, 2);
?>

Step 4.
Upload your child theme folder to your server wp-content/themes/

Step 5.
Activate child theme in dashboard menu Appearance > Themes.

About these ads