Add Custom User Fields To User Profile Page

In a previous article I explained how you can modify the contact information on the WordPress User profile page, but what if you want to know more custom information from the user that requires more that just a text field. In this tutorial we are going to look at how we can add new fields to the User profile page to collect custom information that requires a dropdown or checkbox. There are 4 WordPress actions that we need to use in this tutorial:

• show_user_profile - Used on the "Your Profile" page.
• edit_user_profile - Used on the "Edit User" page.
• personal_options_update - Runs on the page load of the "Your Profile" page, use to process the form submissions.
• edit_user_profile_update - Runs on the page load of the "Edit User" page, use to process the form submissions.

For this tutorial we are going to use OOP and create a PHP class that will handle this customisation, when working with OOP with WordPress it's best practice to place the add_action() or add_filter() functions in the constructor of the class.

class Add_New_User_Profile_Fields
{
    public function __construct()
    {
        // add actions for the profile customisation
        add_action( 'personal_options_update', array($this, 'update_custom_profile') );
        add_action( 'edit_user_profile_update', array($this, 'update_custom_profile') );

        add_action('show_user_profile', array($this, 'add_custom_profile_fields'));
        add_action('edit_user_profile', array($this, 'add_custom_profile_fields'));
    }

    /**
     * Add new custom fields to the profile page
     *
     * @param $profileuser
     */
    public function add_custom_profile_fields( $profileuser )
    {
        // add new custom profile fields
    }

    /**
     * Update new fields on the user profile page
     *
     * @param $user_id
     */
    public function update_custom_profile( $user_id )
    {
        // code to validate and update the user data
    }
}

To use this in your site you can either turn this into a plugin or include the file from your theme functions.php and instantiate the class.

#Add New Fields To Profile Page

To add new fields to the profile pages we need to use the actions show_user_profile and edit_user_profile which will both run the same function add_custom_profile_fields. From here we can simply add any HTML we want to create these new custom form fields.

    /**
     * Add new custom fields to the profile page
     *
     * @param $profileuser
     */
    public function add_custom_profile_fields( $profileuser )
    {
        $customData = get_user_meta( $profileuser->ID, 'custom_user_fields', true );
        ?>
        <h2><?php _e('Custom User Profile Fields'); ?></h2>
        <table class="form-table">
            <tr>
                <th><label for="custom_user_fields_textbox"><?php _e('Custom Textbox'); ?></label></th>
                <td><input type="text" name="custom_user_fields_textbox" id="custom_textbox" value="<?php echo if(isset($customData['textbox'])){ echo esc_attr($customData['textbox']); } ?>" class="regular-text" /></td>
            </tr>

            <tr>
                <th><label for="custom_user_fields_select"><?php _e('Custom Select'); ?></label></th>
                <td>
                    <select name="custom_user_fields_select" id="custom_select">
                        <option value="">Please Select</option>
                        <option value="1" <?php if(isset($customData['select'])){ selected($customData['select'], 1); } ?>>Select Value 1</option>
                        <option value="2" <?php if(isset($customData['select'])){ selected($customData['select'], 2); } ?>>Select Value 2</option>
                        <option value="3" <?php if(isset($customData['select'])){ selected($customData['select'], 3); } ?>>Select Value 3</option>
                        <option value="4" <?php if(isset($customData['select'])){ selected($customData['select'], 4); } ?>>Select Value 4</option>
                        <option value="5" <?php if(isset($customData['select'])){ selected($customData['select'], 5); } ?>>Select Value 5</option>
                    </select>
                </td>
            </tr>

            <tr>
                <th><label for="custom_user_fields_checkbox"><?php _e('Custom Checkbox'); ?></label></th>
                <td><input type="checkbox" name="custom_user_fields_checkbox" id="custom_checkbox" value="1" <?php if(isset($customData['checkbox'])){ checked($customData['checkbox'], 1); } ?>/></td>
            </tr>
        </table>
    &lt;?php
    }

First we start off by getting the current values in the database for the user. Like posts, WordPress allows you to store extra information to the users of the application, this is called User meta. When we are saving the data we will need to store this onto the user meta information. Therefore we are going to use the function get_user_meta() to get the custom user fields that we are creating. This will return an array of the custom field data from the database, we will use this data to populate the form. Next in this code we simply create the form fields in HTML of all the information that we want. With this code in your class you should be able to go to the profile page and see the new fields towards the bottom of the profile page.

#Save Profile Fields

With the fields now on show on the user profile page we need to process this information and save it on to the user meta information. On the save button of the profile page it will POST the form back to itself and process the values, this is why we can hook into the actions personal_options_update and edit_user_profile_update to process the new User fields. The below code will check to see if the form field has been posted it will then sanitize the input and store the value in an array. After all the fields are processed into this array we can then take this variable and store it against the user meta using the function update_user_meta().

    /**
     * Update new fields on the user profile page
     *
     * @param $user_id
     */
    public function update_custom_profile( $user_id )
    {
        $userData = array();

        if(!empty( $_POST['custom_user_fields_textbox'] ))
        {
            $userData['textbox'] = sanitize_text_field( $_POST['custom_user_fields_textbox'] );
        }

        if(!empty( $_POST['custom_user_fields_select'] ))
        {
            $userData['select'] = sanitize_text_field( $_POST['custom_user_fields_select'] );
        }

        if(!empty( $_POST['custom_user_fields_checkbox'] ))
        {
            $userData['checkbox'] = intval( $_POST['custom_user_fields_checkbox'] );
        }

        if(!empty($userData))
        {
            update_user_meta( $user_id, 'custom_user_fields', $userData);
        }
    }

That's it, you can now create custom form fields and store them against the user meta to use in other places of your website.