Adding custom fields in default WordPress registration form

How to add custom fields in the default WordPress registration form?

Disclaimer first! I’m not a coder but sometimes I love to play with codes. I got a task to add the first name and last name field on the default WordPress registration form, for a reason. So, here is the output!

Before starting, I have googled and found out some tutorial. Most of them are kinda hard to understand, especially for the noobs like me. I mean, who just started to play with PHP.

I have followed/read several articles on how to add custom fields on the default registration form. I got the idea on available actions that WordPress provide from them. Then started writing my own.

So many tutorials available out there on the same topic I’m writing but I have tried keeping it as simple as I can.

Before starting, we need to find the available action/filters that WordPress provides and usages on the registration process. Read the code below:

add_action( 'register_form', 'wedevs_registration_form' );
function wedevs_registration_form() {
	?>
	<p>
		<label for="first_name">
			<?php esc_html_e( 'First Name', 'first_name' ) ?> <br/>
			<input type="text" class="regular_text" name="first_name" />
		</label>
	</p>
	<p>
		<label for="last_name">
			<?php esc_html_e( 'Last Name', 'last_name' ) ?> <br/>
			<input type="text" class="regular_text" name="last_name" />
		</label>
	</p>
	<?php
}

Here, register_form is an action, available in WordPress. And wedevs_registration_form is the function we have declared. The rest is HTML to take the First Name and Last Name input fields to print on the registration form and to take data/value from the user.

Printing/adding two fields on the registration form is done. You can check it now.

Well done! Now, what if the user registers with that form? Will the inputted names be saved on the user profile? NO. It won’t. Because we have not told the system to save them yet!

Before saving the data, we actually need to validate the fields. What will happen if the user keeps First Name and Last Name blank where you like to have the mandatory? It needs to provide an error that you have not provided your names. Right? Let’s do it!

// Field validation
add_filter( 'registration_errors', 'wedevs_registration_errors', 10, 3 );
function wedevs_registration_errors( $errors, $sanitized_user_login, $user_email ) {

	if ( empty( $_POST['first_name'] ) || empty( $_POST['last_name'])  ) {
		$errors->add( 'first_or_last', __( '<strong>ERROR</strong>: First or Last name is missing', 'wedevs' ) );
	}

	return $errors;
}

The filter we user registration_errors , provides by WordPress and we had to declare our function for validating the names. We used wedevs_registration_errors, you can use your own. I kept a single error for both of the fields, first name, and last name. You can have separately as well.

Well, fields validation is done. Now, we have to tell the system to save the field value if the fields are not empty. Here we go:

add_action( 'user_register', 'wedevs_save_data' );

function wedevs_save_data( $user_id ) {
	if ( ! empty( $_POST['first_name'] ) ) {
		update_user_meta( $user_id, 'first_name', trim( $_POST['first_name'] ) ) ;		
	}

	if ( ! empty( $_POST['last_name'] ) ) {
		update_user_meta( $user_id, 'last_name', trim( $_POST['last_name'] ) );
	}
}

We need to use action user_register provided by WordPress. And same declaring the function our own. Here, if the field first_name is not empty, then update the user meta with the value of first_name.

Same for the last name.

We have written the whole code but I have not mentioned where to add these codes? Haha! You can have the codes in two way. Inserting these codes on your theme/plugin functions.php or, you can simply create a plugin for this!

Creating a plugin, OMG! Sounds hard, right? But trust me, it’s an easier task than you did last few minutes. Let me mention the process:

  • Create a folder naming ‘Custom Fields in Registration’ (You can have it your own name)
  • Create a PHP file naming functions.php and save into it.
  • Insert your codes on that functions.php file.

This is it? I’m sorry but no. You need to add few lines top of the functions.php to tell the system it’s a plugin that you can install on your WordPress system. Here is a sample:

<?php
/*
Plugin Name: Custom Registration Form
Plugin URI: www.thebengalboy.com
Description: This plugin will add two extra fields on your default registration form.
Version: 0.1
Author: Mehedi Hasan
Author URI: www.thebengalboy.com
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Declaring this in the top will make your simple and single coded file into a WordPress plugin.

Now, you can zip the folder and install it on your site. It will add two extra fields for First Name and Last Lame on your WordPress registration form.

Try it now. Cheers!

One Comments

Leave a Reply