How to Customize LearnPress Registration Form

How to Customize LearnPress Registration Form

How to Add Custom Filed Or Customize LearnPress Registration Form 

 

Learnpress’s Registration form works on default registration hooks of WordPress.
According to the Client’s need sometimes they want more data from the users for the registration, at that time we need to add them to the form.

There are two types of registration forms for the learnpress plugin and themes. The themes from Thimpress have their own registration form in the popup.

To add the extra fields we need to add those fields on the register_form hook of WordPress.

For example, we will be adding the Phone number field to the form.

 

<div class="wp-block-codemirror-blocks-code-block code-block">
<pre>add_action( 'register_form', 'add_extra_fields');
if ( !function_exists( 'add_extra_fields') ):
    function add_extra_fields(){
        $form_data_element  = '<p><input class="input required" type="text" id="billing_phone" name="billing_phone" placeholder="Phone"></p>';
         
        echo $form_data_element;
    }
endif;</pre>
</div>

 

What’s your Biggest LearnPress Challenge Right Now?

Let’s Talk

Now we need to make sure the data entered in the form should be saved successfully in the WordPress Database. Here we will use the hooks like user_register and filter registration_errors.
registratio_errors filter runs before the user_register hook to sanitize and fetch out the errors in the input data if any. The Below code snippet will show our further process.

 

<div class="wp-block-codemirror-blocks-code-block code-block">
<pre>add_filter( 'registration_errors', 'registration_process_validation', 10, 3 );
function registration_process_validation( $errors, $sanitized_user_login, $user_email ) 
{
    // Get the data from the POST variable of the registration form.
      if ( empty( $_POST['billing_phone'] ) || ! empty( $_POST['billing_phone'] ) && trim( $_POST['billing_phone'] ) =='' ) {
        $errors->add( 'billing_phone', __( '<strong>ERROR</strong>: Please Enter Phone.' ) );
    }
    
    // return the WP error object
    return $errors;
}

// User register hook of WordPress
add_action('user_register','wwc_save_user_register_fields');
function wwc_save_user_register_fields( $user_id ){
   
        $user_data = array();
        $user_data['ID'] = $user_id;
        // Update the data to the user meta of the user
        if( !empty( $_POST['billing_phone'] ) ):
         update_user_meta( $user_id, 'billing_phone', $_POST['billing_phone'] );
        endif;
}</pre>
</div>

 

In the above code, we have added the Phone number field to the Register Form.
Now we need to display this field on the user profile of the learnpress, to do this we need to override the learnpress’s ‘learn-press/end-profile-basic-information-fields’ hook. For example.

 

<div class="wp-block-codemirror-blocks-code-block code-block">
<pre>add_action( 'learn-press/end-profile-basic-information-fields', 'wwc_lrp_add_extra_fields' ) ;

function wwc_lrp_add_extra_fields(){
  	    // Get the profile instance of learnpress
        $profile = LP_Profile::instance();
	    // Specify the section where you want to show the field on the profile page
		if ( ! isset( $section ) ) {
			$section = 'basic-information';
		}

		$user = $profile->get_user();
		$user_id = $user->get_id();
  
        // Get the user meta where the phone number is saved
		$billing_phone = get_user_meta($user_id, 'billing_phone',true );

        if(!empty($billing_phone)){
			$author_phone = $billing_phone;
		}
 		?>
      	 <!-- Show the Field with the value -->
         <li class="form-field">
             <label for="billing_phone"><?php _e( 'Phone', 'learnpress' ); ?></label>
             <div class="form-field-input">
                 <input type="text" name="billing_phone" id="billing_phone"
                        value="<?php echo esc_attr( $author_phone ); ?>"
                        class="regular-text"/>
             </div>
         </li>
 		<?php
 }</pre>
</div>

 

In the above code, we have taken the profile instance of the learnpress using the object LP_Profile::instance().
After that, we have fetched the data which is saving the user meta using the key of the meta i.e billing_phone and Added its value to the HTML we have rendered on the page.

Now we need to show the same fields at the User’s profile at the WordPress Admin Area. To do this we would use WordPress’s User profile show_user_profile and edit_user_profile hooks.
We will be adding the Phone field to the user profile by this code.

 

<div class="wp-block-codemirror-blocks-code-block code-block">
<pre>add_action( 'show_user_profile', 'extra_user_profile_fields' );
add_action( 'edit_user_profile', 'extra_user_profile_fields' );

 function extra_user_profile_fields( $user ) { ?>

     <table class="form-table">
     <tr>
         <th><label for="phone"><?php _e("Phone"); ?></label></th>
         <td>
             <input type="text" name="billing_phone" id="billing_phone" value="<?php echo esc_attr( get_the_author_meta( 'billing_phone', $user->ID ) ); ?>" class="regular-text" /><br />
             <span class="description"><?php _e("Please enter your Phone"); ?></span>
         </td>
     </tr>
    
     </table>
 <?php }
</pre>
</div>

 

After that, we need to make sure that when the admin saves its data on the WordPress Admin Area it should be saved. To do this we need to use personal_options_update and edit_user_profile_update.

 

<div class="wp-block-codemirror-blocks-code-block code-block">
<pre>add_action( 'personal_options_update', 'wwc_save_extra_user_profile_fields' );
add_action( 'edit_user_profile_update', 'wwc_save_extra_user_profile_fields' );
function wwc_save_extra_user_profile_fields( $user_id ) {
    if ( empty( $_POST['_wpnonce'] ) || ! wp_verify_nonce( $_POST['_wpnonce'], 'update-user_' . $user_id ) ) {
        return;
    }
    
    if ( !current_user_can( 'edit_user', $user_id ) ) { 
        return false; 
    }
  
    $billing_phone = $_POST['billing_phone'];
	if( !empty( $billing_phone ) ):
      update_user_meta( $user_id, 'billing_phone', $_POST['billing_phone'] );
    endif;
}
 </pre>
</div>

 

What’s your Biggest LearnPress Challenge Right Now?

Let’s Talk

By doing this last step now your extra field is added on the Registration form, Learnpress Profile Display, and WordPress Admin Area.
For further queries please contact us on: