Template Pack Walkthrough – Twenty Ten

8. Step Three: Tweaking your layout – using the second method – Xfiles-buddypress.php.

Text available here.

a) Compare the HTML structure of Twenty Ten’s page.php or index.php with BP template file like /activity/index.php.

bp-default theme has a two-column layout with sidebar

<?php get_header( 'buddypress' ); ?>

	<div id="content">
		<div class="padder">

			[ CONTENT ]

		</div><!-- .padder -->
	</div><!-- #content -->

<?php get_sidebar( 'buddypress' ); ?>
<?php get_footer( 'buddypress' ); ?>

Twenty Ten’s page.php also has a two-column layout with sidebar

<?php get_header(); ?>

	<div id="container">
		<div id="content" role="main">

			[ CONTENT ]

		</div><!-- #content -->
	</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Both bp-default activity/index.php and Twenty Ten page.php have a two-column layout with sidebar and a common div#content. We’ll wrap Twenty Ten’s page structure around the content of the BP template files then use style.css to finish the look of the layout.

We only need to create two more files – header-buddypress.php and sidebar-buddypress.php – for this child theme. Because of the similarity in structure, there’s no need to create a footer-buddypress.php.

b) Open up header.php of the Twenty Ten theme. Add the following at the bottom of the file and Save As header-buddypress.php :

<div id="container">

c) Open up sidebar.php of the Twenty Ten theme. Add the following at the top of the file and Save As sidebar-buddypress.php :

</div><!-- #container -->
<?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; ?>

d) Upload header-buddypress.php and sidebar-buddypress.php to wp-content/themes/bp-twentyten/

9. Congratulations, you have completed the BuddyPress Theme compatibility setup procedure! Click on Save Settings

Pages: 1 2 3