BuddyPress.org

On my website there are six categories of users. It is helpful to members to be able to easily identify which category each member fits into. So, to help them, I am trying to create a color-coded system for each user group. For example:

Butcher -> Red
Baker -> Blue
Candlestick Maker -> Yellow

I saw somewhere that you can create a bp-custom.php file. Then, add some css rules in your styles.css file. I’m not sure what I am doing wrong, but it did not work.

Firstly, I created a bp-custom.php file and stuck it in my buddypress folder. Contents of the file are as follows:

function buddydev_create_css_class_based_on_profile_field_data( $class,  $object, $params ) {
 
    $field_id = 25; //Professional Title field Id
 
    $professionaltitle = xprofile_get_field_data(  $field_id );
    $professionaltitle = strtolower( $professionaltitle);
    
    foreach ($professionaltitle->title as $title) {
        $class = $title.'avatar';
    }
 
    
    return $class;
}
add_filter( 'bp_core_avatar_class', 'buddydev_create_css_class_based_on_profile_field_data', 10, 3 );

Then I created css rules for each professional title in the style.css for my child-theme like

.butcheravatar {
   border: 3px solid red;
}

Does anyone have any idea where I may have gone wrong?

Thanks in advance!