Introduction :
In this article, you will learn how to create custom fields for registration forms. If you want to allow registrations on WordPress sites, you need to collect detailed information about the users. If you really need this information, we recommend that you make it mandatory when registering. Otherwise, the user may actually access the profile page and provide additional information. Of course, there are many free and excellent add-ons. It has already been completed, but you can do it manually. This is because the plugin can not execute exactly what you need, or because you want to make the site as light as possible.
Pic : Allow registrations on WordPress site
The standard WordPress registration form consists of two form fields: user name and e-mail. Having only a user name and email field makes registration process very easy, lets prepare a registration form directly with some extra form fields in addition to e-mail such as user name and mobile phone number.
Pic : Standard WordPress registration form
In this article, we’ll add a required field that accepts the user’s mobile phone number will be visible in
1. WordPress Frontend Registration page
2. Manually Add a WordPress User with Administrator
3. WordPress Press user profile page
The main hooks used to add a custom field to the WordPress above sections are
a). register_form (to add new HTML form elements for frontend registration page.)
b). registration_errors (to complete validation in the frontend registration form fields.)
c). user_register (to save a frontend custom field value, if there is no error.)
d). show_user_profile (this action hook invoked whenever a user modifies another user’s profile, using this add new HTML form elements to user profile )
e). edit_user_profile (this action hook is invoked each time the user edits his or her user profile, using this to add new HTML form elements to user profile )
f). personal_options_update (this action only takes place if the current user edits their profile, using this to update user profile custom field value, if there is no error)
g). edit_user_profile_update ( this action only takes place if the current user edits another user’s profile, using this to update user profile custom field value, if there is no error)
h). user_new_form (this action hook is invoked at the end of the new user form, using this to add new HTML form elements to create user at administrator registration page)
i). user_profile_update_errors (to complete validation in the administrator registration form fields.)
k). edit_user_created_user (this action hook is invoked after creating a new user, using this to add user custom field value, if there is no error)
Now let’s prepare method for each section to add example extra form field mobile phone number.
1.You must create a variable that contains custom fields.
The default page of registration also stores all the fields in the array with three parameters. The first field is the field ID, the second is the field identifier, and the last is the logical information that defines the field as the registration page. You can add as many parameters as you like, such as placeholder and required information.
|
1 2 3 4 5 6 |
/** * Storing every field within an array */ $user_extra_fields = array( array( 'phone', __( 'Phone Number', 'shcf' ), true ) ); |
2. To add new HTML form elements for frontend registration page
|
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 31 32 33 34 35 36 |
/** * display additional fields at frontend user register page callback */ function sh_display_frontend_custom_fields_callback(){ //get extra fields globally defined global $user_extra_fields; //init $html = ''; //sh_pr($user_extra_fields);exit; //loop each extra fields foreach ($user_extra_fields as $extra_field){ //check if(is_array($extra_field) && !empty($extra_field)){ //set field details list($field_id,$field_label,$display_staus) = $extra_field; //check if($display_staus){ //append each field $html .='<p>'; $html .='<label for="'.$field_id.'">'.$field_label.'<br>'; //get and set any values already sent $value = ( isset( $_POST[$field_id] ) ) ? $_POST[$field_id] : ''; //set $html .='<input name="'.$field_id.'" id="'.$field_id.'" class="input" value="'.esc_attr( stripslashes( $value ) ).'" type="text"></label>'; $html .='</p>'; } } } //display echo $html; } /** * display additional fields at frontend user register page hook */ add_action( 'register_form', 'sh_display_frontend_custom_fields_callback' ); |
3. To complete validation in the frontend registration form fields
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/** * validate additional fields callback */ function sh_check_custom_fields_callback( $errors, $sanitized_user_login, $user_email ) { //get extra fields globally defined global $user_extra_fields; //loop each extra fields foreach ($user_extra_fields as $extra_field) { //check if (is_array($extra_field) && !empty($extra_field)) { //set field details list($field_id, $field_label, $display_staus) = $extra_field; //check if ($display_staus) { //check switch ($field_id){ case 'phone':{ //check if(isset($_POST[$field_id]) && empty($_POST[$field_id])){ $errors->add( $field_id.'_error', __( '<strong>ERROR</strong>: Invalid '.$field_label,'shcf')); }elseif (isset($_POST[$field_id]) && !empty($_POST[$field_id])){ //check for 10 digit mobile number if(!preg_match('/^[0-9]{10}+$/', $_POST[$field_id])){ $errors->add( $field_id.'_error', __( '<strong>ERROR</strong>: Invalid '.$field_label,'shcf')); } } break; } default:{ //check if(isset($_POST[$field_id]) && empty($_POST[$field_id])){ $errors->add( $field_id.'_error', __( '<strong>ERROR</strong>: Invalid '.$field_label,'shcf')); } break; } } } } } //return return apply_filters( 'sh_custom_fields_errors', $errors); } /** * validate additional fields hook */ add_filter( 'registration_errors', 'sh_check_custom_fields_callback', 10, 3 ); |
4. To save a frontend custom field value, if there is no error
|
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 |
/** * save additional fields at user register page callback */ function sh_save_custom_fields_callback( $user_id ) { //get extra fields globally defined global $user_extra_fields; //loop each extra fields foreach ($user_extra_fields as $extra_field) { //check if (is_array($extra_field) && !empty($extra_field)) { //set field details list($field_id, $field_label, $display_staus) = $extra_field; //check if ($display_staus && isset( $_POST[$field_id] ) ) { //save custom field data update_user_meta($user_id, $field_id, $_POST[$field_id]); } } } } /** * save additional fields at frontend user register page hook */ add_action( 'user_register', 'sh_save_custom_fields_callback', 10, 1 ); |
Pic : custom field added to standard register page
5. To add new HTML form elements for administrator user registration page
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/** * display additional fields at admin user register page callback */ function sh_display_admin_custom_fields_callback( $operation ) { //get extra fields globally defined global $user_extra_fields; //check if ( 'add-new-user' !== $operation ) { // $operation may also be 'add-existing-user' return; } //init $html = ''; //loop each extra fields foreach ($user_extra_fields as $extra_field) { //check if (is_array($extra_field) && !empty($extra_field)) { //set field details list($field_id, $field_label, $display_staus) = $extra_field; //check if($display_staus) { //get and set any values already sent $value = ( isset( $_POST[$field_id] ) ) ? $_POST[$field_id] : ''; //append each field $html .= '<table class="form-table"> <tbody> <tr class="form-field"> <th scope="row"><label for="'.esc_html($field_id).'">'.$field_label.'<span class="description"> '.__(' (required)', 'shcf' ).'</span></label></th> <td><input name="'.esc_html($field_id).'" id="'.esc_html($field_id).'" value="'.esc_attr( stripslashes( $value ) ).'" type="text"></td> </tr> <tbody> </table>'; } } } //display echo $html; } /** * display additional fields at admin user register page hook */ add_action( 'user_new_form', 'sh_display_admin_custom_fields_callback' ); |
6. To complete validation in the administrator user registration form fields
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/** * validate admin additional fields callback */ function sh_check_admin_custom_fields_callback( $errors, $update, $user ) { //get extra fields globally defined global $user_extra_fields; //loop each extra fields foreach ($user_extra_fields as $extra_field) { //check if (is_array($extra_field) && !empty($extra_field)) { //set field details list($field_id, $field_label, $display_staus) = $extra_field; //check if ($display_staus) { //check switch ($field_id){ case 'phone':{ //check if(isset($_POST[$field_id]) && empty($_POST[$field_id])){ $errors->add( $field_id.'_error', __( '<strong>ERROR</strong>: Invalid '.$field_label,'shcf')); }elseif (isset($_POST[$field_id]) && !empty($_POST[$field_id])){ //check for 10 digit mobile number if(!preg_match('/^[0-9]{10}+$/', $_POST[$field_id])){ $errors->add( $field_id.'_error', __( '<strong>ERROR</strong>: Invalid '.$field_label,'shcf')); } } break; } default:{ //check if(isset($_POST[$field_id]) && empty($_POST[$field_id])){ $errors->add( $field_id.'_error', __( '<strong>ERROR</strong>: Invalid '.$field_label,'shcf')); } break; } } } } } //return return apply_filters( 'sh_admin_custom_fields_errors', $errors); } /** * validate admin additional fields hook */ add_action( 'user_profile_update_errors', 'sh_check_admin_custom_fields_callback', 10, 3 ); |
7.To save a administrator user custom field value, if there is no error
|
1 2 3 4 |
/** * save additional fields at admin user register page hook */ add_action( 'edit_user_created_user', 'sh_save_custom_fields_callback', 10, 1 ); |
Pic : Custom field added to admin register page
8. To add new HTML form elements for user profile page
|
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 31 32 33 34 35 36 37 38 39 40 |
/** * display additional fields at admin user profile page callback */ function sh_display_profile_custom_fields_callback( $user ) { //get extra fields globally defined global $user_extra_fields; //init $html = ''; //loop each extra fields foreach ($user_extra_fields as $extra_field) { //check if (is_array($extra_field) && !empty($extra_field)) { //set field details list($field_id, $field_label, $display_staus) = $extra_field; //check if($display_staus) { //get exter filed data from user meta table $value = get_user_meta($user->ID, $field_id); //append each field $html .= '<table class="form-table"> <tbody> <tr class="form-field"> <th scope="row"><label for="'.esc_html($field_id).'">'.$field_label.'<span class="description"> '.__(' (required)', 'shcf' ).'</span></label></th> <td><input name="'.esc_html($field_id).'" id="'.esc_html($field_id).'" value="'.esc_attr( stripslashes( $value[0] ) ).'" type="text"></td> </tr> <tbody> </table>'; } } } //display echo $html; } /** * display additional fields at admin user profile page hooks */ add_action( 'show_user_profile', 'sh_display_profile_custom_fields_callback' ); add_action( 'edit_user_profile', 'sh_display_profile_custom_fields_callback' ); |
9. To complete validation in the user profile form fields
|
1 2 3 |
/** * validate admin additional fields callback hook will handle update profile too */ |
10. To update a user profile custom field value, if there is no error
|
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 31 |
/** * update additional fields at user profile page callback */ function sh_update_custom_fields_callback( $user_id ) { //get extra fields globally defined global $user_extra_fields; //check edit permission for user if ( !current_user_can( 'edit_user', $user_id ) ) return false; //loop each extra fields foreach ($user_extra_fields as $extra_field) { //check if (is_array($extra_field) && !empty($extra_field)) { //set field details list($field_id, $field_label, $display_staus) = $extra_field; //check if ($display_staus && isset( $_POST[$field_id] ) ) { //save custom field data update_user_meta($user_id, $field_id, $_POST[$field_id]); } } } } /** * update additional fields at user profile page callback */ add_action( 'personal_options_update', 'sh_update_custom_fields_callback' ); add_action( 'edit_user_profile_update', 'sh_update_custom_fields_callback' ); |
Pic : Custom field added to admin user profile page
Finally, Open your current active theme’s functions.php file and drop this PHP code in or create a plugin and place, here the sample create file named as “custom_registration_fields.php” and create plugin header like below after that drop this PHP code in.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php /** * @package Custom_Registration_Fields * @version 1.0 */ /* Plugin Name: ScriptHere's Custom Registration Fields Plugin URI: http://scripthere.com/ Description: Add custom fields to WordPress frontend registration page, manually add a WordPress user with administrator and WordPress user profile page. Author: Narendra Padala Author URI: http://scripthere.com/ Text Domain: shcf Version: 1.0 Last Updated: 02/12/2017 */ |
Conclusion :
Only a few lines in the code could add the required registration fields and learn a lot in the process. Some hooks are useful independently and allow further limitation of registration criteria based on existing fields, you can download full code here.
