Codex Home → Legacy Docs → Archived Section: Theme Development → Themes & the BuddyPress Template Pack → Template Pack Walkthrough – Twenty Eleven

Template Pack Walkthrough – Twenty Eleven

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

Text available here.

a) Compare the HTML structure of Twenty Eleven’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 Eleven’s page.php has a one-column layout and no sidebar</p<

<?php get_header(); ?>
<div id="primary">
<div id="content" role="main">
[ CONTENT ]
</div><!– #content –>
</div><!– #primary –>
<?php get_footer(); ?>

Twenty Eleven’s index.php has a two-column layout with sidebar

<?php get_header(); ?>
	<div id="primary">
		<div id="content" role"main">
			[ CONTENT ]
		</div><!-- #content -->
	</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Both bp-default index.php and Twenty Eleven index.php have two-column layout with sidebar and a common div#content. We’ll wrap Twenty Eleven’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 Eleven theme. Add the following at the bottom of the file and Save As header-buddypress.php :

<div id="primary">

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

</div><!-- #primary -->
<?php if ( bp_is_register_page() ) : ?>
	<script type="text/javascript">
		jQuery(document).ready( function() {
			if ( jQuery('div#blog-details').length &amp;&amp; !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-twentyeleven/

Pages: 1 2 3

---