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

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 );