BuddyDev

Building Better breadcrumb navigation for BuddyPress based Websites

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)

Step1: 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
 * @global type $bp
 * @param mixed $collection array of nav items
 * @param type $item_name slug name to match against
 * @return mixed|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;
}

Step2: We need to find the item details for subnav too


/**
 * Find the subnav array
 * @global type $bp
 * @param type $component : component name groups etc
 * @param type $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 );

}

Step3: Extend The Breadcrumb Trail:-


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

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;

}

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();
 ?>

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

  • Thank you for this possibility 🙂

  • 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

    • 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?

      • Hi Brajesh.

        bbpress version is – 2.5.3

        • Thank you for the quick reply Dmitry.
          I will be testing and will get back to you later tonight with the update 🙂

  • 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…

    • 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.

      • 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.

      • 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’…

  • Thanks man you saved my day.

  • 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:

    Any way to fix this?

Subscribe