Tags

STEP 3 of the BuddyPress Template Pack plugin compatibility process.

(The instruction below is for two-column pages. To make some of your BP pages of full-width, please check the instruction in this section.)

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 u-design theme folder in server during the BP Compatibility process, please delete the 6 BP folders transferred to your u-design 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:

<?php $content_position = ( $udesign_options['pages_sidebar'] == 'left' ) ? 'grid_16 push_8' : 'grid_16'; ?>
<div id="content-container" class="container_24">
<div id="main-content" class="<?php echo $content_position; ?>">
<div class="main-content-padding">
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">

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

Save file.

C. Upload header-buddypress.php and sidebar-buddypress.php to your theme folder in server wp-content/themes/u-design/ 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.


Instruction for Full Width Page

You’ll need to download the BP folder which contains the BP templates corresponding to the page you want to make full width. For example, if you want to make all your Groups component pages full width, you should download the /groups/ folder from wp-content/themes/u-design/ into your hard drive.

You’re going to change four files in your /groups/ folder namely:
/groups/index.php
/groups/create.php
/groups/single/home.php
/groups/single/plugins.php

At the top of each file, ABOVE all other code replace:

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

with the following:

<?php get_header(); ?>
<div id="content-container" class="container_24">
<div id="main-content" class="grid_24">
<div class="main-content-padding">
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">

then at the bottom of each file, replace:

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

with the following :

</div></div>
<div class="clear"></div>
</div></div></div>
<div class="clear"></div>
<?php get_footer(); ?>
About these ads