Creating a BuddyPress Group Home Page
by David • October 5, 2011 • Notes • 12 Comments
Do you want to create a “home page” for each of your groups, like the one on plugin groups on buddypress.org?
Updated (1/07/12): Updated instructions and the sample child theme to fix the activity type issue reported by Towfiq.
You can download the updated theme here: BuddyPress Group Home Page - Example Theme
Updated (11/29/11): Added a sample child theme implementing these changes.
An example of a BuddyPress group with a Home tab
Here are a few simple steps to make it happen. Ordinarily, this would just go in a plugin or something. But this particular change requires edits to the group-header.phpgroups/single/home.php file, so it’s more a theme modification than a plugin.
A note before we get started: I will assume that you’re working with a child theme. Child themes are great — they let you change just the templates or styles you want without wading through a bunch of other files, and they keep your work from being wiped out when a new version of BuddyPress is released. See this BuddyPress Codex page if you want to know more.
Step One: Create an Activity tab for the activity stream, since we’re displacing it.
To do this, we’re going to use parts of the Group Extension API to create a new nav item for the group.
In your theme’s functions.php, add the following:
function add_activity_tab() { global $bp; if(bp_is_group()) { bp_core_new_subnav_item( array( 'name' => 'Activity', 'slug' => 'activity', 'parent_slug' => $bp->groups->current_group->slug, 'parent_url' => bp_get_group_permalink( $bp->groups->current_group ), 'position' => 11, 'item_css_id' => 'nav-activity', 'screen_function' => create_function('',"bp_core_load_template( apply_filters( 'groups_template_group_home', 'groups/single/home' ) );"), 'user_has_access' => 1 ) ); if ( bp_is_current_action( 'activity' ) ) { add_action( 'bp_template_content_header', create_function( '', 'echo "' . esc_attr( 'Activity' ) . '";' ) ); add_action( 'bp_template_title', create_function( '', 'echo "' . esc_attr( 'Activity' ) . '";' ) ); } } } add_action( 'bp_actions', 'add_activity_tab', 8 ); |
That adds a tab called ‘Activity’ to every group’s navigation bar, pointing to a page called ‘activity’ within the group. This new activity page is calling the same groups/single/home.php template file as the current home page. That template actually handles routing for ALL group pages, as we’ll see in a minute.
Step Two: Create a template file for your group Home page
If you’re going to have a Group home page, you need to control how it’s displayed. To do that, you’ll need a template file in your theme’s groups/single directory. It can be called whatever you’d like, but for this guide, we’re sticking with front.php.
Create this file and put whatever you want in it. This template will be in the “group loop”, so you can use functions like bp_group_description() to display group info.
Here’s an example:
<div class="home-page single-group" role="main"> <?php if(bp_is_item_admin()) { ?> <div class="notice info"> <p>Welcome to your group home page!<br /> Click <a href="<?php bp_group_admin_permalink() ?>">Admin</a> above to set the content for this page.</p> </div> <?php } ?> <?php bp_group_description(); ?> </div> |
Up to now, all we’ve done is create a new Activity tab on the group page that doesn’t even show the activity stream. But this last piece will make everything work:
Step Three: Edit your theme’s groups/single/home.php template file
Look for this section in your home.php file:
47 48 49 50 51 | elseif ( bp_group_is_visible() && bp_is_active( 'activity' ) ) : locate_template( array( 'groups/single/activity.php' ), true ); elseif ( bp_group_is_visible() ) : locate_template( array( 'groups/single/members.php' ), true ); |
This directs a visitor to either the activity stream or the member list, depending on whether activity has been enabled. It’s a catch-all routing section, and it’s where we’ll be adding our group home page.
Change the lines above to:
47 48 49 50 51 | elseif ( bp_group_is_visible() && bp_is_group_activity() ) : locate_template( array( 'groups/single/activity.php' ), true ); elseif ( bp_group_is_visible() ) : locate_template( array( 'groups/single/front.php' ), true ); |
This enables the Activity tab AND sends requests for the group home page to your new template! Of course, if you used a name other than front.php, you’ll need to change that line to match the name you chose.
Update! Step Four – Let BuddyPress JS know how to classify your new activity posts
Now you can make activity updates, but BuddyPress won’t remember that they came from your group. In order to fix that, we need to relax a check in another file, activity/post-form.php.
Look for this section:
59 60 61 62 63 64 | <?php elseif ( bp_is_group_home() ) : ?> <input type="hidden" id="whats-new-post-object" name="whats-new-post-object" value="groups" /> <input type="hidden" id="whats-new-post-in" name="whats-new-post-in" value="<?php bp_group_id(); ?>" /> <?php endif; ?> |
Without those hidden fields, BuddyPress thinks we’re just posting a personal status update. So let’s expand that to cover our new Activity page:
59 60 61 62 63 64 | <?php elseif ( bp_is_group() ) : ?> <input type="hidden" id="whats-new-post-object" name="whats-new-post-object" value="groups" /> <input type="hidden" id="whats-new-post-in" name="whats-new-post-in" value="<?php bp_group_id(); ?>" /> <?php endif; ?> |
Now BuddyPress will tie the update to a group no matter where in the group we post it.
That’s it! Check out your new group home page and enjoy the results your BuddyPress hacking chops. And if you do something really cool with a group Home page, send a link my way!
Updated: Here’s a sample child theme to get you started. It includes all the changes mentioned in this article.
BuddyPress Group Home Page - Example Theme
Thanks, this is just what I needed and it worked like a charm.
Hi David,
Thanks for the steps. I tried replicating them. However no “Front” tab is showing. Its only showing me an added “Activity” tab with activity updates. Any suggestions to solve this?
Cheers,
Volpv
Hi Volpv,
Did you try the sample theme posted on this page? It should provide a nice reference for what to expect if you're having trouble integrating it with your theme.
Note that this won't change text on the "Home" tab to "Front," it instead opens up the "Home" tab to be whatever you want it to be. Not having looked into it, you'd probably have to change a BuddyPress core file or two to get the tab name changed.
Hope that helps!
– David
I added the code to bp defalut theme, it added a new acitvity tab and everything is fine. But there is a major problem with this code, When you post an update on group activity page it doesn't save. it is added promptly via ajax but when I refresh the page it disappears. The wall post is displayed in the wall of my own wall though.
Nice catch! The post and sample theme have been updated with a fix for this.
Nice! Working now.
Hey David,
I just came across this post of yours & tried it on a new site… worked like a charm, thanks!
Now I was wondering whether you or anyone might have figured out a way to populate the page via an editor of sorts, perhaps? Maybe a front-end posting method that creates a post with the same slug as the group, then displaying that post on the group home page? Am I giving anyone any ideas yet?
I wanted to populate the page with HTML, but it seems quite a bit of it gets stripped out – images for example. So I was hoping there might be a few really industrious programmers out there who could take this great method and make it really amazing.
Cheers,
Phil
Hey Phil,
Glad you found this post helpful!
The great thing about having to make a new template file is that you can do whatever you want with it! The slug-matching trick you've described is pretty much the group home page technique developed by modemlooper, but you'll need to create a custom post type to make it work seamlessly.
If you want a quick front-end editor, you can add fields to the group Admin page with the action 'groups_custom_group_fields_editable'. There's another action, 'groups_group_details_edited', that lets you process and store the changes wherever you want. I've used this technique before, storing the contents in a groupmeta entry.
Best of luck!
Great post.
Thanks David
I hope you see this and reply soonest. I'm trying to add the first code to the functions.php to create the activity bar but i get this error when i try to access my website
Parse error: syntax error, unexpected '}' in /home/smallbus/public_html/wp-includes/functions.php on line 4709
What am i doing wrong and where exactly in functions.php should i put it?
Hi Jerry,
This code should go in the functions.php file in your theme directory. It looks like you may have put it in a functions.php in WP-includes.
And this code should be fine anywhere in your theme\’s functions.php, so long as it\’s not inside another function or anything like that.
If you can\’t get it to work, give the sample theme a try and work backwards. Let me know how it goes!
Hi,
I am trying to adapt this function so that I can include a tab/page for each of my Buddypress group for chat. I would like to use the plugin Quick Chat. At the moment I have successfully created a tab called 'Chat' but it points to the activity stream, and I am not sure how to change this so that it can point to a page for the Quick Chat plugin. Could you help?
Thanks,
Nick