Creating a BuddyPress Group Home Page

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 BuddyPress group tabs with Home tab

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.php groups/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

12 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>