New theme framework and exisiting WP themes
I know I’m probably ahead of the curve here since it hasn’t been officially released yet, but does anyone have any pointers as to how to integrate an existing theme into BuddyPress 1.1?
Let’s say I have a specific WP theme I want to use on the main blog. Currently, if I have this active, my BP member pages go away. (I’m on one of the trunk version and could be behind.)
Do I generally have to just make a BP child theme that has the styles etc of the original WP theme?
The best option is to set “Template: bp-sn-parent” in the WP theme’s style.css header. That will allow it to inherit all of the BuddyPress templates.
If that isn’t an option (perhaps the theme is already a child theme) then you will need to copy over the template files from bp-sn-parent into the wp theme. Just make sure you don’t replace any existing theme files.
You’ll will probably want to add the user navigation into the theme also, you can add the following lines to the bottom of header.php:
<?php if ( !bp_is_blog_page() && !bp_is_directory() && !bp_is_register_page() && !bp_is_activation_page() ) : ?>
<?php locate_template( array( 'userbar.php' ), true ) /* Load the user navigation */ ?>
<?php locate_template( array( 'optionsbar.php' ), true ) /* Load the currently displayed object navigation */ ?>
<?php endif; ?>
Once you’ve done that, BuddyPress pages will inherit all of the theme’s styles and its header and footer. You will of course need to add extra styles since WP themes only handle blog pages.
You can also try importing the bp-sn-parent screen styles into the WP theme’s style.css file. Depending on the theme, this may help to add layout to BuddyPress pages, but also stay within the WP theme’s look and feel.
I prefer the other way around:
- The parent theme will be the original WP theme without modifications (or with light modifications in headers to add the BP navigation).
- The child theme will be the BP theme framework, but without the redundant files ( header, footer, archives, index, etc).
Why? Because some complex WP themes (specially frameworks) have a complex file structure, including internal PHP files with code that is loaded with something like:
load_template( TEMPLATEPATH . '/lib/theme_functions.php' );
TEMPLATEPATH points to the parent theme folder, which means that the included file won’t be found if the theme is a child theme.
If you use this setup, you won’t need to hack the WP theme.
Of course your BP theme will need to be modified to work, because it probably contains some load_template calls.
I tried this with the Thesis theme and it works really good.
Good call, I never considered doing it the other way around.
load_template() calls should be replaced with locate_template() calls that support child theme lookups.
Awesome, thanks. I’ll try both and see which one I like.
Although – for some themes one may be better than the other anyway. Hmmm.
Lots of meat to chew on here. Will let you know when I come up for air.
Here are a few screenshots of my integration (with a custom BP framework):
My custom framework initially was written from scratch, but since BP 1.1 I’ve borrowed a lot of code, styles and icons the bp-sn-parent
This is the case with many of the premium themes. Woo themes, for instance, use a custom framework to bootstrap everything. Fairly straightforward to edit the calls in functions.php, to point to the correct paths; but that’d have to be done each time the theme is updated. Not sure how frequently that happens in practice, though.
Detective’s way looks interesting, but it’s worth noting, perhaps, that it’s still a matter of hacking one thing or another–either the WP theme or the BP parent theme.
Nice work, though, Detective. I’m eager to see some really creative applications of BP, that break out of the default. With any luck, I’ll be able to do so myself.
Thanks, that the first explanation of working with a WP theme framework that actually made sense to me (I think I’m slow). I’ll be trying with Hybrid when WPMU 2.9 arrives. Doing it this way, I should be able to get most things done with child’s style.css and functions.php
Feel free to show us an example.
I’d really appreciate seeing the code for the corresponding files; I am mostly a n00b when it comes to his manner of hackery, and I would like to see what I am supposed to pick and choose. A step-by-step would be greatly appreciated.!
This is about as detailed of a step-by-step set of instructions you will find. The rest is up to trial and error, and experience!
I am using WooTheme’s Newsport on a WPMU 2.8.4a install with BuddyPress 1.1.1 (www.threesheetsnw.com).
I’d like to spend some time this weekend integrating BuddyPress 1.1.1 into my theme and was wondering if anyone had any more thoughts on the best approach.
Sepecifically, should I hack Newsport theme and add the Buddypress Templates (as recommended by BuddyPress) or …
Create a child theme, leaving Newsport alone, and including the BuddyPress templates in that child (as recommended by Detective above)?
I know that WooThemes use frameworks for its themes.
Thanks much for helping with this brave new world!
May I ask a possible dumb question? I’ve upgraded to 1.1.1 on 2.8.4a and am using a premium theme for my main blog. I’ve currently reverted back to the old BuddyPress theme system for now.
Here’s my question, can I leave my Premium WordPress theme as the Parent theme, create a child, and place the bp-sn-parent folders and the Ã¢â‚¬Å“optionsbar.phpÃ¢â‚¬Â, Ã¢â‚¬Å“userbar.phpÃ¢â‚¬Â and Ã¢â‚¬Å“plugin-template.phpÃ¢â‚¬Â in the child theme? Also place header.php in the child with the appropriate code for the usernav bar? And then edit the appropriate css?
Is that a workable and effective approach?
Could someone post such skeletal bp-in-between -framework to plugins or somewhere? One that:
- could easily be childed to any WP-theme
– is stripped from any non-bp elements? (header, footer etc.)
– load_template()s were replaced with locate_template()s
Or have I misunderstood something and this would be insensible?
It appears from Detective’s post above yours that the path you described is being successful. I intend to do the same with Hybrid Theme when I get started.
It just occured to me, that detective’s way is the way the theme framework should be done. Here’s the deal:
BP-Blog theme & BP-member theme. The blog theme was essentially any WP-blog theme (with minor tweaks), and the member theme contained the BP functionality. Both of them contained also their separate skins.
Theming was possible by taking excisting WP-themes and BP-themes and skinning them for consistent look. This approach had obvious disadvangages, but the advantage of being able to start from just about any WP-theme.
WP-SN-Parent theme is essentially a WP-theme with BP-functionality. Theming is done by childing this theme. This solves issues about non-standard theme structure, but has the downside of having problems with integrating to other themes.
Enter Detective’s solution: in stead of two layers of BP default theme, we should have three:
1) BP-Structure theme (structure)
2) BP-Functional theme (pb-member theme etc. functionality)
3) Skin (CSS+js etc)
Each of these is the child theme of the upper.
Now, since BP-Functional is essentially an unskinned non-complete theme (no headers or footers etc.), it can and must be childed to any theme, not only to BP-Structure. Hence it would restore the 1.0 ability to start from any WP theme, and integrate BP into that. Still it would use the Child theme functionality and live nicely within the WP theme ecosystem.
For bp-theme authors this would mean improved flexibility: they could start by skinning (and maybe extending) the BP-Functional, or just the BP default skin. On the other hand, they could child the BP functional to some existing theme of theme framework – like Sandbox of Hybrid – and skin that.
And the best part is that it would be backwards compatible with the 1.1 framework: the bp-sn-parent is just split into generic structure part an the bp-specific function part, and skinned to the actual default part. And any theme extending (childing) the bp-default could still be extending (childing) it.
This kind of in-between theme is an interesting development in the design of WP-themes, kind of plugin in the theme architecture… Don’t know if it has been done before…
Could this make it into 1.2?
I am trying to achieve the 3 layer approach suggested by outolumo, which looks ideal to me.
I just got a serious inheritance problemâ€¦!
Because I need to integrate BuddyPress in a section of a site and not having it run as a whole site, I am testing this set up:
1) The original “WP Theme” as a parent (with just the code in post #2 from Andy, in “header.php”)
2) The “bp-sn-parent” folder stripped out of reduntant files that are already in “WP theme”, keeping just BP folders and “optionsbar.php”, “plugin-template.php”, “userbar.php”, and “style.css”.
Made this theme a child of WP Theme, declaring “Template: wp-theme” in the stylesheet, right?
3) The “bb-default” theme for styling (skinning) and customization.
I’ve declared “Template: bp-sn-parent” so that “bb-default” is a child of “bp-sn-parent”, which is a child of “wp-theme”.
1)”wp-theme” is the parent.
2) “bp-sn-parent” is the child of “wp-theme” (style.css declares: Template: wp-theme).
3) “bb-default” is the child of “bp-sn-parent” (style.css declares: Template: bp-sn-parent).
The “bb-default” theme is not showing up in the backend under “Site Admin/Themes”, so I cannot make it available in “Apperance/Themes” to activate it.
If I put a blank “index.php” file in “bp-sn-parent”, than it does show up in the backend, so I can activate it. (Is that normal?)
So, before activating the “bb-default” theme (which should refer to “bp-sn-parent” which should refer to “wp-theme”), I’ve edited the “style.css” in the “bb-default” theme to import the styles from “wp-theme” (because it styles the whole site) with this rule:
@import url( ../wp-theme/style.css );
The result is a that the homepage (normal site) is blank, and the BuddyPress section is there, but messed up and not skinned with “bb-default” styles, and only some styles from “wp-theme” are applied (the footer image is there, but not the header image).
Now, if I go and I activate the “bp-sn-parent” theme, the homepage of the site shows up normally, and the BuddyPress section has some “bb-default” styles and got the header images from the “wp-theme” but not the footer image. And it’s preatty screwed up too.
So, as you see I am trying to achieve this 3 layers set up, but as I said, something with inheritance is totally messed up.
Does anybody have any insights on this. I am sure it could be useful for the whole community.
You can’t have three themes loaded, only two: a parent and a child.
Thanks for the answear, Detective.
So,the 3 layers thing as suggested by outolumo is never going to work, right?
Does that mean that I will have to merge the “bb-default” css and images files into “bp-sn-parent”?
The more I read these posts, the more I’m thinking that BP themes are trying to serve two purposes and some people want one.
If you want a BP site, then the BP theme framework could be “childed” and you’re good. If you want a heavly modified solution like TastyKitchen.com, it seems that you are stripping the functionality of the BP theme and integrating it into a Child or your WP theme. In fact, for a CMS implementation, you might not even want the functions in the same templates as they exist in the BP theme.
To accomplish this, it seems Detective and others are saying you need to create a parent whose skin/functionality is based on a WP theme and whose additionally functionality is based on BP. When childed, this parent can supply the framework for the child which will inherit functionality from the parent and look/feel from it’s own CSS and functions. WIth Theme Hybrid, functions.php would be used to determine what info actually showed up in child and the CSS would determine how it looked.
The downside to all of this seems to be that we now have a combined BP/WP parent which could be awkward to upgrade particularly if there is substantial template overlap. Unless I’m mistaken this will need to be a future release issue.
Then again, I’m a noob and don’t know the complexities of BP or Hybrid.
I got a question about the “functions.php” file that is “bp-sn-parent”.
I am trying to make yor approach of having the “WP Theme” as parent and the stripped out “bp-sn-parent” as a child.
The child theme will be the BP theme framework, but without the redundant files ( header, footer, archives, index, etc).
What am I supposed to do with functions.php? I guess it holds a lot of stuff needed by BP to function. I tried to copy/paste the whole code from functions.php in BP theme to functions.php in WP Theme: I got a blank page. No error messages displayed, just broke.
Well, just wanted to know about the use and the place of “functions.php” in BP and what I am supposed to do with it, if I follow your way.
Thanks in advance for insights.
Leave it alone. Most themes put a lot of functionality on functions.php. And, if the child theme has a functions file, both of them will be loaded.
Ok, so “functions.php” in the “bp-sn-parent” (which will be a child of WP Thme”) is one of those files that you don’t delete toghether with “header.php”, “footer.php”, index.php” (reduntants of the parent theme).
Thanks for the clarification.
Yep, the template overlap is the issue, and this should a major design concern in the architecture I suggested: to design the buddypress functional theme layer in such a way that it overlaps as little a possible with different parent themes.
And yes, this is a future release issue.
After many tries, I decide I am going to try to adopt detective method, however I am not verse in what is parent/child theme.
What do I need to do in order to get it to work? Where must I add the code to call out the child them. I would be glad if someone would be able to direct me to tutorial where I can have a look to see what is going on.
You must be logged in to reply to this topic.