WordPress

Add Custom User Profile Fields In WordPress

When you are working on projects that need a lot of user management then you can get to the point where you need to add additional information to the users of your website. This is similar to creating new post meta data where you are able to create new bits of data and attach them to your posts, the users can work in exactly the same way.

In the WordPress database there is a table called wp_usermeta which stores all additional data that can be found on the user profile. This table is made up of a unique ID, the user ID, meta name and meta values. The structure of this database table means you can add as many additional fields to the user account as you like.

In this tutorial we are going to investigate how you can use this table to add new custom fields to a user profile.

Add New Fields To User Profile

user-profile On the user profile page there is an action at the bottom of the profile called edit_user_profile and show_user_profile.

do_action( 'show_user_profile', $profileuser );
do_action( 'edit_user_profile', $profileuser );

This will allow us to use these actions to add more fields to the profile page. The below code will allow us to add new fields which we can use to add different social media URLs linked to the user.

add_action( 'show_user_profile', 'add_extra_social_links' );
add_action( 'edit_user_profile', 'add_extra_social_links' );

function add_extra_social_links( $user )
{
    ?>
        <h3>New User Profile Links</h3>

        <table class="form-table">
            <tr>
                <th><label for="facebook_profile">Facebook Profile</label></th>
                <td><input type="text" name="facebook_profile" value="<?php echo esc_attr(get_the_author_meta( 'facebook_profile', $user->ID )); ?>" class="regular-text" /></td>
            </tr>

            <tr>
                <th><label for="twitter_profile">Twitter Profile</label></th>
                <td><input type="text" name="twitter_profile" value="<?php echo esc_attr(get_the_author_meta( 'twitter_profile', $user->ID )); ?>" class="regular-text" /></td>
            </tr>

            <tr>
                <th><label for="google_profile">Google+ Profile</label></th>
                <td><input type="text" name="google_profile" value="<?php echo esc_attr(get_the_author_meta( 'google_profile', $user->ID )); ?>" class="regular-text" /></td>
            </tr>
        </table>
    <?php
}

The above code will add a new table to the bottom of the user profile page, adding 3 new text boxes to the form. To make sure that these are populated with the saved data we use the WordPress function get_the_author_meta() to return the meta data stored against the user profile.

This function requires two parameters the first is the name of the field you want to return, the second parameter is the ID of the user you want to search on.

get_the_author_meta( $field, $userID );

Saving User Profile Fields

When the user profile is saved we need to add a new action to store this new information, the save actions that we need to use are personal_options_update and edit_user_profile_update.

We can then use the global $_POST variable to get the input fields from the user profile page and update the user meta information with these input fields. To update the user meta data we need to use the WordPress function update_user_meta().

update_user_meta( $user_id, $meta_key, $meta_value, $prev_value );

This function can take 4 parameters:

  • $user_id
  • $meta_key
  • $meta_value
  • $prev_value
add_action( 'personal_options_update', 'save_extra_social_links' );
add_action( 'edit_user_profile_update', 'save_extra_social_links' );

function save_extra_social_links( $user_id )
{
    update_user_meta( $user_id,'facebook_profile', sanitize_text_field( $_POST['facebook_profile'] ) );
    update_user_meta( $user_id,'twitter_profile', sanitize_text_field( $_POST['twitter_profile'] ) );
    update_user_meta( $user_id,'google_profile', sanitize_text_field( $_POST['google_profile'] ) );
}

Display User Fields

If you want to display this information within your theme then there are two functions that you can use to get this data, you can either use the function the_author_meta( $field, $userID ) or the function get_the_author_meta( $field, $userID ) the difference between these two functions is that get_the_author_meta() will return the data and the_author_meta() will echo the data on the screen.

// return the data
$twitter = get_the_author_meta( 'twitter_profile', $userID );

// echo the data
the_author_meta( 'twitter_profile', $userID );
Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Comments

  1. Hannes says:

    Hi,
    This is great, to me it is only working in the footer but not in the header?
    Do you have an idea?

    1. Paul says:

      It should be the same where ever you put it on your theme as it's using actions, so not sure why it will only work in one place.

  2. Steve says:

    Great article! Every other site I went to said "use plugin x" or "use plugin y" to add new fields to the user profile page. I am glad I found one that just gives me the code so I can include it in my plugins.

    Thanks for the concise example!

    1. Paul says:

      Thanks Steve, that's what I try to do here, show people how to write some of this functionality themselves. Too many people just go straight to install a plugin and they don't know what else it will add to their site. Creating the code yourself will allow you to know everything the code on your site does.

      1. Chuck says:

        Great write up! Got all I needed for a data integration project in about 5 minutes because of this. I updated the wp_users table with about 50 users from a custom written site's users table. From there, adding the user meta data (address, city, state, zip, etc) was a breeze because of this. Thank you very much!

  3. Craig says:

    Hi, just a thank you for this post! I have been hunting around for a solution like this for a while and this certainly gives a clear overview of how to do things I will be reading more of your blogs!

    Craig

  4. niels says:

    You saved me a lot of time, thanks mate!

  5. Fahid says:

    Thanks for this helping post. I really feel awesome when I found a lot of help by great WordPress community.

    Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *