Reddle – BP Theme Compatibility

Reddle theme

This is a simple walk through to make all BuddyPress pages full-width using the Reddle theme.

1. Create a child theme of the Reddle theme.

2. Create a new file in your new child theme folder and name it buddypress.php. If you need a full-width layout for your bbPress forums, create a file named bbpress.php as well.

3. Insert the following into your new buddypress.php and/or bbpress.php file/s.

<?php
/**
 * BuddyPress: Full-width template
 *
 * A custom page template without sidebar.
 *
 * @ since Reddlle 1.3.1 and BuddyPress 2.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(); ?>

4. Add the following styles in your child theme’s style.css file then save the file.

.buddypress #main #primary {
    margin: 0;
}

.buddypress #main #content {
    margin: 0 9.46429%;
}

5. Create a new file functions.php in your child theme folder and add the following then save.

<?php
/**
 * Enqueue stylesheet
 */
function reddle_child_theme_stylesheet() {
	wp_enqueue_style( 'reddle-child-themestyle', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'reddle_child_theme_stylesheet' );

5. Upload your Reddle child theme folder to your server.

6. Activate the Reddle child theme in wp-admin menu Appearance > Themes.

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.