BP Theme Compatibility and the WordPress Default Themes

[Draft for BuddyPress Codex articles]

BuddyPress is compatible with all the WordPress Default Themes. This section will provide you with step-by-step tutorials to make all your BuddyPress pages conform with the layout you want using child themes.

Twenty Ten Theme

Twenty Ten Theme
Twenty Eleven Theme

Twenty Eleven Theme
Twenty Twelve Theme

Twenty Twelve Theme
Twenty Thirteen Theme

Twenty Thirteen Theme

—– NEW PAGE IN CODEX —–

Title:

BP Theme Compatibility and the Twenty Ten Theme

Twenty Ten Theme

A. One column Layout

2010-one-colIf you prefer to have a one column layout for all your BuddyPress pages, follow the steps below.

1. Create a child theme of the Twenty Ten theme.

2. Create a new file in your new child theme folder and name it buddypress.php.

3. The Twenty Ten theme has a one column page template, fortunately. All you need to do is copy over the entire source code of Twenty Ten’s onecolumn-page.php file into the new buddypress.php file and save file.

<?php
/**
 * BuddyPress: One column, no sidebar template
 *
 * A custom page template without sidebar.
 *
 * @since Twenty Ten 1.6 and BuddyPress 1.9 beta 1
 */
get_header(); ?>

		<div id="container" class="one-column">
			<div id="content" role="main">
			     <?php get_template_part( 'loop', 'page' ); ?>
			</div><!-- #content -->
		</div><!-- #container -->

<?php get_footer(); ?>

4. Upload your Twenty Ten child theme folder to your server.

B. Full-width page Layout

2010-full-widthIf you prefer to have a full-width layout for all your BuddyPress pages, follow the steps below.

1. Create a child theme of the Twenty Ten theme.

2. Create a new file in your new child theme folder and name it buddypress.php.

3. Copy over the content of Twenty Ten theme’s onecolumn-page.php file into the new buddypress.php file.

<?php
/**
 * BuddyPress: Full-width template
 *
 * A custom page template without sidebar.
 *
 * @since Twenty Ten 1.6 and BuddyPress 1.9 beta 1
 */
get_header(); ?>

		<div id="container" class="one-column">
			<div id="content" role="main">
			       <?php get_template_part( 'loop', 'page' ); ?>
			</div><!-- #content -->
		</div><!-- #container -->

<?php get_footer(); ?>

5. We will simply copy the theme’s one column style and then prepend the buddypress body class to override the theme’s one column styling. Open up your child theme’s style.css file and add the following at the bottom of the file then save the file.

.buddypress #container.one-column {
        margin: 0;
        width: 100%;
}

6. Upload your Twenty Ten child theme folder to your server.

C. Two Column, Right Sidebar Layout

2010-default-two-colThis is the default page layout of the Twenty Ten theme. There is no need to do anything more if this is the layout you prefer for all your BuddyPress pages.

However, if you want to customize the sidebar content of all your BP pages, you can do so by: a) using a plugin like Widget Logic to assign widgets to specific pages by using conditional tags or b) by creating new buddypress.php and sidebar-buddypress.php files and registering a new widget area in your child theme’s functions.php file. The following steps are for the second option.

1. Create a child theme of the Twenty Ten theme.

2. Create a new file in your new child theme folder and name it buddypress.php.

3. Open up the page.php file of the Twenty Ten theme and copy all content within and paste that content into your new buddypress.php file. Then change to and save file.

<?php
/**
 * BuddyPress: Two column, right sidebar template
 *
 * A custom page template with own BP sidebar.
 *
 * @since Twenty Ten 1.6 and BuddyPress 1.9 beta 1
 */
get_header(); ?>

		<div id="container">
			<div id="content" role="main">
			       <?php get_template_part( 'loop', 'page' ); ?>
			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar('buddypress'); ?>
<?php get_footer(); ?>

4. If you don’t have a functions.php file in your child theme, create one. You’ll need to register the new widget area for your BP sidebar in that functions.php file like so:

<?php
// Register new widget area for new sidebar for BP pages
function mme_register_bp_widgets_area() {
	register_sidebar( array(
		'name'          => __( 'BuddyPress Sidebar Widget Area', 'mmechildtheme' ),
		'id'            => 'bp-sidebar',
		'description'   => __( 'Appears in the sidebar section of all BuddyPress pages.', 'mmechildtheme' ),
		'before_widget'	=> '<li id="%1$s" class="widget-container %2$s">',
		'after_widget'	=> '</li>',
		'before_title' 	=> '<h3 class="widget-title">',
		'after_title' 	=> '</h3>',
	) );
}
add_action( 'widgets_init', 'mme_register_bp_widgets_area' );

