Problems making a theme Buddypress Compatible

A client of mine bought a wordpress theme from another vender and I'm having trouble getting the buddypress pages to show up. Initially none would show at all, just blank pages.

I moved some folders and files over from the bp-themes/bp-default buddypress folder, and now have some content showing up, but not formatted correctly -- specifically the buddypress navigation menu is showing up as an ordered list, rather than as a menu bar.

I've searched the buddypress site but am not finding any helpful information, it seems themes are suppose to be just automatically compatible now, though that isn't my experience with this particular one. Can you provide me any help with this?

  • Michael Bissett

    Hey @xbladerunner, how's it going? Haven't bumped into you for a while myself, hope all is well. :slight_smile:

    What's the theme in question here? Also:

    I moved some folders and files over from the bp-themes/bp-default buddypress folder, and now have some content showing up, but not formatted correctly -- specifically the buddypress navigation menu is showing up as an ordered list, rather than as a menu bar.

    How well this works does depend on the theme, particularly if it employs a... different way of generating page templates (one theme that comes to mind is the X theme).

    Please advise,
    Michael

  • Michael Bissett

    Hey @xbladerunner,

    Yep, you called it right, I got sent off to the landing page as soon as I tried logging in here. :slight_smile:

    What kind of access are you blocking here? Would it be possible to send in the WordPress admin details instead?

    If so, then could you please send them in as follows:

    - Mark to my attention, the subject line should contain only: ATTN: Michael Bissett
    - Do not include anything else in the subject line, doing so may delay our response due to how email filtering works.
    - Please link back to this thread
    - Include WordPress admin access details (login address, username & password)
    - Include any relevant URLs for your site

    On the contact form (linked to below), please select "I have a different question", this ensures it comes through and gets assigned to me.

    https://premium.wpmudev.org/contact/

    Thanks! :slight_smile:

    Kind Regards,
    Michael

  • Michael Bissett

    Hey @xbladerunner, hope you had a great weekend! :slight_smile:

    The issue we're running into here is due to the lack of this div element in the template code:

    <div id="buddypress">

    As that's what the legacy BuddyPress CSS code ties into. To use Activity template as an example, you should be able to get that working by using this:

    http://pastebin.com/FUP9CiFy

    Now, an alternative method, but one that requires more CSS, would be to use your own custom stylesheet. I've attached an example .css file below, which you may need to adjust in a few parts.

    Hope this helps! :slight_smile:

    Kind Regards,
    Michael

  • xbladerunner

    Thanks Michael,

    I still can't get it to work. I've uploaded the template file to the theme and have selected it as the designated template to use from the activity page editor; I've uploaded the bp-custom.css file to the theme as well, and still no joy.

    What directory structure should buddypress have within the green theme? As I noted earlier, I transferred the folders from the buddypress/templates/bp-legacy/ directory over to the green theme, producing green/activity/, green/groups, etc... which produces the anticipated content per buddypress page, but not with the proper formatting. Maybe I have the custom css file you created in the wrong place?

  • Michael Bissett

    Hey @xbladerunner,

    I've uploaded the bp-custom.css file to the theme as well, and still no joy.

    Looking back, I should've elaborated further on that, sorry for the oversight here!

    That was a an example of CSS code you could insert into your site (whether by using a plugin like Simple Custom CSS, or the style.css for a child theme), I just uploaded it to the thread here so that it'd be all in one package.

    However, another option presents itself here. :slight_smile:

    To quote the Theme Compatibility & Template Files entry:

    You may override the css by adding a folder /css/* to your theme root if you then, either, copy buddypress.css from /bp-legacy/ or create a new file named buddypress.css this file will be used instead of the buddypress version.

    * As of BP 1.8 the paths for assets i.e styles and JS has been modified to look to your ‘buddypress’ or ‘community’ folders first, this means you will be able to locate your /css/ folder inside your buddypress one.

    You could try taking the bp-custom.css file that I gave earlier, and rename that to buddypress.css, and place it where they said to in your child theme.

    Could you give that a go?

    As I noted earlier, I transferred the folders from the buddypress/templates/bp-legacy/ directory over to the green theme, producing green/activity/, green/groups, etc... which produces the anticipated content per buddypress page, but not with the proper formatting.

    Do your pages have that <div id="buddypress"> tag that I mentioned earlier when you insert the legacy templates into your theme? If not, then the lack of that tag is what's causing a hiccup here (which, if that CSS file I gave you loads properly this time, should resolve that issue).

    Kind Regards,
    Michael

  • xbladerunner

    Thanks Michael,

    Sorry for the delay. I was still struggling even after following your suggestions above. I ended-up starting over from scratch, following the directions here: https://premium.wpmudev.org/blog/how-to-make-your-wordpress-theme-compatible-with-buddypress/
    I was still having css issues until I renamed the buddypresss.css you provided to bp.css and placed it in my theme's bp folder (one of the folders in the buddypress theme extension pack provided in step one of the above link -- a number of the secondary links are broken as it is an old post, but the link listed in the description of Step 1 is still presently alive).
    Anyway, I know where to put the css file now, and what to name it, but there is still tweaking to do. I like the formatting of buddypress pages in the Blogs-Mu theme, and am wondering if you know how I'd change the css file you provided to mimic it? Also, something more than css code is missing somewhere because my buddypress-activity-plus plugin is not showing up on the front end when activated -- but does show up using other buddypress compatible themes. Any ideas?

  • Michael Bissett

    Hey @xbladerunner,

    I like the formatting of buddypress pages in the Blogs-Mu theme, and am wondering if you know how I'd change the css file you provided to mimic it?

    Actually, if you're wanting to use the styling from the Blogs MU theme, the CSS files you'd want to look at would be:

    /blogs-mu/_inc/css/bp-css.css
    /blogs-mu/_inc/css/bp-default.css

    If you were to combine those two stylesheets, removing this from them:

    p:last-child {
    	margin-bottom: 0;
    }
    
    p:last-child {	margin-bottom: 0;}

    You'd have a page that looks like the below screenshot. :slight_smile:

    Also, something more than css code is missing somewhere because my buddypress-activity-plus plugin is not showing up on the front end when activated -- but does show up using other buddypress compatible themes.

    Hmm... looking into this further, I'm seeing this JS error come up in the browser console:

    global.js?ver=4.2.2:1326 Uncaught TypeError: undefined is not a function

    Which would seem to tie into this discussion over here:

    https://buddypress.trac.wordpress.org/ticket/6201#comment:3

    While the source of the JS error comes from the global.js inside BuddyPress's bp-default folder (and not a folder inside your theme), I'd want to try inserting the lines suggested in the highlighted code on Github into your functions.php, and seeing if that helps with that JS error:

    https://github.com/buddypress/BP-Default/commit/619efe8527847266c961fa43775eade42c7ff70d

    Kind Regards,
    Michael

  • xbladerunner

    Thanks Michael,

    The merged css code works perfect(!), but the github code doesn't. I did find that when I delete the "include bp-function.php" line from the theme function file (which we are directed to include in the wpmu-dev article above) the plugins work as they are suppose to -- BUT then of course the merged buddypress css is never referenced.... which I presume means there is something in the bp-function.php file that is not recognizing or blocking recognition of the other plugins?

  • xbladerunner

    I further experimented with just copying/pasting the entire merged content of the new bp.css file (in the bp folder) into the theme's root style.css, and it works :slight_smile: The resulting css file is now HUGE -- combining all the buddypress css of the Blogs Mu theme, plus the Green Earth theme)... are there any performance issues you foresee from this solution, or any better ways of doing it?

    I'm also noticing that I'm still missing some buddypress functionality. Most significantly, on the backend administration side, I'm missing my buddypress menu options in the appearance settings. On the front end, I'm missing notification content and forum content, when I click on those tabs from the user profile page. And when I click on the settings tab from the profile page I lose the whole page -- meaning no buddypress content at all. I suspect the missing buddypress functionality is due to missing functions in the bp functions file (in the theme)?

  • Michael Bissett

    Hey @xbladerunner,

    I further experimented with just copying/pasting the entire merged content of the new bp.css file (in the bp folder) into the theme's root style.css, and it works :slight_smile: The resulting css file is now HUGE -- combining all the buddypress css of the Blogs Mu theme, plus the Green Earth theme)... are there any performance issues you foresee from this solution, or any better ways of doing it?

    The first problem I'm seeing is that all of this is being done inside the parent theme, that theme of yours gets updated... all the changes made will go bye-bye.

    I'd either want to set up a child theme, as mentioned here:

    https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/

    Or, I've also used the Simple Custom CSS plugin to make CSS changes (though you may wish to go with a child theme in the end):

    https://wordpress.org/plugins/simple-custom-css/

    I'd want to migrate the BP CSS code you've got right now to one of the solutions I mentioned. :slight_smile:

    I'm also noticing that I'm still missing some buddypress functionality. Most significantly, on the backend administration side, I'm missing my buddypress menu options in the appearance settings. On the front end, I'm missing notification content and forum content, when I click on those tabs from the user profile page. And when I click on the settings tab from the profile page I lose the whole page -- meaning no buddypress content at all. I suspect the missing buddypress functionality is due to missing functions in the bp functions file (in the theme)?

    ...hmm. In thinking about the child theme, I've actually got an idea for all of this. :slight_smile:

    What if instead of following along with that BuddyPress compatibility article you mentioned (which is admittedly over 5 years old at this point), why not just insert the CSS code mentioned above into the style.css of a child theme?

    It seems like you ran into more issues with trying to set up the site with that old article, and going the child theme route would not only do the trick, but it'd also keep your changes safe from theme updates. :slight_smile:

    Please advise,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.