BuddyPress.org

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

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.

@Michaelmarian, For the Members subsection, easiest way is as Boone Gorges mentioned using body classes: e.g. Member’s Profile page use selector body.profile; Member’s Blog Page use selector body.my-blogs; Member’s Message Page use selector body.messages; etc.

However, if you still want to use conditional statements see

https://codex.buddypress.org/developer-docs/conditional-template-tags/

Thing is, locate_template array did not work for me in all the different incarnations of custom child themes I made before so this method might help you too

<?php

if (bp_is_profile_component()) {

include ('mystuff1.php');

}

elseif (bp_is_activity_component()) {

include ('mystuff2.php');

}

elseif (bp_is_friends_component()) {

include ('mystuff3.php');

}

else {

include ('mystuff4.php');

}

?>

– For more specificity you could probably add – && bp_is_page(‘members’) – or whatever slug you used

– Add wp_reset_query(); right after the opening <?php if this query is placed latter part of the page or add the reset just before ?> if placed near top of the page.

Did you test BuddyPress before with just the default theme and no plugins? Did you have it working with the default (bp-default) theme before you switched to your theme?

Either way, the first thing I would do now is disable all plugins except BuddyPress.

Next, I would switch the theme to back to the default (bp-default) within Appearance > Themes in your dashboard.

Once you disable all plugins (except BuddyPress) and switch to the bp-default theme, you should confirm that the theme is working similarly to testbp.org.

Assuming that everything is working and you are not seeing any error messages, switch the theme back to your custom theme before you re-activate any of the other plugins. Check to see if you are still seeing an error message.

If you are, double-check steps 1,2,3 at https://codex.buddypress.org/how-to-guides/wordpress-to-buddypress-theme/. (1) Make sure you’ve put the theme extension pack in your custom theme. (2) Make sure you’ve added the following line to the top of the functions.php file for your custom theme:

include( TEMPLATEPATH . '/bp/bp-functions.php' );

(3) And make sure you’ve added the “Tags” line to your custom theme’s CSS header.

Do you still see the error message? If so, try replacing the code you added to the top of your theme’s functions.php with the code as Andy suggested:

include( STYLESHEETPATH . '/bp/bp-functions.php' );

Check for the error message again.

Once you have BuddyPress functioning using your custom theme without any error messages, then you can try activating plugins one-by-one to ensure you can identify any conflicts.

P.S. You mentioned in #10 above that you had modified the core files by adding the functions line of code to the functions.php file. Just to make sure, the core files are in wp-content/plugins/buddypress/. You should not be modifying any files or folders within the core files. All of the customizations you need to make to adapt your custom theme should be within /wp-content/themes/your-theme/ which I believe for you is /wp-content/themes/wp-clear-basic/. So you are adding the theme extension pack within your theme’s folder at /wp-content/themes/wp-clear-basic/. And you are modifying functions.php and style.css within your custom theme’s folder only.

Actually there is a bug in your CSS file which is the reason it’s not picking up the bp-default as the parent.

In your child theme’s style.css you have:

@import url( ../../plugins/buddypress/bp-themes/bp-default/style.css );

This should be:

/* Inherit the default theme styles */

@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );



/* Inherit the admin bar styles */

@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );

This was totally my fault, and was a mistake in the writeup of how to do it. If you do it this way, you can simply add your style overrides in style.css below those two lines.

@diesellaws: Are you running WordPress 2.9? The bp-default theme will only be picked up in 2.9+, I’ve just tested and it worked fine for me.

Mostly what I mean by not copying over the stylesheet is that you should just override the bits you need to change (colors in your case)…

So in bp-default’s css you might have:

body {

background: #fff;

color: #000;

padding: 25px;

margin: 0;

}

Instead of copying that entire declaration, all you need to do in your child theme is:

body {

background: #000;

color: #fff;

}

That way you are not duplicating anything, and only overriding and changing what you need.

Looks great! Happy to see people starting to build child themes.

A couple of things I noticed – you probably didn’t need to copy all of the default theme css into your theme. This will be loaded when you call the @import() call to the default theme CSS. At the moment you are basically loading the CSS twice. You actually only need to override the bits you need. By doing that you will gain CSS updates from the default theme when it updates. So if anything new was added to the default in the future, you would inherit the new styles.

Also, in your instructions you mentioned you needed to move the default theme to the themes folder. You definitely shouldn’t do this, WordPress will automatically detect it is in the BuddyPress folder. If you move the default then you will never get any updates when BuddyPress updates – it sort of defeats the purpose.

Could you add this to the WP theme repository? That will allow you to keep track of stats, let people download from within their BP installation, and allow you to provide automatic updates to your theme.

Nice work!

@Andy, First, I have nothing negative to say about BP. It is allowing me to do things I would NEVER even attempt on my own. Looking back on the programming I’ve done in the past, there was NO separation (mostly pre-CSS, php/mysql where my separation was myriad includes). However, as I look at Justin’s code, I’m learning the elegance (and additional complication) of separating form from function.

Doing everything through functions.php, styles.css and hooks is a challenge for me, but I do see the benefits. If there are sufficient hooks, most things can be accomplished this way. If there is a hook, I can use the new template tag just by modifying functions.php instead of changing the myriad template files that might contain the new tag.

What sucks (for me) in that model is I have to switch back and forth from template to function and then ensure I test everything well. What works is I get to change it once.

Regardless, for template tags and other changes, what’s most important is documentation (which can be a challenge with development cycles). If the changelog tells me what to look for and what functionality has changed (see Peter’s post above), the process is MUCH less painful. I know you know this, but most of us would rather have the features now and struggle without the docs – Catch 22.

Whatever the result, I’m ecstatic that Buddypress exists, that Automattic adopted it and you finally have some additional help.

@mercime, I appreciate the practical examples. I’m probably going to go with Hybrid as my parent, maybe with the BP-specific template files added for members, groups, etc. I’ll have to see how much functionality is trapped in template files as opposed to styles.css and functions.php. If most of the good stuff is in those two files, it shouldn’t be too bad.

You can still use the old “bp-themes” format (for now anyway) as long as you haven’t deleted the “bp-themes” directory.

I’ve quoted the following from:

https://codex.buddypress.org/how-to-guides/upgrading-a-buddypress-1-0-theme-for-buddypress-1-1/

Firstly you can revert to the old BuddyPress 1.0 theme system. Simply recover your /wp-content/bp-themes/ folder. This will revert BuddyPress into compatibility mode. You will not see all of the new features added in 1.1, but you will gain from performance and code improvements.

But be advised that, from what I’ve heard, the old 2-way theme format is going be phased out eventually in a future BP release.

Did you do this step?

“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 ) “

From the guide:

https://codex.buddypress.org/how-to-guides/upgrading-a-buddypress-1-0-theme-for-buddypress-1-1/

That will get you a bit further to styling perfection. The rest is up to you. I’m sitting and styling my website right now. Lots of fun and frustration.

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.

Trying to accomplish the same objective, I found this article: https://mu.wordpress.org/forums/topic/1463

After following the setup directions, when I created a new user, created a blog, created a post, and then went to view the post, it appeared in the expected theme. As the user, I *did not* need to go to set the theme myself.

Towards the end of the thread, there is the following

~~~~~~~~~~~~~~~~~

As of 2.7 this information:

….

===========================================

Lines 311 and 312 of wp-admin/includes/schema.php in the populate_options function.

add_option(‘template’, ‘yourthemename’);

add_option(‘stylesheet’, ‘yourthemename’);

===========================================

yeah, it was in v1.1 for sure. i used it for my first component. i found a reference in /wp-content/plugins/buddypress/bp-example/bp-example-cssjs.php in v1.1. I tried adding this back myself and it didn’t work.

/**

* bp_example_add_activity_bullets_css()

*

* This function will allow your component to dynamically add CSS to themes so that you can

* set the activity feed icon to use for your component.

*/

function bp_example_add_activity_bullets_css() {

?>

li a#my-example, li a#user-example {

background: url(<?php echo site_url( MUPLUGINDIR . \'/bp-example/images/heart_bullet.png\' ) ?>) 88% 50% no-repeat;

}



li.example {

background: url(<?php echo site_url( MUPLUGINDIR . \'/bp-example/images/heart_bullet.png\' ) ?>) 0 8% no-repeat;

}



table#bp-example-notification-settings th.icon {

background: url(<?php echo site_url( MUPLUGINDIR . \'/bp-example/images/heart_bullet.png\' ) ?>) 50% 50% no-repeat;

}

<?php

}

add_action( \'bp_custom_member_styles\', \'bp_example_add_activity_bullets_css\' );

add_action( \'bp_custom_home_styles\', \'bp_example_add_activity_bullets_css\' );



?>

I’m having the same problem. I just installed BuddyPress 1.0rc2 today, and it’s the first WPMU install for me, and obviously the first BP install as well. I’ve been running WP for over 2 years though, on the same server (different domain), with complete success.

The install seemed to go fine, and I followed the instructions to also use the BP-home theme for the WPMU home page as well (it fails with any of the 4 choices of home page themes).

The site comes up correctly in IE7. In Firefox (3.0.10) and Chrome (2.0.174.0), no CSS gets loaded.

I’m running this on CentOS 5.2, using NginX 0.7.53. WP runs perfectly.

It’s not an “access” problem. Firebug shows that the CSS file is read correctly (and I can see all of the lines in there, so NginX is serving up the CSS). But, for whatever reason, FF and Chrome both decide that it’s not CSS, and just ignore the styles completely (Firebug says that there are no style elements on the page).

Looking at the NginX debug logs, IE takes the css file with an “Accept: */*” and FF takes it with an “Accept: text/css”. Otherwise, I don’t see any obvious differences.

If I code up my own html file, and use the exact same syntax for the css <link> line that BP generates, FF will _correctly_ parse the css file.

The only thing that seems strange in the BP generated code is that the HTML fails the W3C validator for including an “id=_wpnonce” in the hidden search form field _two times_. But, if I remove one of those lines, FF still fails to parse the css.

Here are the links (the site has zero in it at the moment):

http://songsandjingles.com/wordpress-mu/

Here is a link to my “test” html file, which loads the same css file (where I added yellow as the background color in custom.css):

http://songsandjingles.com/wordpress-mu/testme.html

Just to show that the css file is accessible:

http://songsandjingles.com/wordpress-mu/wp-content/themes/buddypress-home/style.css

Any help would be greatly appreciated, thanks in advance!

P.S. The most obvious difference between my tiny HTML file and the generated one is that I have no DOCTYPE or “profile=” in mine…

Have you made ANY changes to your themes? i.e. Changed div’s by adding or removing any of them? Changed anything in the stylesheets? One wrong letter or character can break everything. (believe me I know lol)

I may be mistaken but I’m pretty sure the home theme runs for everything except what you see when at http://yoursite.com/members/”whatever&#8221;

If you could either set up a test user for us or even just set the admin bar to show for logged out users, that’d be helpful.

try adding a direct link to style sheet in header

<link rel=\”stylesheet\” href=\”http://illdesigned.com/user/wp-content/themes/buddypress-home/css/base.css\” type=\”text/css\” media=\”screen\” />

See the other thread on this, but your host is injecting ad code into the loader.php that pulls the stylesheet.

view source on:

http://illdesigned.com/user/barrymadden/wp-content/themes/buddypress-home/css/loader.php

as near as I can tell,

/wp-content/themes/buddypress-home/css/loader.php

is not pulling the stylesheet properly. I would guess that the problem is coming from your host, as they are trying to inject an iframe into that page upon execution.