Codex Home → BuddyPress Theme Development → BP Theme Compatibility and the WordPress Default Themes → Twenty Twelve Theme

Twenty Twelve Theme

A. One column Layout

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 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%;
       }
}

– delete the space between @ and media in media query above.

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

B. Full-width Layout

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 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%;
       }
}

– delete the space between @ and media in media query above.

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

C. Two Column, Right Sidebar Layout

This 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,

---