WP Forms user avatars

The code snippet below demonstrates how to display user avatars in WP Forms, a popular WordPress form plugin. This functionality can be useful when you want to personalize the user experience by showing avatars next to form submissions or user-generated content.

To achieve this, you can use the get_avatar() function provided by WordPress. This function retrieves the avatar URL for a given user email or ID. Here’s an example of how you can use it within WP Forms:

/**
 * Display user avatar in WP Forms
 */
function wpsnippets_wpforms_user_avatar( $fields, $entry ) {
    // Get the user email from the form submission
    $user_email = $entry['fields'][0]['value'];

    // Get the avatar URL using the user email
    $avatar_url = get_avatar_url( $user_email );

    // Add the avatar URL to the form fields
    $fields['avatar'] = array(
        'type'  => 'html',
        'value' => '<img src="' . esc_url( $avatar_url ) . '" alt="User Avatar" />',
    );

    return $fields;
}
add_filter( 'wpforms_process_entry_fields', 'wpsnippets_wpforms_user_avatar', 10, 2 );

In the code snippet above, we define a custom function wpsnippets_wpforms_user_avatar that hooks into the wpforms_process_entry_fields filter. This filter allows us to modify the form fields before they are processed.

Within the function, we retrieve the user email from the form submission using $entry['fields'][0]['value']. Then, we use the get_avatar_url() function to get the avatar URL based on the user email.

Next, we add a new field called ‘avatar’ to the form fields array. This field has a type of ‘html’ and its value is an HTML image tag with the avatar URL as the source.

Finally, we return the modified form fields array.

By adding this code snippet to your WordPress theme’s functions.php file or a custom plugin, you can display user avatars in WP Forms based on the user’s email provided in the form submission.

Examples

Example 1: Displaying User Avatars in WP Forms

This use case demonstrates how to display user avatars in WP Forms. The code example below retrieves the user’s avatar URL and displays it in a WP Forms field.

function wpsnippets_wpforms_user_avatar( $field, $form_data ) {
    if ( $field['id'] === 'avatar_field' ) {
        $user_id = get_current_user_id();
        $avatar_url = get_avatar_url( $user_id );
        $field['value'] = $avatar_url;
    }
    return $field;
}
add_filter( 'wpforms_field', 'wpsnippets_wpforms_user_avatar', 10, 2 );

In this code example, we use the wpforms_field filter to modify the field data before it is rendered. We check if the field ID matches the desired field where we want to display the avatar. If it does, we retrieve the current user’s ID using get_current_user_id() and get the avatar URL using get_avatar_url(). Finally, we update the field’s value with the avatar URL and return the modified field.

Example 2: Customizing User Avatars in WP Forms

This use case demonstrates how to customize user avatars in WP Forms. The code example below modifies the default avatar size and shape in WP Forms.

function wpsnippets_wpforms_custom_avatar( $avatar, $id_or_email, $size, $default, $alt ) {
    $avatar_size = 120;
    $avatar_shape = 'square';
    $avatar = get_avatar( $id_or_email, $avatar_size, $default, $alt, array( 'class' => $avatar_shape ) );
    return $avatar;
}
add_filter( 'get_avatar', 'wpsnippets_wpforms_custom_avatar', 10, 5 );

In this code example, we use the get_avatar filter to modify the avatar output. We set the desired avatar size and shape by updating the $avatar_size and $avatar_shape variables. Then, we use get_avatar() to generate the modified avatar with the specified size and shape. Finally, we return the customized avatar.

Example 3: Adding User Avatars to Email Notifications in WP Forms

This use case demonstrates how to add user avatars to email notifications in WP Forms. The code example below adds the user’s avatar image as an attachment to the email notification.

function wpsnippets_wpforms_email_avatar( $attachments, $fields, $form_data ) {
    $user_id = get_current_user_id();
    $avatar_url = get_avatar_url( $user_id );
    $avatar_path = str_replace( home_url(), ABSPATH, $avatar_url );
    $attachments[] = $avatar_path;
    return $attachments;
}
add_filter( 'wpforms_email_attachments', 'wpsnippets_wpforms_email_avatar', 10, 3 );

In this code example, we use the wpforms_email_attachments filter to add attachments to the email notification. We retrieve the current user’s ID using get_current_user_id() and get the avatar URL using get_avatar_url(). Then, we convert the avatar URL to a local file path using str_replace() and add it to the attachments array. Finally, we return the updated attachments array.