Template Pack Walkthrough – Twenty Twelve
Archived file. Good only up to BP 1.6.5 version
BP TEMPLATE PACK 1.2.1 == BUDDYPRESS 1.6.3 == WORDPRESS 3.5
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: https://codex.buddypress.org/ Description: Twenty Twelve child theme for BuddyPress 1.5 Compatibility Process Version: 1.0 Author: mercime Author URI: https://codex.buddypress.org/ Template: twentytwelve Tags: buddypress, two-column */ @ import url( ../twentytwelve/style.css );
Note: remove the space between “@” and “import” above to implement the CSS import
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('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-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
--------------------------------------------------- */
table.forum {
margin: 0 !important;
}
table.forum tr > td:first-child, table.forum 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#members-list,
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.
