Codex Home → Legacy Docs → Archived Section: Theme Development → Upgrading a 1.0 Theme to 1.1

Upgrading a 1.0 Theme to 1.1

---

Archived file. Good up to BP 1.1

---

Starting at version 1.1, BuddyPress themes are simply WordPress themes with extra template files. The separation between a WordPress (old bphome) and BuddyPress (old bpmember) theme has been removed. All theme files are contained in the same theme and one theme design applies to the site as a whole.

This guide will help those people who have built custom themes for BuddyPress 1.0 transition to the new theme setup.

How you approach upgrading your theme really depends on your setup in BuddyPress 1.0. Please choose the section that best describes your situation and follow those instructions only.

These help guides make the assumption that you have copied the new 1.1 default themes (/plugins/buddypress/bp-themes/bp-sn-parent/ and /plugins/buddypress/bp-themes/bp-default/ into the /wp-content/themes/ directory.

“I’ve used the old default themes, but modified the layout/colors”

1. Duplicate /wp-content/themes/bp-default/ and give it a new unique name.
2. In your new duplicated default theme, inside the _inc/css folder create a file called “custom.css”
3. Copy the custom CSS from both your old bphome and bpmember theme into this file and save the file.
4. Open up style.css in the root of your duplicated default theme.
5. Edit the “Theme Name” at the top of the style.css file and give it a unique name.
6. The last line of style.css is: /* @import url( _inc/css/custom.css ); */. Remove the starting /* and the ending */ on that line. Save the file.
7. Make sure you have backed up your “/wp-content/bp-themes/” directory, then delete it.
8. Log in as an admin and head to /wp-admin/ on your root blog.
9. Under “Site Admin > Themes”, select “yes” next to the theme with the custom name you just entered into style.css
10. Under “Appearance > Themes” activate the theme for the root blog.
11. You should now be using the new one theme system with your design customizations.

“I’ve used a WordPress theme for my blog with the default BuddyPress member theme”

In BuddyPress 1.0 you could use a WordPress theme that was completely separate from your BuddyPress theme design. More often than not the BuddyPress theme would not get updated to match the WordPress theme design in use. This made the overall experience clunky.

With BuddyPress 1.1 you can integrate BuddyPress templates with your WordPress theme design. One thing to be aware of before taking this route is that WordPress themes only contain layout styles for blog pages – they are not built for the extra features BuddyPress provides. You will have to add custom CSS to your WordPress templates to handle the layout for the BuddyPress pages.

1. Duplicate your existing WordPress theme so you have a backup.
2. Open up the folder /wp-content/themes/bp-sn-parent/ and copy every folder and the following files “optionsbar.php”, “userbar.php” and “plugin-template.php”. Paste these folders and files into your active WordPress theme.

You will now need to make an edit:

1. Open up header.php and add the following lines (usually at the bottom inside of a content or container div, not inside the header div):

   <?php if ( !bp_is_blog_page() && !bp_is_directory() && !bp_is_register_page() && !bp_is_activation_page() ) : ?>
   
   <?php locate_template( array( 'userbar.php' ), true ) ?>
   <?php locate_template( array( 'optionsbar.php' ), true ) ?>
   
   <?php endif; ?>
   

   Save the header.php file.

2. Make sure you have backed up your “/wp-content/bp-themes/” directory (this is important for the last step), then delete it.
3. You should now be able to visit your site and BuddyPress URL’s and find that the BuddyPress pages will work with your general site design and header/footer. You will however find that BuddyPress pages are generally not presented correctly.
4. You can try including the components.css file from the BuddyPress parent theme to add layout styles to BuddyPress pages. Open up your WordPress theme’s style.css file. Add the following line below the comment header:@import url( ../bp-sn-parent/_inc/css/components.css )
5. You should now see basic layout styles for BuddyPress pages within your WordPress theme. You will likely still need to perform some cleanup to get things working completely seamlessly.

If you find that your WordPress theme is not being co-operative, you can install BuddyPress on a secondary blog giving you the option to theme BuddyPress differently than your root blog.

Full instructions to do this can be found here:
https://codex.buddypress.org/how-to-guides/install-buddypress-on-a-secondary-blog/

“I’ve built a completely custom WordPress theme and BuddyPress theme”

Not a problem, in your case you need to merge the two into one single WordPress theme.

It should be as simple as copying all of the templates from the BuddyPress theme and pasting them into the WordPress theme. Be sure to copy and paste over all of the CSS from the BuddyPress theme also.

Once you are done, backup your /wp-content/bp-themes/ directory and remove it. This will allow the new integrated theme to work.
p

---