Extending BuddyPress Group Hierarchy – Adding Breadcrumbs to Your Theme

Once you’ve created a hierarchy of BuddyPress groups, you can help your users navigate and give your site the professional touch by including group breadcrumbs where appropriate. Here’s how!

Step One: Change the link at the top of every group page to a trail of links to parent groups

This is the easy part! BuddyPress Group Hierarchy includes a function, bp_group_hierarchy_breadcrumbs(), that will generate a string of links to a group and all its parents. Use it in the Groups loop, and no parameter is required.

Note: If you need to pass in a different group for some reason, you’ll need to use bp_group_hierarchy_get_breadcrumbs( $separator = '|', $group = false ) function and echo the result yourself. This tutorial won’t address using that more advanced function.

Just locate your theme’s groups/single/group-header.php file, and find the current group header which will look something like this:

<h2><a href="<?php bp_group_permalink(); ?>" title="<?php bp_group_name(); ?>"><?php bp_group_name(); ?></a></h2>

Replace it with this simple line:

<h2><?php bp_group_hierarchy_breadcrumbs() ?></h2>

Step Two: Change the page title on group pages to reflect your group structure

Changing the page title is more complicated. BuddyPress builds its page titles with a function hooked to the wp_title filter. This function in turn presents its own filter, and that’s the one we have to hook to put breadcrumbs in the title of our Group page. This makes sure our filtering function runs only when BuddyPress is enabled and on as few pages as necessary.

If you zoned out during that bit, don’t worry! Just place the code below into your theme’s functions.php file.

add_filter( 'bp_modify_page_title', 'my_func_group_breadcrumbs', 10, 4 );
 
function my_func_group_breadcrumbs( $processed_title, $title, $sep, $seplocation  ) {
 
	global $bp;
 
 	if( bp_is_active( 'groups' ) && ! empty( $bp->groups->current_group ) ) {
		$processed_title = substr( $processed_title, strpos( $processed_title, $sep ) );
		$processed_title = bp_group_hierarchy_get_full_name( '|', $bp->groups->current_group ) . ' ' . $processed_title;
 	}
 
	return $processed_title;
}

This function strips the group name from the page title, but re-adds the names of the group and all its ancestors. The bp_group_hierarchy_get_full_name function works like the bp_group_hierarchy_get_breadcrumbs function I mentioned earlier, but it builds a plain text list instead of a list of links.

That’s it! Check back soon for a reference child theme, implementing this technique. As always, if you have any questions or problems adding this to your site, or if you have a novel implementation you’d like to share, please post in the comments below!

Update: As promised, here is the sample child theme! BuddyPress Group Hierarchy Breadcrumbs - Sample Theme

2 Responses

  1. wilsoncortez says:

    Hi David

    There are two lines of code missing between this:

    =================================================
    ust locate your theme’s groups/single/group-header.php file, and find the current group header which will look something like this:

    Replace it with this simple line:

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

    Thx

    • ddean says:

      Hi wilsoncortez –

      It looks like there was a problem with syntax highlighting. It's been fixed and the code snippets should be visible again. Let me know if you come back and can't see it!

      - David

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>