Building Better breadcrumb navigation for BuddyPress based Websites

Brajesh Singh in BuddyPress Tricks 16 Comments

I have posted a better and updated solution for it. Please see https://buddydev.com/buddypress/buddypress-breadcrumb-trail-plugin-compatibility-updated/

Have you ever tried using a breadcrumb navigation plugin on your BuddyPress based site? Do they work as expected? Are there any awesome BuddyPress breadcrumb generator plugins available as compared to the one's available for WordPress.

The one and only plugin I could find was Breadcrumbs Everywhere( Ok, you guys already know that). So what is the problem?

As you know, I am a developer and I love to dive into the code. Here is the principle I follow while looking at the code

If it does not look good, chances are It is not good.

That is precisely the problem with Breadcrumbs Everywhere. It does not look good to me when I read the code. I don't feel comfortable with the use of spaces, tabs, indentations etc. The code does not give confidence and I am not comfortable using it on my sites.

So, the Idea was simply to extend any of the popular WordPress breadcrumbs navigation plugin and add the BuddyPress breadcrumb functionality. And that too, without modifying a single line of code in the core plugin.

I chose Breadcrumb Trail plugin as my base because of several reasons:-

Well written Code by Justin
Well organized
Simple to use
and I simply love it as I use it in all my projects

Why I chose an existing plugin? Well, I do follow another principle too.

Simplicity is a virtue. Never make code more complex than necessary.
Code Craft, Page-11

So, what we will need and what we are going to do:-

We will need the BuddyPress Installed
We will need Breadcrumb Trail installed
and we will use some custom code( keep reading ) to extend Breadcrumb Trail plugin to generate the navigation for BuddyPress pages.

So, how does it look like?

Screenshots:-

User Breadcrumb

User Internal Pages example

For custom Component( I am showing it with gallery)

Groups:-

Forum topic

That looks good, right!

Now, let us take a look at the code.

First, allow me a minute to explain the working.

We are fetching the links, titles based on BuddyPress registered navigation ( registered via bp_core_new_nav_item, and bp_core_new_subnav_item). The benefit is we get better titles and links which were provided via the plugins or BuddyPress components.

Since we can access all BuddyPress nav items via $bp->bp_nav and sub nav items via $bp->bp_options_nav, our task becomes easy(Please note, these two are multi dimensional arrays)

Step 1: We need a function to iterate over the collection of nav items and find our matching nav item

/**
 * Iterates over a multi dimensional array and finds the array item that has a slug name which matches item name
 *
 * @param mixed  $collection array of nav items.
 * @param string $item_name slug name to match against.
 *
 * @return array|boolean
 */
function hibuddy_find_nav_details( $collection, $item_name ) {

	foreach ( $collection as $nav_item ) {

		if ( $nav_item['slug'] == $item_name ) {

			// let us manipulate the link.
			if ( bp_loggedin_user_domain() ) {
				$nav_item['link'] = str_replace( bp_loggedin_user_domain(), bp_displayed_user_domain(), $nav_item['link'] );
			}

			return $nav_item;

		}
	}

	return false;
}

/**

* Iterates over a multi dimensional array and finds the array item that has a slug name which matches item name

* @param mixed $collection array of nav items.

* @param string $item_name slug name to match against.

* @return array|boolean

function hibuddy_find_nav_details( $collection, $item_name ) {

foreach ( $collection as $nav_item ) {

if ( $nav_item['slug'] == $item_name ) {

// let us manipulate the link.

if ( bp_loggedin_user_domain() ) {

$nav_item['link'] = str_replace( bp_loggedin_user_domain(), bp_displayed_user_domain(), $nav_item['link'] );

}

return $nav_item;

}

return false;

}

Step 2: We need to find the item details for subnav too

/**
 * Find the subnav array
 * @param string $component  component name groups etc.
 * @param string $action which action eg. admin/forums etc.
 *
 * @return mixed array of sub nav item details
 */
function hibuddy_find_subnav_details( $component, $action ) {
	global $bp;

	$main_nav = $bp->bp_options_nav[ $component ];

	return hibuddy_find_nav_details( $main_nav, $action );
}

