WordPress WP Forms user profile update form

Allow users to update their profiles with WP Forms.

The code snippet below demonstrates how to create a custom user profile update form using WP Forms in WordPress. This form allows users to update their profile information such as name, email, and bio.

function wpsnippets_user_profile_update_form() {
    // Check if the user is logged in
    if ( is_user_logged_in() ) {
        // Get the current user's ID
        $user_id = get_current_user_id();

        // Get the current user's data
        $user_data = get_userdata( $user_id );

        // Create a new instance of WP Forms
        $form = new WP_Forms_Form( 'user-profile-update-form' );

        // Add form fields
        $form->add_field( 'text', 'name', array(
            'label' => 'Name',
            'value' => $user_data->display_name,
        ) );

        $form->add_field( 'email', 'email', array(
            'label' => 'Email',
            'value' => $user_data->user_email,
        ) );

        $form->add_field( 'textarea', 'bio', array(
            'label' => 'Bio',
            'value' => $user_data->description,
        ) );

        // Add a submit button
        $form->add_field( 'submit', 'submit', array(
            'label' => 'Update Profile',
        ) );

        // Display the form
        echo $form->display();
    }
}

To use this code snippet, you need to have the WP Forms plugin installed and activated on your WordPress site. After adding this code to your theme’s functions.php file or a custom plugin, you can use the wpsnippets_user_profile_update_form() function to display the user profile update form on any page or template.

The form is created using the WP_Forms_Form class and various field types are added using the add_field() method. The get_current_user_id() function is used to get the current user’s ID, and the get_userdata() function is used to retrieve the user’s data. The form fields are pre-populated with the user’s current information, and the form is displayed using the display() method.

Examples

Example 1: Customizing the WP Forms user profile update form

This use case demonstrates how to customize the WP Forms user profile update form by adding additional fields and modifying the form layout.

function wpsnippets_custom_user_profile_form( $form_html, $user ) {
    // Add a new field to the form
    $form_html .= '<label for="phone_number">Phone Number</label>';
    $form_html .= '<input type="text" name="phone_number" id="phone_number" value="' . esc_attr( get_user_meta( $user->ID, 'phone_number', true ) ) . '" />';

    // Modify the form layout
    $form_html = str_replace( '<p class="form-submit">', '<p class="form-submit" style="text-align: center;">', $form_html );

    return $form_html;
}
add_filter( 'wpforms_user_profile_form_html', 'wpsnippets_custom_user_profile_form', 10, 2 );

In this code example, we use the wpforms_user_profile_form_html filter to customize the WP Forms user profile update form. We add a new field for the phone number and modify the form layout by center-aligning the submit button.

Example 2: Validating and saving custom fields in the WP Forms user profile update form

This use case demonstrates how to validate and save custom fields added to the WP Forms user profile update form.

function wpsnippets_save_custom_user_profile_fields( $user_id ) {
    if ( ! current_user_can( 'edit_user', $user_id ) ) {
        return;
    }

    if ( isset( $_POST['phone_number'] ) ) {
        update_user_meta( $user_id, 'phone_number', sanitize_text_field( $_POST['phone_number'] ) );
    }
}
add_action( 'personal_options_update', 'wpsnippets_save_custom_user_profile_fields' );
add_action( 'edit_user_profile_update', 'wpsnippets_save_custom_user_profile_fields' );

In this code example, we use the personal_options_update and edit_user_profile_update actions to save the custom field data when the user profile is updated. We check if the current user has the necessary permissions and then update the phone_number user meta field with the sanitized value from the form.

Example 3: Displaying custom fields in the WP Forms user profile update form

This use case demonstrates how to display the custom fields added to the WP Forms user profile update form in the user profile page.

function wpsnippets_display_custom_user_profile_fields( $user ) {
    ?>
    <h3>Additional Information</h3>
    <table class="form-table">
        <tr>
            <th><label for="phone_number">Phone Number</label></th>
            <td>
                <input type="text" name="phone_number" id="phone_number" value="<?php echo esc_attr( get_user_meta( $user->ID, 'phone_number', true ) ); ?>" class="regular-text" />
            </td>
        </tr>
    </table>
    <?php
}
add_action( 'show_user_profile', 'wpsnippets_display_custom_user_profile_fields' );
add_action( 'edit_user_profile', 'wpsnippets_display_custom_user_profile_fields' );

In this code example, we use the show_user_profile and edit_user_profile actions to display the custom field in the user profile page. We output the field within a table row with a label and input field, pre-populating the value with the existing phone_number user meta value.