How to Add Custom User Profile (User meta) Fields In WordPress

When you are focusing on tasks that need user management, and you need to add more fields for the user. In that case, here user meta functionality is used. This is similar to creating new post metadata where you are able to make new pieces of data and attach them to your post, the users’ meta can work in exactly the same way.

In the WordPress database, there is a table known as wp_usermeta which stores all extra information that is attached to the user profile. This table has a unique ID, the user ID, meta name, and meta values columns. The structure of this table means you can add as many extra fields to the user account as required.

In this article, we are going to add new custom fields (social links) to a user profile.

In wp-admin/user-edit.php, there two actions i.e. 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 user profile page. The below code will allow us to add new fields that we can use to add different social media URLs to the user.

add_action( 'show_user_profile', 'erweb_add_extra_social_links' );
add_action( 'edit_user_profile', 'erweb_add_extra_social_links' );
 
function erweb_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
}

This above code will add three text input boxes to the user profile page. In this above code get_the_author_meta() WordPress function is used. That function populates with the saved data, or in other worlds returns the metadata stored against the user profile.

get_the_author_meta() function requires two parameters the first is the name of the field, the second parameter is the ID of the user.

<?php 
   get_the_author_meta( $field, $userID ); 
?>

Saving User Profile Fields

Now we need to add a new action to save this new user meta fields data, 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 when the form is submitted and then update the user meta details with these input fields. To update the user metadata we need to use the WordPress function update_user_meta().

<?php 
    update_user_meta( $user_id, $meta_key, $meta_value, $prev_value ); 
?>

In this syntax we can see update_user_meta() function can take 4 parameters.

Here is an example code where we are saving social media links in user meta fields.

add_action( 'personal_options_update', 'erweb_save_extra_social_links' );
add_action( 'edit_user_profile_update', 'erweb_save_extra_social_links' );
 
function erweb_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 meta info within Wordpress theme then there are two functions that can be used to get this data, first is the_author_meta( $field, $userID ) and second is get_the_author_meta( $field, $userID ). The only difference between these two functions is that get_the_author_meta() will return the data and the_author_meta() will echo the data.

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