Convert a WordPress Theme to a BuddyPress Theme
Wondering if anyone can clearly articulate how to take an existing WordPress theme and convert it to a BuddyPress enabled theme for 1.2?
Andy has provided a good overview of how to Build a BuddyPress child theme from the new parent, but what about if you want to take a theme like P2 or a premium magazine theme and have it BuddyPress enabled?
If I’m missing something let me know.
Andy is right…I’ve tried about six or seven themes and the issues are largely tied to the ‘content’ div not matching up, although I have at least one theme that doesn’t recognize the admin bar. Very good start though!
Cool, I ‘m sure that’s the problem. I’ll check it out.
Question… I’ve got my theme working that did it. Thanks.
My theme DOES NOT show the nav bar like in the default BuddyPress theme. I tried copying the code from the header section of the BuddyPress theme, but I got a function error after.
Any ideas of how to add the BuddyPress Nav to the theme?
For anyone following the thread to date: Armand Morin’s question (how to add the BuddyPress Nav to the theme) gets answered here: http://buddypress.org/forums/topic/creating-nav-bar
Update again: the full answer is now here – http://wordpress.org/extend/plugins/bp-template-pack/
I actually found this quite difficult and still cannot convert a theme! Damn by technical capabilities.
What theme was it? Some themes are pretty straightforward, some are a nightmare. (I’m working on a pile of them in my “spare time”)
@Andrea_r it was globalpress bought it from themeforest pain in the bum to do.
I basically follow the steps as in the Buddypress template pack, however I have had issues with matching up the div and content classes / containers.
I know that once I have actually done it once, I will be able to do it again but its a nightmare, I think the theme is overly complicated.
You have to go inot the BP folders that are added to the theme, and wherever there’s a “content” div, match that up to the HTML markup in the original theme.
If it;s overly complicated in the theme – yeah, pain in the ass. (which is why there’s unfinished themes on my hard drive )
I agree that this is more difficult than it should be. I’m finding that when I try following the buddypress codex on this with using @imports, the admin bar works fine, but pulling in the default theme css screws up a lot of things. I’ve found that just grabbing the default buddypress theme’s css sytles that are in addition to the core wordpress ones is working better.
I really think that the buddypress default theme should do a better job at segregating core wordpress css tags from the buddypress specific ones. The buddypress-specific css styles seem to be too dependend on the core wordpress ones. For example, core wordpress typically removes the dots from
- entries and the wordpress sub-nav tabs assume that’s already done. I’d like to see the buddypress specific tabs assign all the css properties they need so those can be pasted into an existing theme with ease.
While I’m making progress, the time involved to get it perfect is too high. Not to mention buddypress really adds a lot of overhead and slows down my site. I haven’t even installed the bbpress forums yet as I’m scared to death of what that will do to site performance. I’m on a dedicated server, too, and its just not good.
I’m thinking about writing a tutorial on my site http://xtremelysocial.com to document what I’m doing to help others with this. However, regarless of what tutorials get published, in the end there is just way too much css tweaking required.
Well, to be honest that pretty much sums up CSS doesn’t it – ‘just way too much css tweaking required’. Every site I’ve ever developed has required a fair bit of CSS tweaking / hacking / fighting!
As someone who hacked BP1.1 into a premium WP theme (and boy was that a headache!) I actually found that in comparison, BP 1.2 with @andy‘s BP Template Pack was a dream. Granted, to get it exactly how you want it takes a little work, but I managed to update a new WP theme in under an hour! Then gradually bringing in BP css from the default theme along with some changes of my own has pretty much worked for me.
The default structure / css is never going to work for everyone – I think it has to follow WP to a point, after all, they’re related apps – but look at it this way: at leastyou haven’t had to create a whole social networking plugin!
@timnicholson – let me know if / when you’ve knocked together the tutorial and I’ll throw in any useful tips that I come across as I finish my own mods.
Has anyone successfully converted any of woothemes products, say Canvas or CityGuide? They too seem to fight the conventional formatting suggested in the template pack.
“This is relevant to my interest.”
If you’re a developer please read http://buddypress.org/forums/topic/i-need-help-converting-existing-theme-into-a-buddpress-ready-theme and let me know if you can help me. This is a paid job. Please read my post at http://buddypress.org/forums/topic/i-need-help-converting-existing-theme-into-a-buddpress-ready-theme and let me know if you can help me. There are about 8 pages to edit.
We’ve just finished converting the WooThemes “Headlines” template, and it is well suited for Buddypress. You can see it at http://LabSecrets.com
We found that this template required us to modify the structure and add some new css. Once we did this, it was easy-enough (though just required the time to copy/paste) to replicate across the rest of the theme.
Probably going to try this next on the “Canvas” theme. This time might try to see if there is a way to do it without changing the id labels or adding extra div-tags (but not likely given the fact that the “container” and “content” div’s are used 2x, thereby necessitating the name changes for the inner (they’re used once by woo and then once again in the bp default template….which makes the css problematic….sigh…)
Here are the structures we modified (using group folder as the example):
TOP OF THE PAGE:
<?php get_header() ?>
<div id=”container2″ class=”col-full”>
<div id=”content2″ class=”col-left”>
BODY OF PAGE….CONTENT HERE… OMITTED….
BOTTOM OF THE PAGE:
</div><!– #content2 –>
<?php do_action( ‘bp_after_directory_groups_content’ ) ?>
<div id=”sidebar” class=”col-right”>
<?php locate_template( array( ‘sidebar.php’ ), true ) ?>
</div><!– #sidebar –>
</div><!– #container2 –>
<?php get_footer() ?>
I am attempting to convert a theme called Blocks (Version 3) but these theme looks too complex for me? Could someone have a quick look and tell me what I need to do?
Run this plugin: http://wordpress.org/extend/plugins/bp-template-pack/
Sorry, I should of mentioned I have already run the theme through BP Compatibility. The theme displays ok until you look at any buddypress related page where the sidebar will display under the page.
I understand I have to fix the alignment by matching the structure of page.php to the child theme pages (e.g /activity/index.php, /blogs/index.php). So how do I go about matching the structure?
Here is the page.php file
Very odd although apparently not uncommon:
I used the excellent bp-template-pack plugin and am now up to step three (the plugin “skipped” step two). This is the step where the plugin identifies what index files I need to edit to match the structure. But for some reason none of my edits are taking. I am ftping the edited php files back to my theme directory but it almost seems like buddypress is pulling from somewhere else, is that possible? I went as far as deleting my /activity/index.php file and somehow the activity page still shows up. What can I be missing here? I’ve seen a few other posts about similar “edits” not “showing up”. Any ideas on what to troubleshoot would be greatly appreciated.
I am using the (http://tinyurl.com/cpmq9u) Magazeen theme and wordpress 3.0 and buddypress 22.214.171.124 and template pack 1.0.2.
For example, I go into /activity/index.php and i delete the “”, yet somehow the sidebar still shows up on my activity page, in the same broken way as before. How is that possible?
within those quotes was the php call for the sidebar, didn’t realize php is prohibited, woops! sorry.
Ok, so I have another follow up. Apologies to anyone who thinks I’m spamming but I feel like this could be valuable to anyone trying to edit the php files after running buddypress template pack, if you disagree please advise.
So, I’ve determined that editing the /activity/index.php file does not mean that the “activity” page will be affected. My question is, what IS affected when I edit the /activity/index.php file? How can I check my work to see if the edits are working? Do I have to edit all the index.php files before anything changes?
Someone can correct me if I’m wrong, but when you’re deleting the /activity/index.php file I wonder if BP then automatically grabs the /activity/index.php file included in the default theme that comes preinstalled with BP?
members/single/home.php is the file you need to edit to see the changes take effect on the activity page. bp-template-pack is a great plugin.
I can integrate your WP theme to BP. If you need help just let me know.
When I install the buddypress template pack plugin and activate it my site gets broken doesnt work, then i deleted the files from the server for the plugin and then the site started working.
To make sure i installed it twice both times it didnot work so i had to delete the plugin, is there any way where by I could get the plugin to work.
You must be logged in to reply to this topic.