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.

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.

Pinboard Theme

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 pinboard theme folder in server during the compatibility process.

If you’ve previously changed any of the BP template files in your pinboard 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 16 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(); ?>
<div id="container">
<section id="content" <?php pinboard_content_class(); ?>>
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<div class="entry">
<div class="entry-content">

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

<header class="entry-header"> // REPLACE WITH TITLES OF RESPECTIVE BP TEMPLATES // </header>

then insert this to just right UNDER

<div class="entry">

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

Save files.

B. At the bottom of the same 16 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></div>
</article>
</section>
<?php if( ( 'no-sidebars' != pinboard_get_option( 'layout' ) ) && ( 'full-width' != pinboard_get_option( 'layout' ) ) ) : ?>
<?php get_sidebar(); ?>
<?php endif; ?>
</div>
<?php get_footer(); ?>

with the following for registration/register.php:

<div class="clear"></div>
</div></div>
<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>
</article>
</section>
<?php if( ( 'no-sidebars' != pinboard_get_option( 'layout' ) ) && ( 'full-width' != pinboard_get_option( 'layout' ) ) ) : ?>
<?php get_sidebar(); ?>
<?php endif; ?>
</div>
<?php get_footer(); ?>

Save files.

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

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.

Esplanade Theme

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 esplanade theme folder in server during the compatibility process.

If you’ve previously changed any of the BP template files in your esplanade 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(); ?>
<div id="container">
<section id="content">
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<div class="entry">
<div class="entry-content">

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

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

to

<header class="entry-header"><h1 class="entry-title"> // RESPECTIVE BP PAGE TITLES // </h1></header>

where applicable, then move this to above

<div class="entry-content">

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></div></article></section>
<?php get_sidebar(); ?></div>
<?php get_footer(); ?>

with the following for registration/register.php:

<div class="clear"></div>
</div></div></article></section>
<?php get_sidebar(); ?>
<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>
<?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/esplanade/

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

Yoko Theme

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 yoko theme folder in server during the compatibility process.

If you’ve previously changed any of the BP template files in your yoko 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(); ?>
<div id="wrap">
<div id="main">
<div id="content">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="single-entry-content">

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

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

to

<header class="page-entry-header"><h1 class="entry-title"> // Titles Of Respective BP Page Templates // </h1></header>

AND move title to above

<div class="single-entry-content">

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>
</article></div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

with the following for registration/register.php:

<div class="clear"></div></div>
</article></div>
<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 get_sidebar(); ?>
<?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/yoko/

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

PulsePress Theme

STEP 3 of the BuddyPress Template Pack plugin compatibility process.

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

If you’ve revised any of the BP template files transferred to your snapwire theme folder in server during the BP Compatibility process, please delete the 6 BP folders transferred to your snapwire 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 class="sleeve_main">
<div id="main">
<?php pulse_press_breadcrumbs(); ?>

Not sure if the breadcrumbs will work here, but if there’s an error, delete the last line (breadcrumbs) above.

Save file.

B. CREATE A BLANK sidebar-buddypress.php

Open up the blank sidebar-buddypress.php file and at the very TOP of the file, add this:

<div class="bottom_of_entry">&nbsp;</div>
</div></div>

Save file.

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

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

Wallow Theme

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 wallow theme folder in server during the compatibility process.

If you’ve previously changed any of the BP template files in your wallow 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 global $wallow_options; ?>
<?php get_header(); ?>
<div id="content">
<h2 class="posts_date">&nbsp;</h2>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">      
<div class="storycontent">

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

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

to

<h3 class="storytitle"> // Titles Of Respective BP Page Templates // </h3>

then move the title to above

<div class="storycontent">

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></div>
<div class="fixfloat"></div></div>
<?php get_footer(); ?>

with the following for registration/register.php:

</div>
<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>
<div class="fixfloat"></div></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/wallow/

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