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.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s