About this plugin
This plugin is built to display BuddyPress groups on the new user registration page. Groups can be displayed as:
- a list of checkboxes
- a list of checkboxes in a scrollable container
- a list of radio buttons
New users will automatically join any of the groups selected during the registration process.
Options are available in the admin area to configure the title of the groups list on the registration page, the description of the groups list, whether private groups are visible to new users, the order in which groups are displayed, and how many groups will be visible.
Per-group options let you fine-tune individual groups: hide a group from the registration form, pre-check a group by default, or mark a group as auto-join so every new user becomes a member automatically. Auto-join groups can be left off the form entirely or shown as pre-checked, locked entries labeled “(automatic)”.
An optional “Require Group Selection” setting (off by default) prevents signup from completing until the registrant selects at least one group. The requirement is validated on the server when the form is submitted, works with both checkbox and radio button display modes, and is skipped automatically if no selectable groups exist so registration is never blocked by a misconfiguration.
Optional Group Sections let you organize the registration form into multiple titled sections — for example “Interests” and “Regions” — each with its own description and its own curated set of groups. While at least one section is configured, the form offers only the groups you assigned, each in exactly one section, and with the radio button display registrants can select one group per section. Leave the sections empty to keep the classic single list; existing installations render exactly as before.
The [bp_registration_groups_join] shortcode lets logged-in members join groups after registration, for example on a welcome page later in onboarding, or on sites where members sign up through something other than the BuddyPress registration form. It offers the same curated groups as the registration form, marks the groups a member already belongs to, joins public groups right away, and sends a membership request for private groups (when “Show Private Groups” is on). Logged-out visitors see a log-in link.
5).
Custom Styles
This plugin includes specific CSS for changing the way content is displayed. The default CSS will place the group after the “Profile Details” section and before the “Complete Sign Up” button on the register page. css in this plugin directory to see how to target each element.
css.
Groups section:
#registration-groups-section { float: right; width: 48%; }
Checkboxes:
reg_groups_group_checkbox { margin: 0 5px 0 0; }
Form labels:
reg_groups_group_label { display: inline; font-weight: normal; }
Groups section – responsive:
@media only screen and (max-width: 480px) { #registration-groups-section { float: none; width: 100%; } }
List items:
reg_groups_item { list-style: none; }
No groups message:
reg_groups_none { font-style: italic; color: gray; }
Multiselect:
reg_groups_list_multiselect { height: 8em; border: 1px solid #ccc; background: #fafafa; padding: 6px; overflow: auto; }
Accessibility fieldsets (invisible wrappers naming each group of inputs for screen readers):
reg_groups_fieldset { border: 0; padding: 0; margin: 0; min-width: 0; background: transparent; }
Curated group sections:
reg_groups_section { margin: 0 0 12px; }
2em; font-weight: 600; }
85em; font-style: italic; color: gray; }
Groups section – BP Nouveau template pack:
layout-wrap #registration-groups-section { float: none; width: 100%; flex: 1 100%; }
Join Groups shortcode (the list reuses the item, checkbox, label, multiselect, and section selectors above):
reg_groups_fieldset { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; background: transparent; }
reg_groups_list_multiselect { margin: 0; padding-left: 0; }
reg_groups_list_multiselect { padding: 6px; }
9em; }
reg_groups_error { border-left: 4px solid #b32d2e; background: #fcf0f1; color: #b32d2e; padding: 8px 12px; margin: 0 0 10px; }
reg_groups_join_results { border-left: 4px solid #00a32a; background: #edfaef; padding: 8px 12px; margin: 0 0 10px; }
reg_groups_join_results ul { margin: 0; padding: 0; list-style: none; }