I am the administrator on my website, but I can't change the profile photo for any of my user's. It seems to be hooked up only to Gravatar.

How do I make it so I can change this photo myself ? Is there a function to do this ? I'd rather not have an entire plugin to do so.

I am the administrator on my website, but I can't change the profile photo for any of my user's. It seems to be hooked up only to Gravatar.

How do I make it so I can change this photo myself ? Is there a function to do this ? I'd rather not have an entire plugin to do so.

• javascript
• wordpress
• profile
• avatar

3 Answers 3

By default, WordPress uses Gravatar for displaying user’s profile picture based on your email ID registered with Gravatar. WordPress has user profile page in dashboard which contains number of fields for entering user data, but it lacks image field for adding custom user avatar.

We can customize user avatar in following steps:

Step 1: Add script to page.

In this step we will add necessary Javascript to admin pages. First we will call wp_enqueue_media which enqueues all scripts, styles, settings, and templates necessary to use all media JavaScript APIs.

Another script will be for opening media uploader on button click and to insert attachment id in DOM.

please copy following script into a file and name that file as uploader.js

    jQuery( document ).ready( function() {

    /* WP Media Uploader */
    var _shr_media = true;
    var _orig_send_attachment = wp.media.editor.send.attachment;

    jQuery( '.shr-image' ).click( function() {

        var button = jQuery( this ),
                textbox_id = jQuery( this ).attr( 'data-id' ),
                image_id = jQuery( this ).attr( 'data-src' ),
                _shr_media = true;

        wp.media.editor.send.attachment = function( props, attachment ) {

            if ( _shr_media && ( attachment.type === 'image' ) ) {
                if ( image_id.indexOf( "," ) !== -1 ) {
                    image_id = image_id.split( "," );
                    $image_ids = '';
                    jQuery.each( image_id, function( key, value ) {
                        if ( $image_ids )
                            $image_ids = $image_ids + ',#' + value;
                        else
                            $image_ids = '#' + value;
                    } );

                    var current_element = jQuery( $image_ids );
                } else {
                    var current_element = jQuery( '#' + image_id );
                }

                jQuery( '#' + textbox_id ).val( attachment.id );
                                console.log(textbox_id)
                current_element.attr( 'src', attachment.url ).show();
            } else {
                alert( 'Please select a valid image file' );
                return false;
            }
        }

        wp.media.editor.open( button );
        return false;
    } );
} );

Now, add noth scripts in admin as follows.

function shr_add_admin_scripts(){ 
        wp_enqueue_media();
        wp_enqueue_script('shr-uploader', get_stylesheet_directory_uri().'/js/uploader.js', array('jquery'), false, true );
    }
    add_action('admin_enqueue_scripts', 'shr_add_admin_scripts');

Please note that uploader.js is saved in js folder in this theme, so you have to apply correct path of according to location of uploader.js in your theme.

Step 2: Adding uploder button to edit profile page.

function shr_extra_profile_fields( $user ) {

    $profile_pic = ($user!=='add-new-user') ? get_user_meta($user->ID, 'shr_pic', true): false;

    if( !empty($profile_pic) ){
        $image = wp_get_attachment_image_src( $profile_pic, 'thumbnail' );

    } ?>

    <table class="form-table fh-profile-upload-options">
        <tr>
            <th>
                <label for="image"><?php _e('Main Profile Image', 'shr') ?></label>
            </th>

            <td>
                <input type="button" data-id="shr_image_id" data-src="shr-img" class="button shr-image" name="shr_image" id="shr-image" value="Upload" />
                <input type="hidden" class="button" name="shr_image_id" id="shr_image_id" value="<?php echo !empty($profile_pic) ? $profile_pic : ''; ?>" />
                <img id="shr-img" src="<?php echo !empty($profile_pic) ? $image[0] : ''; ?>" style="<?php echo  empty($profile_pic) ? 'display:none;' :'' ?> max-width: 100px; max-height: 100px;" />
            </td>
        </tr>
    </table><?php

}
add_action( 'show_user_profile', 'shr_extra_profile_fields' );
add_action( 'edit_user_profile', 'shr_extra_profile_fields' );
add_action( 'user_new_form', 'shr_extra_profile_fields' );

In above code, show_user_profile, edit_user_profile and user_new_form hooks are used to add upload button, so that button will be visible to existing user’s profile page as well as when creating new users.

Input button is to open WordPress media uploader on click. Input hidden field is to store attachment id of insersted or selected image from media uploader of WordPress.

Step 3: Save the attachment image id to usermeta table in WordPress.

Usermeta table in WordPress is to store extra information related to user, here we will store attachment id of image for the user. Using that attachment id we can fetch all the data of concerned image.

For saving attachment id we will use profile_update and user_register hooks which will be fired when any new user is created or existing user is updated.

function shr_profile_update($user_id){

    if( current_user_can('edit_users') ){
        $profile_pic = empty($_POST['shr_image_id']) ? '' : $_POST['shr_image_id'];
        update_user_meta($user_id, 'shr_pic', $profile_pic);
    }

}
add_action('profile_update', 'shr_profile_update');
add_action('user_register', 'shr_profile_update');

That’s it and you have successfully added profile pic uploader button to profile page in dashboard of WordPress.

Reference: http://sharethingz./wordpress/custom-user-avatar-in-wordpress/

Inorder to change the Profile Photo of the users in the admin panel of WordPress the plugin usage is the best and easy option.

Custom User Profile Photo

Add a customized User Profile photo to a WordPress user profile

https://wordpress/plugins/custom-user-profile-photo/

WP User Avatar

Use any image from your WordPress Media Library as a custom user avatar. Add your own Default Avatar.

https://wordpress/plugins/wp-user-avatar/

Try This code and put in function.php file

add_filter( 'avatar_defaults', 'wpb_new_gravatar' );
function wpb_new_gravatar ($avatar_defaults) {
$myavatar = 'http://pngimages/sites/default/files/user-png-image-15189.png';
$avatar_defaults[$myavatar] = "Default Gravatar";
return $avatar_defaults;
}