/**

* Find the subnav array

* @param string $component component name groups etc.

* @param string $action which action eg. admin/forums etc.

* @return mixed array of sub nav item details

function hibuddy_find_subnav_details( $component, $action ) {

global $bp;

$main_nav = $bp->bp_options_nav[ $component ];

return hibuddy_find_nav_details( $main_nav, $action );

}

Step 3: Extend The Breadcrumb Trail:-

function hibuddy_include_bp_items( $trail, $args ) {

	global $bp;

	// current action.
	$action           = isset( $bp->canonical_stack['action'] ) ? $bp->canonical_stack['action'] : '';
	$component        = isset( $bp->canonical_stack['component'] ) ? $bp->canonical_stack['component'] : '';
	$action_variables = isset( $bp->canonical_stack['action_variables'] ) ? $bp->canonical_stack['action_variables'] : array();

	$trail_end = '';

	// is user component.
	if ( bp_is_user() ) {
		// remove trail_end.
		unset( $trail['trail_end'] );
		// add Members Page as Link.
		$trail[] = "<a href='" . get_permalink( $bp->pages->members->id ) . "'>" . get_the_title( $bp->pages->members->id ) . "</a>";

		// if component is empty, it will just list the user display name as end point
		// we may improve it to show the default component title instead in future.
		if ( empty( $component ) ) {
			$trail['trail_end'] = bp_get_displayed_user_fullname();
		} else {
			// if we are here, we are most probably on a component screen of user.
			$trail[] = bp_core_get_userlink( bp_displayed_user_id() );
			// find the details about current nav item.
			$nav_details = hibuddy_find_nav_details( $bp->bp_nav, $component );
			// let us keep the name of current nav menu as end point.
			$trail_end = $nav_details['name'];

			// are we doing some action for the component.
			if ( ! empty( $action ) ) {
				// yes, then let us link to the parent component on user.
				$trail[] = "<a href='" . $nav_details['link'] . "'>" . $nav_details['name'] . "</a>";

				$subnav_details = hibuddy_find_subnav_details( $component, $action );

				// let us keep that sub nav action name as the end point.
				$trail_end = $subnav_details['name'];

			}

			if ( ! empty( $action_variables ) ) {

				// is some action_variable set
				// if yes, let us append the parent action link to the breadcrumb.
				$trail[] = "<a href='" . $subnav_details['link'] . "'>" . $subnav_details['name'] . "</a>";

				$trail_end = array_pop( $action_variables );

				foreach ( $action_variables as $action_name ) {
					$trail[] = ucwords( str_replace( '-', ' ', $action_name ) );
				}

				$trail_end = ucwords( str_replace( '-', ' ', $trail_end ) );
			}
		}
	} elseif ( bp_is_active( 'groups' ) && bp_is_group() ) {

		unset( $trail['trail_end'] );
		// let us append the group parent page as link.
		$trail[] = "<a href='" . get_permalink( $bp->pages->groups->id ) . "'>" . get_the_title( $bp->pages->groups->id ) . "</a>";

		// get the current group details.
		$current_group = groups_get_current_group();

		//.if no action is set, we are on group home page.
		if ( empty( $action ) ) {
			$trail['trail_end'] = bp_get_group_name( $current_group );
		} else {
			// we are on any of group internal page.
			$trail[] = "<a href='" . bp_get_group_permalink( $current_group ) . "'>" . bp_get_group_name( $current_group ) . "</a>";

			$subnav_details = hibuddy_find_subnav_details( $current_group->slug, $action );

			$trail_end = $subnav_details['name'];

			if ( ! empty( $action_variables ) ) {
				$trail[] = "<a href='" . $subnav_details['link'] . "'>" . $subnav_details['name'] . "</a>";

				$trail_end = array_pop( $action_variables );
				foreach ( $action_variables as $action_name ) {
					$trail[] = ucwords( str_replace( '-', ' ', $action_name ) );
				}

				$trail_end = ucwords( str_replace( '-', ' ', $trail_end ) );

			}
		}
	}

	// that's all folks for the User/group
	// what other components do you use,
	// I was planning to write the 3rd section to handle the non core components having their own single pages(e.g. events etc)
	// but I need some suggestion about one of the plugins to see if I can have a generic way of doing it
	// append trail end.
	if ( ! empty( $trail_end ) ) {
		$trail['trail_end'] = $trail_end;
	}

	return $trail;

}

// filter and append our items to breadcrumb trails.
add_filter( 'breadcrumb_trail_items', 'hibuddy_include_bp_items', 10, 2 );

100

101

102

103

104

105

106

function hibuddy_include_bp_items( $trail, $args ) {

global $bp;

// current action.

$action = isset( $bp->canonical_stack['action'] ) ? $bp->canonical_stack['action'] : '';

$component = isset( $bp->canonical_stack['component'] ) ? $bp->canonical_stack['component'] : '';

$action_variables = isset( $bp->canonical_stack['action_variables'] ) ? $bp->canonical_stack['action_variables'] : array();

$trail_end = '';

// is user component.

if ( bp_is_user() ) {

// remove trail_end.

unset( $trail['trail_end'] );

// add Members Page as Link.

$trail[] = "<a href='" . get_permalink( $bp->pages->members->id ) . "'>" . get_the_title( $bp->pages->members->id ) . "</a>";

// if component is empty, it will just list the user display name as end point

// we may improve it to show the default component title instead in future.

if ( empty( $component ) ) {

$trail['trail_end'] = bp_get_displayed_user_fullname();

} else {

// if we are here, we are most probably on a component screen of user.

$trail[] = bp_core_get_userlink( bp_displayed_user_id() );

// find the details about current nav item.

$nav_details = hibuddy_find_nav_details( $bp->bp_nav, $component );

// let us keep the name of current nav menu as end point.

$trail_end = $nav_details['name'];

// are we doing some action for the component.

if ( ! empty( $action ) ) {

// yes, then let us link to the parent component on user.

$trail[] = "<a href='" . $nav_details['link'] . "'>" . $nav_details['name'] . "</a>";

$subnav_details = hibuddy_find_subnav_details( $component, $action );

// let us keep that sub nav action name as the end point.

$trail_end = $subnav_details['name'];

}

if ( ! empty( $action_variables ) ) {

// is some action_variable set

// if yes, let us append the parent action link to the breadcrumb.

$trail[] = "<a href='" . $subnav_details['link'] . "'>" . $subnav_details['name'] . "</a>";

$trail_end = array_pop( $action_variables );

foreach ( $action_variables as $action_name ) {

$trail[] = ucwords( str_replace( '-', ' ', $action_name ) );

}

$trail_end = ucwords( str_replace( '-', ' ', $trail_end ) );

}

} elseif ( bp_is_active( 'groups' ) && bp_is_group() ) {

unset( $trail['trail_end'] );

// let us append the group parent page as link.

$trail[] = "<a href='" . get_permalink( $bp->pages->groups->id ) . "'>" . get_the_title( $bp->pages->groups->id ) . "</a>";

// get the current group details.

$current_group = groups_get_current_group();

//.if no action is set, we are on group home page.

if ( empty( $action ) ) {

$trail['trail_end'] = bp_get_group_name( $current_group );

} else {

// we are on any of group internal page.

$trail[] = "<a href='" . bp_get_group_permalink( $current_group ) . "'>" . bp_get_group_name( $current_group ) . "</a>";

$subnav_details = hibuddy_find_subnav_details( $current_group->slug, $action );

$trail_end = $subnav_details['name'];

if ( ! empty( $action_variables ) ) {

$trail[] = "<a href='" . $subnav_details['link'] . "'>" . $subnav_details['name'] . "</a>";

$trail_end = array_pop( $action_variables );

foreach ( $action_variables as $action_name ) {

$trail[] = ucwords( str_replace( '-', ' ', $action_name ) );

}

$trail_end = ucwords( str_replace( '-', ' ', $trail_end ) );

}

// that's all folks for the User/group

// what other components do you use,

// I was planning to write the 3rd section to handle the non core components having their own single pages(e.g. events etc)

// but I need some suggestion about one of the plugins to see if I can have a generic way of doing it

// append trail end.

if ( ! empty( $trail_end ) ) {

$trail['trail_end'] = $trail_end;

}

return $trail;

}

// filter and append our items to breadcrumb trails.

add_filter( 'breadcrumb_trail_items', 'hibuddy_include_bp_items', 10, 2 );

That's it. We have properly extended the plugin to add our own navigation items.

In case you don't know how to use breadcrumb trail, you can simply call this function in your theme

<?php if( function_exists( 'breadcrumb_trail' ) )
{breadcrumb_trail();}
?>

<?php if( function_exists( 'breadcrumb_trail' ) )

{breadcrumb_trail();}

For more details, about breadcrumb trail, please read here.

If your heart is sinking because of the above code, worry not. I have posted the code on our code snippets section, so you just have to copy and paste the code to your themes functions.php or bp-custom.php. Get the complete code here

Now, It is your turn. What do you guys think? Did I miss something? How many of you are going to use breadcrumb trail now? Which WordPress breadcrumb navigation plugin do you use? If you want to extend another plugin, or have some suggestions, please do let me know in the comments below.

16 Responses to Building Better breadcrumb navigation for BuddyPress based Websites

RugWarrior #
Thank you for this possibility 🙂
- Brajesh Singh #
  Thank you for the comment RugWarrior 🙂
Dmitry #
Hi Brajesh!
Didn't work for me. Pointed to forum on any buddypress page.
bbforums, buddypress 1.9.1 + wp 3.8
Which is a big shame for me. As it would be grate to have the same navigation as on screenshots in post.
If you have any suggestions – let me know. 😉 Please
- Brajesh Singh #
  Hi Dmitry,
  Thank you for the comment.
  Can you please tell me which version of bbpress you are using? Are you using old bbpress or bbpress 2.x?
  - Dmitry #
    Hi Brajesh.
    bbpress version is – 2.5.3
    - Brajesh Singh #
      Thank you for the quick reply Dmitry.
      I will be testing and will get back to you later tonight with the update 🙂
Olivier #
I've copy and pasted the code in my functions.php file, but the result is that my website is showing nothing but a blank page…
- Brajesh Singh #
  Hi Oliver,
  Please remove the code from your functions.php and your site will be back. I am not sure why it is happening as i just tested the code and it is working fine for me. yes, there needs an improvement as the directory pages are linked twice. i will be pushing an update within 2-days for that.
  - Olivier #
    Thank you for your reply.
    I've removed the code from my functions.php and all works fine, thanks. I'll see if I've added some other custom functions that might interfere with your code and then test it again. I'll keep you posted.
  - Olivier #
    I've just reviewed my code in functions.php and pasted yours in it and now my site shows up properly, although when I am on a member page, it shows 'Home / forum'…
Prabin Parajuli #
Thanks man you saved my day.
- Brajesh Singh #
  I am glad it helped 🙂

Hugo Callens #

I created bp-custom.php according to your instructions and all went well to a ceratain level. The breadcrumbs home > groups > groupname display well. But when I go deeper into home > groups > groupname > members I get the following notices:

bp_nav called the wrong way in /public_html/domain/wp-includes/functions.php on line 4147
Notice: Undefined index: slug in /home/anmdev91/public_html/belgianfapa/wp-content/plugins/bp-custom.php on line 90

Warning: Illegal string offset 'slug' in /domain/wp-content/plugins/bp-custom.php on line 90
Notice: Undefined index: slug in /home/anmdev91/public_html/belgianfapa/wp-content/plugins/bp-custom.php on line 90

Warning: Illegal string offset 'slug' in /domain/wp-content/plugins/bp-custom.php on line 90

bp_nav called the wrong way in /public_html/domain/wp-includes/functions.php on line 4147

Notice: Undefined index: slug in /home/anmdev91/public_html/belgianfapa/wp-content/plugins/bp-custom.php on line 90

Warning: Illegal string offset 'slug' in /domain/wp-content/plugins/bp-custom.php on line 90

Any way to fix this?

Brajesh Singh #
Hi Hugo,
The BuddyPress Nav implementation has changed and the above code is not updated for that.
We do maintain an updated version for Community Builder. I will post that code in next 1-2 days and link here.
Thank you
Brajesh
- Hugo Callens #
  Any news on the updated breadcrumb code? Where can I find it it the Community Builder theme?
  - Brajesh Singh #
    Here you go
    https://buddydev.com/buddypress/buddypress-breadcrumb-trail-plugin-compatibility-updated/
    Regards
    Brajesh

BuddyDev

Screenshots:-

16 Responses to Building Better breadcrumb navigation for BuddyPress based Websites