Twenty Twelve, WordPress Default Theme


Twenty Twelve Theme

There are two ways to implement Step Three of the compatibility process:
– First Method: Superimposing the HTML structure of your WordPress theme onto 17 BP template files which were transferred into your WP theme folder during the compatibility process or
– Second Method: Creating the following files in your WordPress theme – header-buddypress.php, sidebar-buddypress.php and/or footer-buddypress.php

We’ll use the second method to make Twenty Twelve compatible with BuddyPress. By the end of this article, you should have the basic child theme files required to make Twenty Twelve compatible with BP 1.6.3 using the BP Template Pack plugin:

  • /bp-twentytwelve/
    • header-buddypress.php
    • sidebar-buddypress.php
    • style.css

Prelude: Create a Twenty Twelve Child Theme

( If you already have your own Twenty Twelve Child theme, skip this section and proceed to the Compatibility Process )

1. Create a new theme folder for your Twenty Twelve child theme. For this example, the child theme is called BP Twenty Twelve so we’ll name our theme folder bp-twentytwelve.

2. Create a style.css file and add it in the bp-twentytwelve folder with content below:

Theme Name: BP Twenty Twelve
Theme URI:
Description: Twenty Twelve child theme for BuddyPress 1.5 Compatibility Process
Version: 1.0
Author: mercime
Author URI:
Template: twentytwelve
Tags: buddypress, two-column
@import url( ../twentytwelve/style.css );

3. Upload the bp-twentytwelve folder with the style.css file within to your server to /wp-content/themes/

N.B. We’ll be creating and uploading more files later during the compatibility process. For now, these are the basic files required for the child theme to be activated so that we can proceed with the BP compatibility process.

Compatibility Process

1. After activating BuddyPress, go to dashboard Appearance > Themes and activate our child theme “BP Twenty Twelve”. At the top of the Themes panel, you’ll see a message with 3 different options to make your theme compatible with BuddyPress. Select the link “update your existing WordPress theme"

2. Clicking on the above link will bring you to the “Install Plugins” panel. Click on the  “Install” link under BuddyPress Template Pack plugin.

3. Click “OK” to install BuddyPress Template Pack plugin.

4. In the next panel, click on the link “Activate” to activate the BP Template Pack plugin.

5. Go to Appearance > BP Compatibility

6. Step One: Moving template files automatically. Click on “Move Template Files

7. If the process was successful, you’ll get the message “Templates moved successfully!” in the same panel. Click on the button”Continue to Step Three." You will only need to go through Step Two if there was a problem transferring the files.

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

Text available here.

a) Compare the HTML structure of Twenty Twelve theme’s page.php or index.php with a 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 Twelve’s page.php also has a two-column layout with sidebar

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

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

<div class="site-content" id="primary">

c) Open up sidebar.php of the Twenty Twelve 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">// <![CDATA[
		jQuery(document).ready( function() {
			if ( jQuery('div#blog-details').length && !jQuery('div#blog-details').hasClass('show') )
			jQuery( 'input#signup_with_blog' ).click( function() {

// ]]></script>
<?php endif; ?>

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

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

Finishing Touches

We’re almost done. Check out the layout of the BP components in your site.

We need to clean up some styles enqueued by the BP Template Pack plugin. Open up the child theme’s style.css and add this block after the text we’ve already posted in the file:

/ > BuddyPress Component Finishing Styles
--------------------------------------------------- */ {
	margin: 0 !important;
	} tr > td:first-child, tr > th:first-child {
	padding: 15px !important;
div#item-header h2,
form#whats-new-form h5 {
	clear: none !important;
div#item-header ul {
	list-style-type: none;
div.dir-search {
	margin: -20px 0 0 !important;
div.item-list-tabs {
	margin: 25px 0 20px !important;
div.item-list-tabs ul,
div#object-nav.item-list-tabs ul,
div#subnav.item-list-tabs ul {
	font-size: 13px;
	margin-left: 0 !important;
div.item-list-tabs ul li:first-child {
    	margin-left: 15px !important;
div#subnav.item-list-tabs {
	margin: -15px 0 15px !important;
#activity-stream {
	margin-left: 0;
.padder div.pagination {
	margin: -20px 0 0 !important;
ul.item-list {
	list-style-type: none;
        margin-bottom: 20px;
	margin-left: 0;
body.activity-permalink div.activity {
	padding: 20px;
body.activity-permalink .activity-content {
	padding: 0 !important;
.widget-container {
	overflow: hidden;
ul#groups-list {
	list-style-type: none;
	margin-left: 0;
div.avatar-block img {
	float: left;
#content input, #content textarea {
	font-size: 12px;
	line: height: 18px;
#main {
        margin-bottom: 20px;

Add and delete styles according to taste. Save file and upload to child theme’s folder wp-content/themes/bp-twentytwelve/ and WE ARE DONE.

N.B. The instructions above were also posted in the BuddyPress Codex at


6 thoughts on “Twenty Twelve, WordPress Default Theme”

  1. I had to move the sidebar call between the “end padder div” and “end content div” tags for all bp page templates but now it is working fine!

    1. Hey Steve, would you accepte to give me a little bit more explication about moving the sidebar call for pb pages templates?

  2. Steve, i’m noob could you tell my which pb page templates you had to modify?

    I succeeded all the tutorial, i only have a problem of sidebar 🙂

  3. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my
    blog that automatically tweet my newest twitter updates.

    I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s