5. Create a new file in your child theme folder and name it sidebar-buddypress.php.

6. Add the following in your new sidebar-buddypress.php and save file:

<?php
/**
 * The sidebar containing the BuddyPress widget area
 *
 * Displays on BP pages.
 *
 * If no active widgets are in this sidebar, nothing will show up in your sidebar.
 *
 * @since Twenty Ten 1.6 and BuddyPress 1.9 beta 1
 */
if ( is_active_sidebar( 'bp-sidebar' ) ) : ?>

	<div id="secondary" class="widget-area" role="complementary">
		<ul class="xoxo">
			<?php dynamic_sidebar( 'bp-sidebar' ); ?>
		</ul>
	</div><!-- #secondary .widget-area -->

<?php endif; ?>

7. Upload your child theme folder to your server. You’ll need to add at least one widget to the BP Sidebar widget area.

—– NEW PAGE IN CODEX —–

Title:

BP Theme Compatibility and the Twenty Eleven Theme

A. One Column Layout

This is the default page layout of the Twenty Eleven theme. There’s no need to do anything else if this is the layout you prefer for all your BuddyPress pages.

B. Full-width page

2011-fullwidth1. Create a child theme of the Twenty Eleven theme.

2. Create a new file in your new child theme folder and name it buddypress.php.

3. Copy over the content of Twenty Eleven’s onecolumn-page.php file into the new buddypress.php file

<?php
/**
 * BuddyPress: Full Width Template
 *
 * Description: A Full Width Page Template
 *
 * @since Twenty Eleven 1.7 and BuddyPress 1.9 beta 1
 */
get_header(); ?>

		<div id="primary">
			<div id="content" role="main">
				<?php while ( have_posts() ) : the_post(); ?>
					<?php get_template_part( 'content', 'page' ); ?>
				<?php endwhile; // end of the loop. ?>
			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

5. Open up your child theme’s style.css file and add the following and save file.

.buddypress .entry-header, 
.buddypress .entry-content, 
.buddypress footer.entry-meta {
	margin: 0 auto !important;
	width: 100% !important;
}

6. Upload your Twenty Eleven child theme folder to server.

C. Two Column, Right Sidebar Layout

2011-two-colIf you prefer to have a two column layout for all your BuddyPress pages, follow the steps below.

1. Create a child theme of the Twenty Eleven theme.

2. Create a new file in your new child theme folder and name it buddypress.php.

3. Copy over the content of Twenty Eleven’ theme’s sidebar-page.php file into the new buddypress.php file.

<?php
/**
 * BuddyPress: Right Sidebar Template
 *
 * A page Template that adds a sidebar to all BP pages.
 *
 * @since Twenty Eleven 1.7 and BuddyPress 1.9 beta 1
 */
get_header(); ?>

		<div id="primary">
			<div id="content" role="main">
				<?php while ( have_posts() ) : the_post(); ?>
					<?php get_template_part( 'content', 'page' ); ?>
				<?php endwhile; // end of the loop. ?>
			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_sidebar('buddypress'); ?>
<?php get_footer(); ?>

4. Create a functions.php file in the folder of your child theme if you don’t have one yet. You will need to remove the .singular body class generated via Twenty Eleven theme’s functions.php file for the regular pages, which is designed as a one column layout. Otherwise, the sidebar you will be adding will fall down below the BuddyPress content.

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

<?php
// Remove singular body class in BuddyPress pages
function mme_remove_singular_body_class($wp_classes) {
	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_singular_body_class', 20, 2);

6. Upload your Twenty Eleven child theme folder to server.

—– NEW PAGE IN CODEX —–

Title:

BP Theme Compatibility and the Twenty Twelve Theme

A. One column Layout

2012-one-col1. Create a child theme“> of the Twenty Twelve theme.

2. Create a new file in your new child theme folder and name it buddypress.php.

3. Copy over the content of Twenty Twelve’s full-width.php file into the new buddypress.php file.

<?php
/**
 * BuddyPress: One column template 
 *
 * A One column template for all BuddyPress pages.
 *
 * @since Twenty Twelve 1.3 and BuddyPress 1.9 beta 1
 */
get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">
			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'page' ); ?>
			<?php endwhile; // end of the loop. ?>
		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

