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

Harish Kumar · · 9064 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:

How to Build Flutter App for any WordPress Site

Leaving a perfect digital footprint is crucial for brand growth. However, you may be here to find the optimal balance between mobile engagement and web traffic. It’s possible (...)
Narola Infotech

The Benefits of Using Hospital Management Software in 2024: A Guide for Healthcare Providers

In the ever-evolving healthcare landscape, integrating technology has become imperative for efficient and effective patient care. One such technological advancement that has revolutionized (...)
anika

Types of Web Applications With Examples And Industry Use Cases

Whether it’s about driving more revenue for your business or strengthening your branding game, an impactful online presence is crucial. To make sure this is done right, there (...)
Narola Infotech

How Can I Find Best WordPress Development Company In India 2023?

According to me there are various companies who are doing WordPress development but some of them are providing reliable word press development solutions.
Kenny William

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