BuddyPress Custom BP Add Friend Button

bp-add-friend-button-customizationWhen attempting to customize some BuddyPress components, I noticed that there wasn't a clear documentation on customizing the members Add Friend button, which some of you may want to incorporate in your BP themes.

Custom BP Friend Button Placement

To start, to add the button to your theme, you can simply add the first function below at the desired location:

bp_add_friend_button(); // echos bp_get_add_friend_button();

Note, that the above function assumes that you are already on BP member component, such as the header or a user profile or within a BP user loop.

Change bp_add_friend_button's Anchor Text, Class and more

The bp_get_add_friend_button contains a filter called bp_get_add_friend_button, that filters an array with the buttons arguments, depending on the users relationship with one another. These possible relationships determine the buttons ID, which can be one of the 4 variations: pending, awaiting_response, is_friend or not_friends.

In all 4 above scenarios, the $button Array will contain the same keys, which output the button and are also all you will need to modify to completely customize your Add Friend button. Let's look at the Array of the not_friends variation, which outputs the buttons design and text to users who are not friends with the current logged in user:

$button = array(
'id'                => 'not_friends',
'component'         => 'friends',
'must_be_logged_in' => true,
'block_self'        => true,
'wrapper_class'     => 'friendship-button not_friends',
'wrapper_id'        => 'friendship-button-' . $potential_friend_id,
'link_href'         => wp_nonce_url( bp_loggedin_user_domain() . bp_get_friends_slug() . '/add-friend/' . $potential_friend_id . '/', 'friends_add_friend' ),
'link_text'         => __( 'Add Friend', 'buddypress' ),
'link_title'        => __( 'Add Friend', 'buddypress' ),
'link_id'           => 'friend-' . $potential_friend_id,
'link_rel'          => 'add',
'link_class'        => 'friendship-button not_friends add'
);

Example 1: Custom Text for "Add Friend Button"

If you only want to change the links text, when users are not yet connected (which is "Add Friend", by default), then you would add the following code to your function.php file:

function mb_bp_friend_button($button) {
	if (is_array($button) && isset($button['id'])) {
		if ($button['id'] == 'not_friends'){
			$button['link_text'] = 'Your Custom Text Here';
		}		
	}
	return $button;
}
add_filter( 'bp_get_add_friend_button','mb_bp_friend_button');

This would work the same if you would want to change the buttons class or other attribute, which we will apply in the next example as well.

Example 2: Custom BP Add / Remove Friend and Pending Requests

The below function will help customize every variation of the be bp_add_friend_button design. You can simply remove the variation that you don't intend to change from the function below:

function mb_bp_friend_button($button) {
	if (is_array($button) && isset($button['id'])) {
		if ($button['id'] == 'pending'){
			$button['link_text'] = 'Your Custom Pending Text Here';
			$button['link_class'] .= ' your-pending-class';
		} elseif ($button['id'] == 'awaiting_response'){
			$button['link_text'] = 'Your Custom Awaiting Text Here';
			$button['link_class'] .= ' your-awaiting-class';
		} elseif ($button['id'] == 'is_friend'){
			$button['link_text'] = 'Your Custom Cancel Text'; // accepts html
			$button['link_class'] .= ' your-cancel-friendship-class';
		} elseif ($button['id'] == 'not_friends'){
			$button['link_text'] = 'Your Custom Add Friend Text';
			$button['link_class'] .= ' your-add-friend-class';
		}
		
	}
	return $button;
}
add_filter( 'bp_get_add_friend_button','mb_bp_friend_button');

In case you want to completely remove the class, you can simply remove the dot(.) symbol before the equals(=) symbol, which currently just adds an additional css class to what would already be returned. I haven't tested the above customization limits yet, so do be cautious when experimenting as certain customization's may render the buttons default AJAX behavior. Please feel free to comment questions, additions or improvements to the above.

I'm a developer at Maximus Business.
  • Ivan Dyakov
    Hi, I am looking for a solution of replacing standard text buttons for adding/deleting a user to friends at the Members Page but I am not a developer. Could you please explain in a bit more details and step by step which files shall I edit and how (I am using child theme with BuddyPress Legacy files copied into it)? Thank you in advance!

    Said on Jan 3, 2014 by Ivan Dyakov - Reply
    • Maximilian
      Sure, if you just want to change the design of the button, you can simply copy the above code straight into your functions.php file. You can add a custom class, for example, and then style that in your CSS file. Let me know if that works?

      Said on Jan 10, 2014 by Maximilian - Reply
  • Brittany
    If I paste this directly into my functions.php file it give me a syntax error on lines 3 and 8. What do I need to adjust? function mb_bp_friend_button($button) { if (is_array($button) && isset($button['id'])) { if ($button['id'] == 'not_friends'){ $button['link_text'] = 'Invite to bid'; } } return $button; } add_filter( 'bp_get_add_friend_button','mb_bp_friend_button');

    Said on Jun 14, 2014 by Brittany - Reply
  • Nauman
    Thanks bro..

    Said on Sep 29, 2014 by Nauman - Reply

Leave a Reply

Please feel free to give us your feedback and comment below. Please keep in mind that comments are moderated. 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=""> <s> <strike> <strong>