bbPress Theme Compatibility, BP Theme Compatibility, WordPress Theme Repository

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.

Standard
BP Theme Compatibility, Commercial WordPress Themes

Sahifa Theme, Themeforest

Theme Compatibility

(Previously template-packed theme https://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.

Standard
bbPress Theme Compatibility, BP Theme Compatibility, WordPress Theme Repository

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.

Standard
BP Theme Compatibility, WordPress Default Themes

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.

Standard
BuddyPress Template Pack, Commercial WordPress Themes

Comfy Pro Theme, Deluxe Themes

STEP 3 of the BuddyPress Template Pack plugin compatibility process.

You only need to create two new files, header-buddypress.php and sidebar-buddypress.php to make your theme compatible with BP.

If you’ve revised any of the BP template files transferred to your comfy-pro theme folder in server during the BP Compatibility process, please delete the 6 BP folders transferred to your comfy-pro theme folder in server – /activity, /blogs, /forums, /members, /groups, /register – then re-run Appearance > BP Compatibility again to make sure that you have clean template files.

A. COPY your theme’s header.php and Save As > header-buddypress.php

Open up header-buddypress.php and at the BOTTOM of the file, below other code contained within, add this:

<div id="bigcolumn">
<div class="page-all">
<div class="page-top">
<div class="containerI">
<div class="sitenav">
<a href="<?php bloginfo('url'); ?>"><?php _e('Home','cmfy'); ?></a>&nbsp;&nbsp;&raquo;&nbsp;&nbsp;<?php single_post_title(); ?>
</div>
<div class="bigdiv">
<div id="post-<?php the_ID(); ?>" class="post">

Save file.

B. CREATE a new file named sidebar-buddypress.php

Open up sidebar-buddypress.php and paste the following in your blank file:

</div></div></div></div></div>
<div class="page-bottom"></div>
<div class="clear"></div>
</div>
<?php if ( bp_is_register_page() ) : ?>
        <script type="text/javascript">
                jQuery(document).ready( function() {
                        if ( jQuery('div#blog-details').length && !jQuery('div#blog-details').hasClass('show') )
                                jQuery('div#blog-details').toggle();
                        jQuery( 'input#signup_with_blog' ).click( function() {
                                jQuery('div#blog-details').fadeOut().toggle();
                        });
                });
        </script>
<?php endif; ?>
<?php deluxe_sidebar(); ?>

Save file.

C. Upload header-buddypress.php and sidebar-buddypress.php to your theme folder in server wp-content/themes/comfy-pro/ in the same directory where your regular header.php and sidebar.php files are located

D. Final note: Copy the style modifications for some BP elements http://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/ and paste those at the bottom of your theme’s stylesheet, then adjust to taste.

Standard
BuddyPress Template Pack, Commercial WordPress Themes

K9 Theme, Howling Dog Themes

STEP 3 of the BuddyPress Template Pack plugin compatibility process.

Based on the HTML structure of your theme, you need to change 17 template files within the 6 BP folders transferred to your k9 theme folder in server during the compatibility process.

If you’ve previously changed any of the BP template files in your k9 theme folder in server, replace all of them for a clean slate by deleting the 6 BP folders – /activity, /blogs, /forums, /groups, /members, and /registration – then re-run Appearance > BP Compatibility.

Download the 6 clean BP folders to your computer hard drive.

A. At the top of each of those 17 template files I linked to above, replace

<?php get_header( 'buddypress' ); ?>
<?php do_action( '//DIFFERENT HOOKS' ); ?>
<div id="content">
<div class="padder">

with the following:

<?php get_header() ;?>
<?php if (($var['sidebars'] == 'left' || $var['sidebars'] == 'left and right') && ($var['sidebarGroup'] != 'right') ) { get_sidebar('left'); if($var['sidebars'] == 'left and right' && ($var['sidebarGroup'] == 'left')) {get_sidebar('right'); } } ?>
<div id="main" class="equalht">
<div class="main_wrapper">
<?php if ($var['k9-vision'] == 'on') { ?> <div class="mvtext" style="height:400px">Internal Content Area (<?php echo $var['main_width']; ?>px wide)</div><div class="clear" style="height:280px"></div><?php } else { ?> 
<?php dynamic_sidebar('Content'); ?>
<?php k9_get_hanger('content/before/');  ?> 
<div class="page">

Then in each of 17 files, where applicable, you’d like to change the BP Templates’ page title’s header tag from

<h2>...</h2> or <h3>..</h3>

to

<h1 class="page_title"> // RESPECTIVE BP TEMPLATE TITLES // </h1>

Just watch out when you do this in the /activity/index.php page.

Save files.

B. At the bottom of the same 17 files, replace:

</div><!-- .padder -->
</div><!-- #content -->
<?php do_action( '//DIFFERENT HOOKS' ); ?>
<?php get_sidebar( 'buddypress' ); ?>
<?php get_footer( 'buddypress' ); ?>

with the following (except for registration/register.php):

<div class="clear"></div></div>
<?php k9_get_hanger('content/after/');  ?>
</div></div>
<?php if (($var['sidebars'] == 'right' || $var['sidebars'] == 'left and right') && ($var['sidebarGroup'] != 'left') ) { if($var['sidebars'] == 'left and right' && ($var['sidebarGroup'] == 'right')) {get_sidebar('left'); } get_sidebar('right'); } ?>
<div class="clear"></div>
<?php get_footer() ;?>

with the following for registration/register.php:

<div class="clear"></div></div>
<?php k9_get_hanger('content/after/');  ?>
</div></div>
<?php if (($var['sidebars'] == 'right' || $var['sidebars'] == 'left and right') && ($var['sidebarGroup'] != 'left') ) { if($var['sidebars'] == 'left and right' && ($var['sidebarGroup'] == 'right')) {get_sidebar('left'); } get_sidebar('right'); } ?>
<script type="text/javascript">
jQuery(document).ready( function() {
if ( jQuery('div#blog-details').length && !jQuery('div#blog-details').hasClass('show') )
jQuery('div#blog-details').toggle();
jQuery( 'input#signup_with_blog' ).click( function() {
jQuery('div#blog-details').fadeOut().toggle();
});
});
</script>
<div class="clear"></div>
<?php get_footer() ;?>

Save files.

C. Upload the 6 BP folders containing the 17 files you’ve just revised to your server wp-content/themes/k9/

D. Copy the style modifications made in BP Twenty Ten at http://codex.buddypress.org/legacy/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/ and paste to your theme’s stylesheet. Adjust to taste.

Standard
BuddyPress Template Pack, Commercial WordPress Themes

MagazinePress, Themeforest

STEP 3 of the BuddyPress Template Pack plugin compatibility process.

You only need to create two new files, header-buddypress.php and sidebar-buddypress.php to make your theme compatible with BP.

If you’ve revised any of the BP template files transferred to your magazinepress theme folder in server during the BP Compatibility process, please delete the 6 BP folders transferred to your magazinepress theme folder in server – /activity, /blogs, /forums, /members, /groups, /register – then re-run Appearance > BP Compatibility again to make sure that you have clean template files.

A. COPY your theme’s header.php and Save As > header-buddypress.php

Open up header-buddypress.php and at the BOTTOM of the file, below other code contained within, add this:

<div id="main-content" class="clearfix">
<div id="lcol-wrapper">
<div id="leftcol">
<?php get_template_part('includes/breadcrumb' ); ?>
<div id="post-content" class="clearfix">
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="inner">

Save file.

B. COPY sidebar.php and Save As > sidebar-buddypress.php file

Open up sidebar-buddypress.php and at the very TOP of the file above all other code, add:

</div></div></div></div></div>

At the very BOTTOM of the same file, below all other code, add:

<?php if ( bp_is_register_page() ) : ?>
        <script type="text/javascript">
                jQuery(document).ready( function() {
                        if ( jQuery('div#blog-details').length && !jQuery('div#blog-details').hasClass('show') )
                                jQuery('div#blog-details').toggle();
                        jQuery( 'input#signup_with_blog' ).click( function() {
                                jQuery('div#blog-details').fadeOut().toggle();
                        });
                });
        </script>
<?php endif; ?>
</div>

Save file.

C. Upload header-buddypress.php and sidebar-buddypress.php to your theme folder in server wp-content/themes/magazinepress/ in the same directory where your regular header.php and sidebar.php files are

D. Final note: Copy the style modifications for some BP elements http://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/ and paste those at the bottom of your theme’s stylesheet, then adjust to taste.

Standard