4. The buddypress class is generated in the body tag automatically for all BuddyPress pages when it’s activated. To change the width of the layout from full-width to one column, you only need to open up your theme’s style.css file and add the following

@media screen and (min-width: 600px) {
       body.buddypress .site-content {
        float: none;
	    margin-left: auto;
	    margin-right: auto;
	    width: 70%;
       }
}

5. Upload the Twenty Twelve child theme folder to server.

B. Full-width Layout

2012-full-width1. Create a child theme of the Twenty Twelve theme.

2. Create a new file in your new child theme folder and name it buddypress.php.

3. Copy over the content of Twenty Twelve’s full-width.php file into the new buddypress.php file.

<?php
/**
 * BuddyPress: Full-width Page Template
 *
 * A full-width template for all BuddyPress pages.
 *
 * @since Twenty Twelve 1.3 and BuddyPress 1.9 beta 1
 */
get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" class="full-width" role="main">
			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'page' ); ?>
			<?php endwhile; // end of the loop. ?>
		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

4. The buddypress class is generated in the body tag automatically for all BuddyPress when it’s activated. So you only need to open up your theme’s style.css file and add the following

@media screen and (min-width: 600px) {
       body.buddypress .site-content {
              width: 100%;
       }
}

4. Upload your Twenty Twelve child theme folder to server.

C. Two Column, Right Sidebar Layout

2012-default-two-colThis is the default page layout of the Twenty Twelve theme. There is no need to do anything more if this is the layout you prefer for all your BuddyPress pages.

However, if you want to customize the sidebar content of all your BP pages, you can do so by: a) using a plugin like Widget Logic to assign widgets to specific pages by using conditional tags or b) by creating new buddypress.php and sidebar-buddypress.php files and registering a new widget area in your child theme’s functions.php file. The following steps are for the second option.

1. Create a child theme of the Twenty Twelve theme.

2. Create a new file in your new child theme folder and name it buddypress.php.

3. Copy the content of Twenty Twelve theme’s page.php file into the new buddypress.php file. Then change get_sidebar() to get_sidebar('buddypress') and save file.

<?php
/**
 * BuddyPress: Two column Template 
 *
 * A two column template for all BuddyPress pages.
 *
 * @since Twenty Twelve 1.3 and BuddyPress 1.9 beta 1
 */
get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">
			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'page' ); ?>
			<?php endwhile; // end of the loop. ?>
		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar('buddypress'); ?>
<?php get_footer(); ?>

4. If you don’t have a functions.php file in your child theme, create one. You’ll need to register the new widget area for your BP sidebar in that functions.php file like so:

<?php
// Register new widget area for new sidebar for BP pages
function mme_register_bp_widgets_area() {
	register_sidebar( array(
		'name'         	 => __( 'BuddyPress Sidebar Widget Area', 'mmechildtheme' ),
		'id'           	 => 'bp-sidebar',
		'description' 	 => __( 'Appears in the sidebar section of all BuddyPress pages.', 'mmechildtheme' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  	=> '<h3 class="widget-title">',
		'after_title'	=> '</h3>',
	) );
}
add_action( 'widgets_init', 'mme_register_bp_widgets_area' );

5. Create a new file in your child theme folder and name it sidebar-buddypress.php. Add the following code to set up the widget area then save file.

<?php
/**
 * The sidebar containing the BuddyPress widget area
 *
 * Displays on all BP pages.
 *
 * If no active widgets are in this sidebar, nothing will show up in your sidebar in the front end.
 *
 * @since Twenty Twelve 1.3 and BuddyPress 1.9 beta 1
 */
if ( is_active_sidebar( 'bp-sidebar' ) ) : ?>

	<div id="secondary" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'bp-sidebar' ); ?>
	</div><!-- #secondary -->

<?php endif; ?>

7. Upload your child theme folder to your server. You’ll need to add at least one widget to the BP Sidebar widget area,

—– NEW PAGE IN CODEX —–

Title:

BP Theme Compatibility and the Twenty Thirteen Theme

A. One-column Layout

2013-one-colThis is the default layout of the Twenty Thirteen theme if and only if you did not add any widget in the Secondary Widget area in Appearance > Widgets. Otherwise, the Twenty Thirteen theme will automatically have a two-column layout with the addition of any widget in the Secondary Widget area.

If you want to add widgets in the Secondary Widget area for your site’s pages/posts and still want a one column layout for all BP pages, following are the steps to do so.

