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

Harish Kumar · · 161 Views

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

Please login or create new account to add your comment.

0 comments
You may also like:

Use Transients API Caching and Speed Up Your WordPress Theme.

The Transients API in WordPress is an effective method for saving cached data in the database. It allows us to take resource-intensive queries and store them in short-term caches (...)
Harish Kumar

Remove api.w.org REST API/JSON API from WordPress header.

WordPress uses the REST API since edition 4.4 of the CMS. It allows developers to interact with the WordPress back-end more quickly since this API is a standard way to connect. (...)
Harish Kumar

WordPress: How to Fix Missing required field entry-title, Update, hCard Error in Google Structured Data tool.

Recently when I tested one of my WordPress weblogs via Google Structured Data testing tools, I got the following errors:
Harish Kumar

How to fetch Any post with WP_Query in WordPress?

WP_Query is your buddy. It allows you to get content from the database according to your requirements. In this article, I will explain top to bottom about how WP_Query works. let’s (...)
Harish Kumar

How to Enable Featured Image in WordPress?

Featured Images or Post Thumbnails is a theme feature. Most themes such as Genesis and other themes support featured images by default. A great way to determine whether your theme (...)
Harish Kumar

Extend the where clause in WordPress WP_Query

In WordPress, sometimes needing to modify WP_Query class to interact with your database. For example, let's say you want to find all posts that the title would contain a specific (...)
Harish Kumar