Adding custom fields in default WordPress registration form

Home » HowTo » 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!

Validate Duplicate Display Name with WP User Frontend

Comment List

fadzak 29 / 10 / 2019

Hi,
I use for the fist time the multisite wp. i created the plugin but nothing happens. Is this plugin work only with a single wordpess?

Best regards.

- Mehedi Hasan 29 / 10 / 2019
  
  Hello Fadzak,
  
  It was tested with the single site only, unfortunately. As I do not have a setup multi-site network, it would be good if you can check the plugin in a single site first.
  
  I got your email as well, I’ll reply to it soon 🙂
  
  Thanks
  
fadzak 01 / 11 / 2019

Hi, HASAN
Thanks for your feedback. I understand the situation. I continue my research. I hope to find a solution.

Best regards

Kevin 12 / 11 / 2019

Thanks for sharing, very useful!

- Mehedi Hasan 12 / 11 / 2019
  
  Thank you so much, Kevin. It’s really inspirational for me to get lovely comments 😀
  
Soufiane 23 / 04 / 2020

Hi,
First of all thank you for this great tutorial.
I have a question about more fields in the registration page in front-end, how can I do that. Maybe add more fields with the same way and after create shot ode to add it in the page in order to display it on frontend.

- Mehedi Hasan 23 / 04 / 2020
  
  Hi
  
  Yes, you are right but creating a custom form and fetching the form data into frontend would be more complex unless you are a good WordPress developer. In that case, you can use WP User Frontend– which lets users create a custom registration form for the frontend and it provides shot-code to fetch the form. Pretty easier and well maintained with lots of custom fields.
  
  Thanks
  
  - soufiane 23 / 04 / 2020
    
    Thank you for reply, i did it before and i saved the fields (firstname, lastname, email, password) in to USER TABLE but other fields like company, skills are not saved in to tabe USER_META even if i used (UPDATE_USER_META)
    
Marc Julià 13 / 08 / 2020

Thanks for sharing Mehedi, that’s exactly what I was looking for.

- Mehedi Hasan 26 / 09 / 2020
  
  That’s for the feedback, Marc 🙂
  
Sven 09 / 11 / 2020

Hey Mehedi, very useful and easy to understand. worked perfectly and was exactly what I needed!

- Mehedi Hasan 14 / 12 / 2020
  
  Thanks Sven and glad to hear it helped 🙂