Show that a BP Member is "Special"

Hi there,

I tried googling for a bit but I am not sure how to really search for this haha:

We are going to have "ambassadors" in certain cities around the world that will help our members with all sorts of things and we would like to display this somehow with a special Icon or title or whatnot...

The only thing I can think of right now is making them custom Avatars (their Photo with a Tagline) or add the Profile background differently but it should ideally show everywhere on the site where they are active.

Plus on Top I would like to see if there is an easy (no manual) way to have those ambassadors displayed on a page (I looked into Experts but it's not really what I was looking for).

Thanks for your help :slight_smile:
Toni

  • Patrick

    Hi there @Toni

    I hope you're having a great day!

    Since version 2.2, BuddyPress natively supports member types to help you get that done. Here's the official page in the codex:
    https://codex.buddypress.org/developer/member-types/

    But perhaps an easier way would be to use a plugin like User Role Editor to create a copy of the Subscriber role (or whichever one your BP users have). Then add the following snippet to the functions.php file of your current theme/child-theme to add the user-role to the body class:

    // Add role class to body
    function add_role_to_body($classes) {
    
    	global $current_user;
    	$user_role = array_shift($current_user->roles);
    
    	$classes .= 'role-'. $user_role;
    	return $classes;
    }
    add_filter('body_class','add_role_to_body');
    add_filter('admin_body_class', 'add_role_to_body');

    Adding a user-role class to the body enables you to add custom styles to your theme to display whatever special stuff you want whenever that body class is found. You can simply assign your custom role to any user you want to highlight them.

    Or, if you just want to have their avatars stand out everywhere, that can be achieved right now by targeting their specific avatar classes. Each user avatar has a class with their user ID# in it, like so:
    user-9-avatar

    So you could make 'em a bit bigger with a border, like this:
    .user-9-avatar, .user-47-avatar {border:1px solid #f00; height:60px; width;60px;}

    Please let us know if this helps, and don't hesitate to post again if you need more help with this.

  • Sajid

    Hi @Toni!

    Hope you are doing good today :slight_smile:

    In buddypress users can change their avatar from Profile > Extended Profile. If you can not see this then enable Extended Profile component from Settings > BuddyPress > Extended Profiles.

    We have a discussion and also I foud guide on BuddyPress codex related to custom avatarts that may be helpful for you.
    https://codex.buddypress.org/themes/guides/customizing-buddypress-avatars/
    premium.wpmudev.org/forums/topic/custom-avatars-for-buddypress

    Please check these articles and let me know if its what you are looking for.

    Take care and have a nice weekend :slight_smile:

    Cheers, Sajid

  • Toni

    Thanks Sajid :slight_smile:,

    I was more looking for an answer to this here:

    Or, if you just want to have their avatars stand out everywhere, that can be achieved right now by targeting their specific avatar classes. Each user avatar has a class with their user ID# in it, like so:
    user-9-avatar

    So you could make 'em a bit bigger with a border, like this:
    .user-9-avatar, .user-47-avatar {border:1px solid #f00; height:60px; width;60px;}

    I assume I am just pasting this in my Child Theme CSS, right?

  • Sajid

    Hi @Toni

    Hope you are doing good today :slight_smile:

    Yes you can use the unique class of AVATAR to make it unique. Just paste the below code (above code have typo error) to make it bigger and have border around it.

    .user-9-avatar, .user-47-avatar {
    border:1px solid #f00;
    height:60px;
    width:60px;
    }

    Also you can use this awesome plugin for custom CSS without modifying any theme files.
    https://wordpress.org/plugins/simple-custom-css/

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.