Styling BuddyPress Groups Overview Page

Beaver Builder
1

I would like to stylize this page:
https://www.isci.one/groups/

similar to:
https://www.isci.one/all-forums/

I have already performed some simple modifications to the custom.css (header color, text color and some padding) but I would like a slideshow or image in the upper left and a heading to the right with ‘‘Create a group’’ just underneath.

I am guessing that it should be possible to modify a specific Buddypress .php file to do this but I am not sure which one to tweak and what code to include to include a picture or BeaverBuilder slideshow.

Any advice would be much appreciated. Thanks! :slight_smile:

2

I expect to make some changes to child theme:

----- BEGIN BUDDYPRESS PHP (index.php) ------

<header class="group-header page-header">
    <div id="item-statistics" class="follows">
        <h1 class="main-title"><?php buddyboss_page_title(); ?></h1>

        <span class="create-a-group"><?php echo bp_get_group_create_button() ?></span>

        <div class="numbers">
            <span>
                <p><?php echo groups_get_total_group_count(); ?></p>
                <p><?php _e('Groups', 'boss'); ?></p>
            </span>
        </div>
    </div><!-- #item-statistics -->
</header><!-- .group-header -->

----- END BUDDYPRESS PHP (index.php) -----

What code would I need to insert two columns (equally wide), left column with picture or BeaverBuilder slideshow, right column with main title (<h1 class=“main-title”><?php buddyboss_page_title(); ?></h1>). Below it should be (<span class=“create-a-group”><?php echo bp_get_group_create_button() ?></span>)

Best regards,
Michael

3

Hey Michael,

Sorry but there’s currently no way to call a BB module into a PHP template. :frowning: You could try a different plugin for the slideshow though which offers a shortcode and you can place it there.

Ben

4

Hey Ben,

Thanks for replying.

I guess I am reaching the limits of BeaverBuilder. I hope it will be possible to include BB shortcode in a PHP template in the future because you have a really great plugin going here :slight_smile:

Michael

5

Hey Michael,

I’ve a workaround I can offer you but it’s a bit tricky. You can use the Insert Pages plugin. Basically, what it does is it allows you to call the content of a page using a shortcode. You can then place your slider/content on a specific page and call it via the shortcode in your PHP file. The other thing you’ll need is to load that page’s assets globally using our fl_builder_global_posts filter. Check the link below for more info on the latter.
http://forum.wpbeaverbuilder.com/knowledge-base/filter-reference/

Let me know if you’ve questions about that. :slight_smile:

Ben

6

It sounds like a potentially neat workaround.

Only concern is whether it will affect any of the other BB sliders that I have on the site when using a global function?

Michael

7

Hey Michael,

Actually, BB only loads the assets(CSS/JS files) required for that page alone(within the loop). So if you use the Insert Pages plugin to load in content from another page, the layout will be broken since its assets aren’t present. Using that filter allows us to let WP load the assets for that specific page globally, making it work whatever page you pull its contents into. To answer your question, it won’t affect any of the other sliders you have on the site. :slight_smile:

Ben

8

Hey Ben,

I am trying out your solution but having some difficulties. Here is what I have done so far to get it working:

I have installed the ‘Insert Pages’ plugin and inserted

function my_global_builder_posts( $post_ids ) {
    $post_ids[] = '123';
    return $post_ids;
}
add_filter( 'fl_builder_global_posts', 'my_global_builder_posts' );

Into functions.php

I have also removed the original header content from the relevant PHP file (index.php - BuddyPress Group Index)

Next I inserted the short code into the backend editor as:

[insert page="Groups-content" display="content"]

This is where the short code should be replaced with Groups-content

But as you will notice from the link below the content is not inserted into the page. Do you have any advice on how to proceed?

BUDDYPRESS GROUP INDEX: https://www.isci.one/groups/
NEW HEADER: https://www.isci.one/groups-content/

9

It’s my first attempt on using filters. I have tried to follow the guide here:
http://themeshaper.com/2009/05/03/filters-wordpress-child-themes/

but any advice on how to proceed is much appreciated :slight_smile:

Best regards,
Michael

10

Hey Michael,

You think you can share temp admin access to the site so we can take a look?

Ben

11

[Content Hidden]

12

Hey Michael,

Sorry but it seems the shortcode isn’t working when on the Groups page. I think it’s because you’ve set it as one of your BuddyPress pages? I’m not sure. I did try creating a few test pages and the insert page shortcode work just fine there. Maybe trying placing the shortcode inside the template file of BuddyPress and see if that works? You can probably do it via <?php echo do_shortcode(’[YOUR_SHORT_CODE_HERE]’);?>

Ben

13

Hey Ben,

You are right it seems to be a limitation of the ‘Insert Pages’ plugin. The reason that I say this is because I just tried the following procedure:

<?php echo do_shortcode( '[insert page="Groups-content" display="content"]' ) ;?>

which didn’t work. I then tried the following code to make sure that I had not made a mistake:

<?php echo do_shortcode( '[bbp-forum-index]' ); ?>

and this worked fine when placed in the BuddyPress index.php file.

I am now reading this article to see if it can be done without the Insert Pages plugin:
http://premium.wpmudev.org/blog/insert-wordpress-page-content-anywhere-you-like-in-your-site/

Thanks again for trying to help.

Michael

14

No worries! Let us know if you find anything! :slight_smile:

Ben

15

I have tried another solution. In this case I insert the following code into BuddyPress index.php:
<?php $id = 181; $p = get_page($id); echo apply_filters('the_content', $p->post_content); ?>

This basically inserts the content of page ID=181 into the PHP page.

This solution works but has the unfortunate side effect of removing all the styling which was so nicely done in BeaverBuilder. Furthermore it removes the slideshow.

I wonder how BB saves the styling? If a specific BB page (including page styling) could somehow be called using a shortcode then Ben’s PHP snippet could be inserted directly into a PHP page:

<?php echo do_shortcode( '[INSERT BEAVER BUILDER SHORTCODE HERE]' ); ?>

Perhaps a feature request? :slight_smile:

16

In the meantime I will try to get in touch with Paul Ryan (author of Insert Pages plugin) to see if has any idea of why his plugin is not working in this case.

17

Hey Michael,

That’s what the filter above was for, to make it load all the assets required for post ID 181. But for some reason, it’s not working. I’ll assign another member of the team to check further.

Ben

18

Hey Ben,

I do understand that but the advantage of having it built into BeaverBuilder would be that you did not have to rely on a third party plugin. Anyway I have also contacted Paul Ryan to see if has any insight into why it’s not working in this specific case.

Michael

19

Oh, you mean pulling the content from another page? I think someone already suggested that. Feel free to skim through the feature requests and vote for it if there’s one. You can add the request if there isn’t. :slight_smile:

Ben

20

Hey Ben,

I have found a solution using:
https://wordpress.org/plugins/include-me/

where I include the index.php file inside BeaverBuilder text content. This method works and I can see the php code being parsed inside BeaverBuilder - Nice! :slight_smile:

This plugin may be of use to others as well since it allows insertion of PHP directly inside a text editor. Only downside with this plugin is that its been a while since last update.

Best regards,
Michael