BuddyPress Better Registration – Part 1
Recently, We have been getting a lot of request about BuddyPress registration experience customization. In this series of 2 tutorials, we are going to explore all the possibilities and enhancements for the BuddyPress Registration process. I am not going to look customizing the appearance, only functionalities.
Make BuddyPress Use Username sitedwide instead of Fullname or display name:-
You don't want full name on registration page? You want to force users to use the username on the site instead of display name? That is fine. We can easily achieve it. We will restrict users from modifying the full name and fill username as full name.
Step 1:- Hide the full name field on Registration and Edit Profile page
Please visit Dashboard->Appearance->Customize->Additional CSS and add this css
1 2 3 | form div.field_1 { display:none !important; } |
It will hide full name field on the registration and edit profile page.
Here is how our registration form looked before applying css
And here it is after applying the css.
Step 2: – Pre-fill the full name field with username before signup validation. We are overwriting the full name field with username.
1 2 3 4 5 6 7 8 | /** * Use the username as display name. */ function buddydev_inject_username_as_fullname() { $_POST['field_1'] = $_POST['signup_username']; } add_action( 'bp_signup_pre_validate', 'buddydev_inject_username_as_fullname' ); |
Step 3:- Removing the 'required' attribute from the full name form input field.
BuddyPress marks the input field for the full name as required. Even if we hide the field, all modern web browsers won't submit our form as a field marked as required is hidden. To overcome it, we remove 'required' from the input form field attribute
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | /** * Disable client side required attribute in input field to avoid failing of form submission. * All modern browsers will not submit if a field is marked as required and does not have the value. * * @param array $atts input field attributes. * @param string $field_name field name. * * @return array */ function buddydev_disable_fullname_required_attributes( $atts, $field_name ) { global $field; // If your fullname field has a different id(should not happen in normal cases), please use that // Default value '1' will work for most people. $fullname_field_id = 1; if ( $field && $fullname_field_id !== $field->id ) { return $atts; } foreach ( $atts as $key => $value ) { if ( 'required' === $value ) { unset( $atts[ $key ] ); break; } } return $atts; } add_filter( 'bp_get_form_field_attributes', 'buddydev_disable_fullname_required_attributes', 10, 2 ); |
That's it. Now, go and try your register page. Create new user and see how it works.
Let's see one more trick for today.
Remove Confirm password box on the BuddyPress registration page:-
Step 1:- Hide the require password field and label using css as describe earlier.
1 2 3 4 5 | #buddypress .standard-form label[for="signup_password_confirm"], .register-section #signup_password_confirm { display:none !important; } |
Step 2:- Modify our function from previous step that hooks to signup validation and overwrite the confirm password with the entered password.
Here is the updated function.
1 2 3 4 5 6 | function buddydev_inject_username_as_fullname() { $_POST['field_1'] = $_POST['signup_username']; // disable confirm password. $_POST['signup_password_confirm'] = isset( $_POST['signup_password'] ) ? $_POST['signup_password'] : ''; } |
That's it. Here is how the new registration form looks like.
The PHP code from this tutorial can be put in wp-content/plugins/bp-custom.php or yourtheme/functions.php.
Hope you enjoyed this. In our next tutorial in the BuddyPress registration series, we will see how to avoid asking user for a username.
Great!, thank you very much, Brajesh, the new registration form is exactly what I, any many others were looking for!
Regards
Carsten
Thank you Carsten.
I sincerely appreciate your suggestion about the same in the forums.
PS:- There was a small issue on confirm password, please make sure you use updated code.
Regards
Brajesh
Hi Brajesh, I get a HTTP ERROR 500 with this updated confirm password code:
//Remove Confirm password box on the BuddyPress registration page
Regards
Carsten
This issue is unsolved
Hi Carsten,
You are most probably adding both the functions from first snippet and last. You should replace the function from first snippet with it. They are same. The last version is an updated version of the first.
PHP does not allow duplicate functions. That's why you are getting the error.
Regards
Brajesh
got it, thanks!
very cool boss thanks
You are welcome.
Now the registration process has become much better, it is time for some styling.
The registration is divided into an account- and a profile section with different styling.
Is it possible to either join the two style sheets, or letting one of the sections inherit the style from the other, into one registration section?
I had a code for a one column registration,but this is not working with Nouveau anymore.
Regards
Carsten