BuddyDev

BuddyPress User Badges adds badge functionality to BuddyPress-based communities. This plugin allows you to create any number of custom badges and assign these badges to users. The badges can be assigned manually or automatically. These badges will show on the BuddyPress member list as well as the profile page.

Why badge:- Badges can be a great way to show appreciation to your users. It adds a sense of difference, a sense of belonging. You can give badges to make your users feel special. Having the badge functionality adds that x-factor to your community. Here are some examples use of badges:- You can create badges for a top performer, best cricketers, footballers, best student, teacher, and so on. Feel free to use your imagination.

The plugin features:-

• Custom Badges:- Custom badges can be created and assign to users. For example, you can create a badge with the icon of bat and assign it to all baseball lovers.
• Sortable Badges:- Custom badges can be sorted using drag and drop. You as a BuddyPress Site admin can control the order in which a badge is shown on a user's profile. The position will reflect on the front-end listing of badges.
• Multiple Badges:- You can create and assign as many badges as you like.
• Member Type Based Badges:- If you are using member types(you may want to explore the awesome Member Types Pro plugin), You can add badges for each member type. All users with the member type will get the badges applicable to their member type. Member type badges can be enabled/disabled per member type.
• Role-Based Badges:- You can assign badges to WordPress roles. All users with the role will get the badge assigned to them. The role-based badge can be enabled/disabled for each role.
• Activate/Deactivate Badge:- You can mark a badge as active or deactivate when you need.
• Role/Member type Badge position:- Role and Member type badges position can be changed using settings. Site admin can select 'before' or 'after' custom badge options.
• Screen to show Badges:- Badges can be shown to the selected screen by use of settings. Options are Members directory, Group members listing, or Single user profile.
• Badge Position:- Badge position can be set using settings. Available options are Before and After name.
• You can upload a png/jpg or SVG to use as the icon. By default, we use 32 px but you can control it via CSS.

ScreenShots:-

Admin settings screen:

Admin Badges Screen:

Add new Badge form:

Role Based Badges:

Member Type Based:

Members Listing page:

Single User:

For the demonstration purpose, we used icons from The Twemoji set.

Restrict Image dimension with CSS.

You can add custom CSS by visiting Dashboard->Appearance->Customize and clicking on the "Additional CSS". You can set any dimension as you please . In the below example, I am setting it to 32px;

.bp-user-badges-badge-list img {
    max-width: 32px;
    max-height: 32px;
}

Shortcode:-

You can use the short-code [bp-user-badges] to list all members with a specific badge.

The short-code provides following options:-

slug:- It is required. It is the slug of the badge. For Role/Member types based badge, It is the role name e.g "administrator" or the member type name.

Example:- List all members with badge slug "king"

[bp-user-badges slug='king']

context:- Optional. Only required when listing for role or member type based badges. Possible values are 'role' or 'member_type'

Example:- List  5 users who have badges for "Author" role(or who have author role).

[bp-user-badges slug='author' context='role' max=5]

Example:- List 5 users who have "student" member type badge.

[bp-user-badges slug="student" context="member_type" max=5]

You should not specify context for custom badges.

view:- Optional. Possible values are "list", "default". It decides how the list will be displayed as a block of avatar of a vertical list of users.

Example:-

[bp-user-badges slug="king" view="list"]

max:- Maximum number of users to list

Example:-

[bp-user-badges slug=«king» max=5]