Adding Custom Buttons to the Members Loop

A few of our customers asked us how to add custom buttons into the Members loop. In this tutorial, we will teach you how to add custom buttons into the Members loop in the Grid and List view in the BuddyBoss Theme with CSS, Javascript, and PHP via the included child theme.

To do that:

1. Go to WordPress Dashboard > Appearance > Theme Editor.
2. Select the BuddyBoss Child theme from the Select theme to edit drop-down list and then click the functions.php to edit the file.

3. Paste the following code snippet for adding custom buttons in the Members loop.

// Adding custom buttons on the Members loop
function test_add_button_in_members_loop() {
if ( bp_get_member_user_id() == bp_loggedin_user_id() ) {
  return;
}
?>
  <div id="block-a-member" class="generic-button">
    <a data-balloon-pos="down" data-balloon="TEST" href="/members/" class="block-member">Button Text</a>
  </div>
  <div id="block-a-member" class="generic-button">
    <a data-balloon-pos="down" data-balloon="TEST" href="/members/" class="block-member">Another Button</a>
  </div>
<?php
}
add_action( 'bp_member_members_list_item', 'test_add_button_in_members_loop' );

4. Edit the code snippet as preferred and then click the Update File button.

5. Go to the Members page on your website to preview the custom buttons.

You can edit the tooltip of the custom buttons, add more buttons using the code and customize the buttons as required.

To remove the tooltip, delete the following line from the code:

data-balloon-pos="down" data-balloon="TEST"