1. Create a child theme of the Twenty Thirteen theme.

2. Create a new file in your new child theme folder and name it buddypress.php.

3. Copy over the content of Twenty Thirteen’s page.php file into the new buddypress.php file. Remove the get_sidebar tag just before the get_footer call in the template.

<?php
/**
 * BuddyPress: One column template 
 *
 * A One column template for all BuddyPress pages.
 *
 * @since Twenty Twelve 1.3 and BuddyPress 1.9 beta 1
 */
get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">
			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'page' ); ?>
			<?php endwhile; // end of the loop. ?>
		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

4. Create a blank functions.php file in the folder of your child theme if you don’t have one yet. You will need to remove the .sidebar body class generated if any widget is added to the Secondary Widget Area which would move the alignment of the content area away from the center,

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

<?php
// Remove sidebar body class from BuddyPress pages
function mme_remove_sidebar_body_class($wp_classes) {
	if( function_exists ( 'bp_loaded' ) && !bp_is_blog_page() ) :
		foreach($wp_classes as $key => $value) {
			 if ($value == 'sidebar') unset($wp_classes[$key]);
		}
	endif;
	return $wp_classes;
}
add_filter('body_class', 'mme_remove_sidebar_body_class', 20, 2);

6. Upload your Twenty Thirteen child theme folder to server.

B. Full-Width Layout

2013-full-widthYou can create and maintain a full-width layout for all BP pages even when the Secondary Widget Area (right sidebar) is active for rest of the site by following these steps.

1. Create a child theme of the Twenty Thirteen theme.

2. Create a new file in your new child theme folder and name it buddypress.php.

3. Copy over the content of Twenty Thirteen’s page.php file into the new buddypress.php file. Remove the get_sidebar tag just before the get_footer call in the template as well as the section with the call to post_thumbnail and save file.

<?php
/**
 * BuddyPress: Full-width Page Template, No Sidebar
 *
 * A full-width template for all BuddyPress pages.
 *
 * @since Twenty Twelve 1.3 and BuddyPress 1.9 beta 1
 */
get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" class="full-width" role="main">
			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'page' ); ?>
			<?php endwhile; // end of the loop. ?>
		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

4. Create a blank functions.php file in the folder of your child theme if you don’t have one yet. You will need to remove the sidebar body class generated if any widget is added to the Secondary Widget Area which would show up in regular blog posts/pages,

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

// Remove sidebar body class in BuddyPress pages
function mme_remove_sidebar_body_class($wp_classes) {
	if( function_exists ( 'bp_loaded' ) && !bp_is_blog_page() && is_active_sidebar( 'sidebar-2' ) ) :
		foreach($wp_classes as $key => $value) {
			 if ($value == 'sidebar') unset($wp_classes[$key]);
		}
	endif;
	return $wp_classes;
}
add_filter('body_class', 'mme_remove_sidebar_body_class', 20, 2);

6. Open up your child theme’s style.css file, add the following and save file.

.buddypress .entry-header, 
.buddypress .entry-content, 
.buddypress .entry-summary,
.buddypress .entry-meta {
	max-width: 1040px;
	width: 100%;
}

@media (max-width: 1069px) { 
	.buddypress .entry-header, 
	.buddypress .entry-content, 
	.buddypress .entry-summary,
	.buddypress .entry-meta {
		padding-left: 20px;
		padding-right: 20px;
	}
}

7. Upload your Twenty Thirteen child theme folder to server.

C. Two Column, Right Sidebar Layout

2013-two-col-bpsidebarWhen you add any widget to the Secondary Widget Area in Appearance > Widgets using the Twenty Thirteen theme, the right sidebar will automatically show up in all posts and pages including the BuddyPress pages. So if you plan to have the same widgets in the right sidebar throughout the site, then you can stop reading at this point as you will not have to do anything further.

However, if you want to customize the sidebar content of all your BP pages, you can do so by: a) using a plugin like Widget Logic to assign widgets to specific pages by using conditional tags or b) by creating new buddypress.php and sidebar-buddypress.php files and then registering a new widget area in your child theme’s functions.php file. The following steps are for the second option.

1. Create a child theme of the Twenty Thirteen theme.

2. Create a new file in your new child theme folder and name it buddypress.php.

3. Copy over the content of Twenty Thirteen’s page.php file into a new buddypress.php file and remove the section about retrieving the post_thumbnail. Then you will have to change get_sidebar() to get_sidebar(‘buddypress’).

