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

/**
 * 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.

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.

About Ashfame

Developer + Entrepreneur + Opensource fanatic. Love WordPress + Startups + Music + Adrenaline kick.

  • http://www.navinpoeran.com Navin Poeran

    Hey Ashish,

    Thank you very much for this article.

    I read this article a few time, also I looked at the source code.

    My question would be, how would you do with a registration field that needs to update a certain role?

    I have a screenshot for this:
    http://twitpic.com/32vad3

    As you can see, the visitor can select one of those buttons, and if he registers, his role will be updated.

    I’ve been stuck with this problem quite a time now :(

  • http://www.nashvilleinteractive.com nashville interactive

    thanks for the excellent post. I’d love to see how you would handle a dynamic array of checkboxes in your next post when you cover those. for example, a list of a user’s favorite cars based on a “Car” custom post type. (and how to display those on the front end too). I’ve seen some other checkbox implementations out there but nothing that covers this. Thanks!

  • http://choveveitzion.com/ Avrohom

    Looks very helpful!

    I added your plugin to my site and activated it. Now what? Could you please explain: how do I use the plugin? Can I find it somewhere on my dashboard?

    Thank you!

    Avrohom

  • http://choveveitzion.com/ Avrohom

    Ahhhh…. I found the problem. It wasn’t your plugin at all. It was another plugin I was trying. I deactivated it.

    BTW, there was an error message if my new text box was left blank:

    ERROR: Your City couldn’t be empty.

    Is this message generated by your program? If so, I think it should read:

    Your City can’t be empty.

  • http://choveveitzion.com/ Avrohom

    Sorry, please ignore previous message.

  • Gavin

    Thank you so much for this……. a thousand times thank you.

  • http://webtutts.com Robin

    what is the hook to add custom fields while creating new user from admin panel. I can see only:
    add_action( ‘show_user_profile’, ‘my_show_extra_profile_fields’ );
    add_action( ‘edit_user_profile’, ‘my_show_extra_profile_fields’ );

    but what for add_action(‘??’,'my_show_extra_profile_fields’) for http://**/wp-admin/user-new.php ??

    Is there any hook for that? Am I clear to my requirement?

    Thanks

    • http://www.ashfame.com/ Ashfame

      Yep, there is no hook on user-new.php but I am not sure why.

  • david

    Good job! Simple and useful. But I got a stupid html issue.. I added my custom fields as the original “Twitter” and when I go in my admin panel and click on a user profile, I see the table of the custom fields (eg: ) doubled!

    To be more clear, when I go ../wp-admin/user-edit.php?user_id=9.. I see one table on the top of the page and one on the bottom!

    Anyone who can imagine where does this ‘doubling’ come from?

  • trevor

    This is great! Is there a way to make the custom fields on the registration page mandatory fields?

  • trevor

    Ignore me. :-)

  • Tri

    @Robin I am wondering the same question too. Apparently there’s no such hook in user-new.php

    The only option I can think of is changing the core file user-new.php , but I’m not very enthusiastic about doing that.

    • http://www.ashfame.com/ Ashfame

      Yep, like I just replied to Robin, there is no hook on user-new.php but I am not sure why.

  • Lenny

    How would I add an additional field to this code. Everything I have tried has produced errors. I can’t figure it out. Please offer explanation!! Thanks in advance!

  • suzan34

    Hi Ashfame, great work. I installed your plugin custom-field-registration to my WP and BP site and it worked, I can see the twitter form element on user admin page. But I cant see it on frontend registration page. How can I put it there, so users can fill that too and data saved in DB so admin can see that twitter field in admin user edit page too?
    How to do that? Could you please help out? Thnx very much in advance.

    • http://ashfame.com/ Ashfame

      Hi Suzan, Are you talking about a registration page on your site which is not the WordPress’s default registration URL? If that’s the case, then this plugin won’t work there as it attaches itself to default registration form only.

      In case you need me to code that up for you, or just want to talk out details, feel free to reach out via contact form.