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
/**
* Add additional custom field
*/
add_action ( 'show_user_profile', 'my_show_extra_profile_fields' );
add_action ( 'edit_user_profile', 'my_show_extra_profile_fields' );
function my_show_extra_profile_fields ( $user )
{
?>
<h3>Extra profile information</h3>
<table class="form-table">
<tr>
<th><label for="twitter">Twitter</label></th>
<td>
<input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">Please enter your Twitter username.</span>
</td>
</tr>
</table>
<?php
}
add_action ( 'personal_options_update', 'my_save_extra_profile_fields' );
add_action ( 'edit_user_profile_update', 'my_save_extra_profile_fields' );
function my_save_extra_profile_fields( $user_id )
{
if ( !current_user_can( 'edit_user', $user_id ) )
return false;
/* Copy and paste this line for additional fields. Make sure to change 'twitter' to the field ID. */
update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
}
Adding a field on the registration form / registration page
/**
* Add cutom field to registration form
*/
add_action('register_form','show_first_name_field');
add_action('register_post','check_fields',10,3);
add_action('user_register', 'register_extra_fields');
function show_first_name_field()
{
?>
<p>
<label>Twitter<br/>
<input id="twitter" type="text" tabindex="30" size="25" value="<?php echo $_POST['twitter']; ?>" name="twitter" />
</label>
</p>
<?php
}
function check_fields ( $login, $email, $errors )
{
global $twitter;
if ( $_POST['twitter'] == '' )
{
$errors->add( 'empty_realname', "<strong>ERROR</strong>: Please Enter your twitter handle" );
}
else
{
$twitter = $_POST['twitter'];
}
}
function register_extra_fields ( $user_id, $password = "", $meta = array() )
{
update_user_meta( $user_id, 'twitter', $_POST['twitter'] );
}
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
<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.
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.
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.
