1. Developer Tutorials
  2. Adding Custom Buttons to the Members Loop

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.
Theme Editor – Editing the functions.php file
  1. 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' );
  1. Edit the code snippet as preferred and then click the Update File button.
Adding the code snippet for custom buttons
Adding the code snippet for custom buttons
  1. Go to the Members page on your website to preview the custom buttons.
Theme Editor - Previewing the custom buttons on the Members page
Previewing the custom buttons on the Members page

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"

Questions?

We're always happy to help with code or other questions you might have! Search our documentation, contact support, or connect with our sales team.