Adding a custom user profile field to registration in WordPress

Sometime back a friend of mine asked me how can he add a custom registration field to the WordPress registration page, I asked him to google it as I have come across a lot of such tutorials but he was unable to do so and then I found the issue that either the tutorial is for adding a custom user profile field or adding an existing field to the registration form and even coupling up the two won’t do it and requires some change of code and that can be hard for someone who doesn’t swim in code at all. Pun intended!

First, I would write create a custom user field so that it can be operated from the WordPress profile page and then add that field in the registration form. To keep it general and useful for everyone, I would be adding a simple Twitter handle field.

Adding a custom user profile field

01 /**
02  * Add additional custom field
03  */
04
05 add_action ( 'show_user_profile', 'my_show_extra_profile_fields' );
06 add_action ( 'edit_user_profile', 'my_show_extra_profile_fields' );
07
08 function my_show_extra_profile_fields ( $user )
09 {
10 ?>
11     <h3>Extra profile information</h3>
12     <table class="form-table">
13         <tr>
14             <th><label for="twitter">Twitter</label></th>
15             <td>
16                 <input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" /><br />
17                 <span class="description">Please enter your Twitter username.</span>
18             </td>
19         </tr>
20     </table>
21 <?php
22 }
23
24 add_action ( 'personal_options_update', 'my_save_extra_profile_fields' );
25 add_action ( 'edit_user_profile_update', 'my_save_extra_profile_fields' );
26
27 function my_save_extra_profile_fields( $user_id )
28 {
29     if ( !current_user_can( 'edit_user', $user_id ) )
30         return false;
31     /* Copy and paste this line for additional fields. Make sure to change 'twitter' to the field ID. */
32     update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
33 }

Adding a field on the registration form / registration page

01 /**
02  * Add cutom field to registration form
03  */
04
05 add_action('register_form','show_first_name_field');
06 add_action('register_post','check_fields',10,3);
07 add_action('user_register', 'register_extra_fields');
08
09 function show_first_name_field()
10 {
11 ?>
12     <p>
13     <label>Twitter<br/>
14     <input id="twitter" type="text" tabindex="30" size="25" value="<?php echo $_POST['twitter']; ?>" name="twitter" />
15     </label>
16     </p>
17 <?php
18 }
19
20 function check_fields ( $login, $email, $errors )
21 {
22     global $twitter;
23     if ( $_POST['twitter'] == '' )
24     {
25         $errors->add( 'empty_realname', "<strong>ERROR</strong>: Please Enter your twitter handle" );
26     }
27     else
28     {
29         $twitter = $_POST['twitter'];
30     }
31 }
32
33 function register_extra_fields ( $user_id, $password = "", $meta = array() )
34 {
35     update_user_meta( $user_id, 'twitter', $_POST['twitter'] );
36 }

If you are using this on before WordPress 3.1, then your input box will not be styled like that of username and email. Its fixed in WP 3.1 though. For earlier versions, change the id of the input field on Line 14 to user_email

1 <input id="user_email" type="text" tabindex="30" size="25" value="<?php echo $_POST['twitter']; ?>" name="twitter" />

To get this custom field, you can use get_the_author_meta() to return its value or the_author_meta() for displaying it.

1 the_author_meta( $meta_key, $user_id ); // $meta_key = 'twitter' in our case

I am also attaching the whole code as a plugin that you can activate on your WordPress installation.

Download Plugin

This concludes the tutorial for adding an Custom user profile field which is an input text box but there may be certain cases where you would like to use select dropdowns, radio buttons or checkboxes. Right? I will cover that in the next post.

If you have any questions, use the comment section & I will try to help.


Customizing the Registration Form
Example

The following example demonstrates how to add a “First Name” field to the registration form as a required field. First Name is one of WordPress’s built-in user meta types, but you can define any field or custom user meta you want. Just keep in mind that if you create custom user meta, you may need to create additional admin UI as well.

//1. Add a new form element…
add_action( ‘register_form’, ‘myplugin_register_form’ );
function myplugin_register_form() {

$first_name = ( ! empty( $_POST[‘first_name’] ) ) ? trim( $_POST[‘first_name’] ) : ”;

?>


<input type="text" name="first_name" id="first_name" class="input" value="” size=”25″ />

add( ‘first_name_error’, __( ‘ERROR: You must include a first name.’, ‘mydomain’ ) );
}

return $errors;
}

//3. Finally, save our extra registration user meta.
add_action( ‘user_register’, ‘myplugin_user_register’ );
function myplugin_user_register( $user_id ) {
if ( ! empty( $_POST[‘first_name’] ) ) {
update_user_meta( $user_id, ‘first_name’, trim( $_POST[‘first_name’] ) );
}
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s