How to Add Custom User Meta Field in WordPress Without Plugin

Are you looking to add a custom user meta field in WordPress without relying on a plugin? In this tutorial, we will walk you through the step-by-step process of achieving this task. Adding custom user meta fields can be useful when you need to store additional information about users beyond what is provided by default in WordPress. By following these instructions, you’ll know how to implement this functionality in your WordPress website.

To add a custom user meta field in WordPress without a plugin, follow these steps:

1. Create a function to generate the custom user meta field HTML code.
2. Add the custom user meta field to the user profile edit screen.
3. Save the custom user meta field data when the user profile is updated.

Follow the steps below to add a custom user meta field to your WordPress website:

Step 1: Add Custom User Meta Field Code

To begin, let’s create a function that generates the HTML code for our custom user meta field. Here’s an example of the code:

function custom_user_meta_field() {
    ?>
    <h3><?php _e('Custom Field', 'text-domain'); ?></h3>

    <table class="form-table">
        <tr>
            <th><label for="custom_field"><?php _e('Custom Field', 'text-domain'); ?></label></th>
            <td>
                <input type="text" name="custom_field" id="custom_field" value="<?php echo esc_attr(get_user_meta(get_current_user_id(), 'custom_field', true)); ?>" class="regular-text" />
            </td>
        </tr>
    </table>
    <?php
}

The above code creates a custom user meta field labeled “Custom Field” with an input text box. You can modify this code according to your specific requirements.

Step 2: Display Custom User Meta Field

Next, we need to display the custom user meta field on the user profile edit screen. To achieve this, we’ll use the show_user_profile and edit_user_profile action hooks. Add the following code to your theme’s functions.php file:

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

By adding these hooks, the custom user meta field will be displayed both when viewing and editing a user’s profile.

Step 3: Save Custom User Meta Field Data

Now that we have added the custom user meta field, we need to save its data when the user profile is updated. To accomplish this, we’ll use the personal_options_update and edit_user_profile_update action hooks. Add the following code to your theme’s functions.php file:

function save_custom_user_meta_field($user_id) {
    if (current_user_can('edit_user', $user_id)) {
        update_user_meta($user_id, 'custom_field', sanitize_text_field($_POST['custom_field']));
    }
}

add_action('personal_options_update', 'save_custom_user_meta_field');
add_action('edit_user_profile_update', 'save_custom_user_meta_field');

The above code checks if the current user has permission to edit the user profile and then updates the custom user meta field with the submitted data.

Conclusion

Congratulations! You have successfully learned how to add a custom user meta field in WordPress without relying on a plugin. By following the step-by-step instructions provided in this tutorial, you can easily extend the functionality of your WordPress website and store additional information about your users.

Remember, adding custom user meta fields can be highly beneficial when you need to gather specific information from your users beyond what is provided by default in WordPress. So go ahead and implement this feature in your WordPress website today!

If you have any questions or need further assistance, feel free to leave a comment below.