Extended Buddypress profile fields demands an additional name / username field. This is the case whether you are using Buddypress Usernames Only plugin or not.
This is only relevant if you require extended profile fields. If you don’t, then go into Buddypress settings and turn off extended profiles. That will remove the requirement for a second name on the registration / profile area.
If you want to use extended profile fields on BP, but you don’t want the second username / name field uglying up your registration flow, you can do the following.
You have to be careful with this, because if you hack it, remove the second required name / username field, or any of a dozen other solutions I’ve found – the registration will break down. You will get 500 errors, missing confirmation emails etc.
The solution I used for this is as follows.
1. Assuming you just want to use a singular Username for your site – install the Buddypress Usernames Only plugin. It says the plugin is old but it is still working as of WP version 4.7.4 (for me at least). This deals with the display / access of various username / name / fullname / nickname issues throughout the WP / Buddypress install.
2. Next you’ll need to hide the extra name / username field on the registration area, and the BP profile area. Stick this CSS into your theme custom CSS under Appearance > Customize:
#profile-edit-form .field_1 { display: none;}
#signup_form .field_1 { display: none;}
(I have seen a 3rd line of CSS on other solutions – #register-page p { display: none;} – all this did for me was to hide the confirmation message after the user registers. You probably want that so I’d leave that line out).
3. The fields should now be hidden, but the system still requires that information to process properly. So next create a file in notepad and save it as name_remove.js
In that file put the following javascript:
document.getElementById("signup_username").onchange = function() {myFunction()};
function myFunction() {
var x = document.getElementById("signup_username");
document.getElementById("field_1") .value = x.value
}
Save that file and upload it to your theme folder (same folder as functions.php etc). This javascript automatically populates the hidden field with the username, so the system does not complain or fall over.
4. Finally you need WordPress to pick this javascript file up. You can do that with a function, using file enqueing. Copy and paste this function into your themes functions.php file Appearance > Editor
function wpb_adding_scripts() {
wp_register_script('name_field_remove', get_stylesheet_directory_uri() . '/name_remove.js', array('jquery'),'1.1', true);
wp_enqueue_script('name_field_remove');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
You have to be careful about the path. If it’s not working at this point, you can view the page source of your register page, and search for “name_remove.js” – look at the path on that script line. If the path is wrong, tweak it in the function above (you might need to change the get_stylesheet_directory_uri() part, or the path part after it. You can check if the path is correct by clicking the link to the .js file in the page source. If the path is wrong, you will get a 404 error. If the path is right, you should see the script code contained in the js file. Fiddle around with the path until it’s correct.
At that point, you have hidden the fields with CSS, and populated the second hidden username / name field automatically with javascript. Test your registration / confirmation email etc to make sure everything is working. But you should be good to go.
Hope that helps someone. Thanks to the folks I cobbled this solution together from.
