Custom avatar images in WordPress
This is a short walktrough on how to let your website users upload their own avatars, without using a plugin.
First, define the maximum image sizes (note that we will only downsize, smaller images will get browser-resized):
define('MAX_AVATAR_WIDTH', 96);
define('MAX_AVATAR_HEIGHT', 96);
This goes in the child theme’s functions-user.php file.
Next, create the form which lets users upload the image. I chose the author.php template here, but you can easily add it inside the dashboard trough some hooks.
<?php if(is_user_logged_in() && get_current_user_id() === (int)get_query_var('author')): ?>
<form method="POST" enctype="multipart/form-data" action="">
<input type="file" name="user_avatar" />
<input type="hidden" name="action" value="wp_handle_upload" />
<input type="submit" value="Upload new Avatar" />
</form>
<?php endif; ?>
The actual upload processing. You can have this in the same author template before get_header(), or inside the child theme’s functions:
if(is_user_logged_in() && isset($_FILES['user_avatar'])){
// we need this for the wp_handle_upload function
require_once ABSPATH.'wp-admin/includes/file.php';
// ID of the current user
$current_user_id = get_current_user_id();
// just be aware that GIFs are annoying as fuck
$allowed_image_types = array(
'jpg|jpeg|jpe' => 'image/jpeg',
'png' => 'image/png',
'gif' => 'image/gif',
);
// let wp do the upload checks, file moving etc.
$status = wp_handle_upload($_FILES['user_avatar'], array('mimes' => $allowed_image_types));
// no errors? Get the uploaded file path and resize it
if(empty($status['error'])){
// resize it
$resized = image_resize($status['file'], MAX_AVATAR_WIDTH, MAX_AVATAR_HEIGHT, $crop = true);
// resize failed, display the reason
if(is_wp_error($resized))
wp_die($resized->get_error_message());
// determine the resized file URL
$uploads = wp_upload_dir();
$resized_url = $uploads['url'].'/'.basename($resized);
// insert the file URL into the current user meta
update_user_meta($current_user_id, 'custom_avatar', $resized_url);
// error, show it
}else{
wp_die(sprintf(__('Upload Error: %s'), $status['error']));
}
}
Finally, hook into the avatar display function and get the avatar user meta field:
add_filter('get_avatar', 'custom_avatars', 10, 3);
function custom_avatars($avatar, $id_or_email, $size){
if(is_user_logged_in()){
$current_user = wp_get_current_user();
$image_url = get_user_meta($current_user->ID, 'custom_avatar', true);
if($user_avatar !== false)
return '<img src="'.$image_url.'" class="avatar photo" width="'.$size.'" height="'.$size.'" alt="'.$current_user->display_name .'" />';
}
return $avatar;
}