<?php
/**
 * BuddyPress: two-column template.
 *
 * A two-column template for all BP pages.
 *
 * @since Twenty Thirteen 1.1 and BuddyPress 1.9 beta 1
 */
get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-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-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
					</div><!-- .entry-content -->

					<footer class="entry-meta">
						<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
					</footer><!-- .entry-meta -->
				</article><!-- #post -->

			<?php endwhile; ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar('buddypress'); ?>
<?php get_footer(); ?>

4. Create a blank functions.php file in the folder of your child theme if you don’t have one yet. You will be creating a new widget area for BuddyPress pages as well as adding a body class to help you style your two column layout.

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

// Add new widget area for BuddyPress pages
function mme_register_bp_widgets_area() {
	register_sidebar( array(
		'name'		 => __( 'BuddyPress Sidebar Widget Area', 'mmechildtheme' ),
		'id' 		 => 'bp-sidebar',
		'description'	 => __( 'Appears in the sidebar section of all BuddyPress pages.', 'mmechildtheme' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'	=> '</aside>',
		'before_title'	=> '<h3 class="widget-title">',
		'after_title'	=> '</h3>',
	) );
}
add_action( 'widgets_init', 'mme_register_bp_widgets_area' );

// Add the sidebar body class for BP pages if the Secondary Widget area is not active
function mme_add_sidebar_body_class( $classes ) {
	if ( function_exists ( 'bp_loaded' ) &&  !bp_is_blog_page() && !is_active_sidebar( 'sidebar-2' )  )  {
		$classes[] = 'sidebar';
	}
	return $classes;
}
add_filter( 'body_class', 'mme_add_sidebar_body_class' );

6. Create a new file named sidebar-buddypress.php in your child theme folder and add the following:

<?php
/**
 * The sidebar containing the BuddyPress widget area
 *
 * Displays on BP pages.
 *
 * If no active widgets are in this sidebar, nothing will show up in your sidebar.
 *
 * @since Twenty Thirteen 1.1 and BuddyPress 1.9 beta 1
 */
if ( is_active_sidebar( 'bp-sidebar' ) ) : ?>

	<div id="tertiary" class="sidebar-container" role="complementary">
		<div class="sidebar-inner">
			<div class="widget-area">
				<?php dynamic_sidebar( 'bp-sidebar' ); ?>
			</div><!-- .widget-area -->
		</div><!-- .sidebar-inner -->
	</div><!-- #tertiary -->

<?php endif; ?>

8 . Upload your Twenty Thirteen child theme folder to server. You’ll need to add at least one widget to the BP Sidebar widget area.

BuddyPress Widgets – Update for BP 1.9

[Updating article in codex with new information and new images for BP 1.9]

Add new widgets:

  • (BuddyPress) Friends – New in BP 1.9
  • (BuddyPress) Sitewide Notices – New in BP 1.9
  • (BuddyPress) Log In – New in BP 1.9

(BuddyPress) Members

A dynamic list of recently active, popular, and newest members
members

(BuddyPress) Recently Active Members

Avatars of recently active members
recently-active-members

(BuddyPress) Who’s Online

Avatars of users who are currently online
whos-online

(BuddyPress) Groups

A dynamic list of recently active, popular, and newest groups
groups

(BuddyPress) Recent Networkwide Posts

A list of recently published posts from across your network (multisite)
recent-networkwide-posts

(BuddyPress) Friends

A dynamic list of recently active, popular, and newest Friends of the displayed member. Widget is only shown when viewing a member profile.
friends

(BuddyPress) Sitewide Notices

Display Sitewide Notices posted by the site administrator
sitewide-notices

(BuddyPress) Log In

Show a Log In form to logged-out visitors, and a Log Out link to those who are logged in.
log-in

Sahifa Theme, Themeforest

Theme Compatibility

(Previously template-packed theme http://bpsocialnetwork.wordpress.com/2012/09/29/sahifa-theme-themeforest/ almost a year ago)

1. http://codex.buddypress.org/bp-17-upgrading-template-packed-themes/
2.A. http://codex.buddypress.org/developer/theme-development/a-quick-look-at-1-7-theme-compatibility/
2.B. http://codex.buddypress.org/developer/theme-development/template-hierarchy/

To resolve templating issue, following uses one file (2.A. above) to render the HTML structure and content of the BuddyPress component pages.

Create a new file, buddypress.php, and add the following to the file.

    <?php get_header(); ?>
            <div class="content">
                    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>              
                            <article class="post-listing post">
                                    <div class="post-inner">
                                            <h1 class="name post-title entry-title" itemprop="name"><?php the_title(); ?></h1>
                                            <div class="entry">
                                                    <?php the_content(); ?>
                                            </div><!-- .entry /-->
                                    </div><!-- .post-inner -->
                            </article><!-- .post-listing -->
                    <?php endwhile; ?>
            </div><!-- .content -->
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

Save file and upload to your theme directory in server.

If you want to customize your BP component pages, use the method provided in #2.B. above.

Spun – Theme Compatibility

Spun Theme

All bbPress forums and BuddyPress components are rendered squished 200px floated to the left of the screen using the Spun theme. It’s because the theme styles the single column Pages using the “.page #primary” selector and the “page” body class is missing in all bbPress and BuddyPress pages. We need to add back the “page” body class for all bbPress and BuddyPress component pages by inserting the following at the bottom of the theme’s functions.php file

// Add Back page body class when bbPress and BuddyPress are active
function mme_addback_page_body_class($classes){
	if( is_bbpress() || is_buddypress() )
    		$classes[]="page";
		return $classes;

}
add_filter('body_class','mme_addback_page_body_class',20);

Note:
1. Need to remove list-styles in bbPress and BuddyPress components
2. Need to make a note of the script above since functions.php file will be overwritten when theme is updated.

Twenty Eleven – Theme Compatibility

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.

How To Join a Private Group

[Draft of article for BP Codex]

Sections

  • Via Groups Directory Page – with example of Member Rejected
  • Via Single Group Page – with example of Member Accepted

Groups Directory Page

1. In your site’s Group Directory page, click on the “Request Membership” button of the Private Group you want to join.

Click on image to enlarge.
Click on image to enlarge.

2. You’ll see the “Request Membership” text in button change to “Membership Requested”.

Click on image to enlarge.
Click on image to enlarge.

3. Your request to join the group is sent to the Private Group’s Admin via email (if enabled) and via notification in the Group Admin’s BuddyPress member navigation in the WordPress Toolbar shown below.
privategroup-groupd-03

4. When the Group Admin of that private group clicks on the notification link in WP Toolbar or the link in the email notification received, the Group Admin is brought to the private group’s Admin > Requests screen. The Group Admin can either click on the “Accept” button or the “Reject” button. In this example, the Group Admin will choose to reject the request for group membership.

Click on image to enlarge.
Click on image to enlarge.

5. The Group Admin sees a confirmation message: “Group membership request rejected.”

Click on image to enlarge.
Click on image to enlarge.

6. The member whose request has been rejected receives an email (if enabled) and notification in the WP Toolbar which when opened shows: Membership for group “name_of_group” rejected.
privategroup-groupd-06

Single Group Page

1. If you want to attach a message to the Group Admin when you request membership to join the private group, going to the private group’s home page is the option to choose. Click on the “Request Membership” button or on the “Request Membership” tab in the private group’s header area.

Click on image to enlarge.
Click on image to enlarge.

2. A textarea will show up so you could add your message to the Group Admin. Click on the “Send Message” button to send the message along with the request for membership in the private group.

Click on image to enlarge.
Click on image to enlarge.

3. The member requesting membership in the private group sees a confirmation message “Your membership was sent to the group administrator successfully. You will be notified when the group administrator responds to your request.”

Click on image to enlarge.
Click on image to enlarge.

4. Your request to join the group is sent to the Private Group’s Admin via email (if enabled) and via notification in the Group Admin’s BuddyPress member navigation in the WordPress Toolbar shown below.
privategroup-sgroup-04

5. When the Group Admin of that private group clicks on the notification link in WP Toolbar or the link in the email notification received, the Group Admin is brought to the private group’s Admin > Requests screen. The message of the member requesting the membership is shown along with the “Accept” button or the “Reject” buttons. In this example, the Group Admin will choose to accept the request for group membership.

Click on image to enlarge.
Click on image to enlarge.

6. The Group Admin sees a confirmation message “Group membership request accepted.”

Click on image to enlarge.
Click on image to enlarge.

7. The member who applied for membership in the private group receives an email (if enabled) and a notification on site in the WP Toolbar which when clicked on shows: Membership for “name_of_group” accepted.
privategroup-sgroup-07

8. When the member who got accepted to the private group clicks on the notification, the member is redirected to the private group’s home page – the private group’s activity screen.

Click on image to enlarge.
Click on image to enlarge.