BuddyPress Custom BP Add Friend Button

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