Use any image from your WordPress Media Library as a custom user avatar or user profile picture. Add your own Default Avatar.
WordPress currently only allows you to use custom avatars that are uploaded through Gravatar. One User Avatar enables you to use any photo uploaded into your Media Library as an avatar. This means you use the same uploader and library as your posts. No extra folders or image editing functions are necessary. This plugin is a fork of WP User Avatar v2.2.16.
One User Avatar also lets you:
[avatar_upload]
shortcode to add a standalone uploader to a front page or widget. This uploader is only visible to logged-in users.[avatar]
shortcode in your posts. These shortcodes will work with any theme, whether it has avatar support or not.One User Avatar
Copyright (c) 2023 One Designs https://onedesigns.com/
License: GPLv2
Source: https://github.com/onedesigns/one-user-avatar
One User Avatar is based on WP User Avatar v2.2.16
Copyright (c) 2020-2021 ProfilePress https://profilepress.net/
Copyright (c) 2014-2020 Flippercode https://www.flippercode.com/
Copyright (c) 2013-2014 Bangbay Siboliban http://bangbay.com/
License: GPLv2
Source: https://github.com/profilepress/wp-user-avatar
One User Avatar is distributed under the terms of the GNU GPL
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You can use the [avatar_upload] shortcode to add a standalone uploader to any page. It’s best to use this uploader by itself and without other profile fields.
If you’re building your own profile edit page with other fields, One User Avatar is automatically added to the show_user_profile and edit_user_profile hooks. If you’d rather have One User Avatar in its own section, you could add another hook:
do_action( 'edit_user_avatar', $current_user );
Then, to add One User Avatar to that hook and remove it from the other hooks outside of the administration panel, you would add this code to the functions.php
file of your theme:
function my_avatar_filter() { // Remove from show_user_profile hook remove_action( 'show_user_profile', array( 'wp_user_avatar', 'wpua_action_show_user_profile' ) ); remove_action( 'show_user_profile', array( 'wp_user_avatar', 'wpua_media_upload_scripts' ) ); // Remove from edit_user_profile hook remove_action( 'edit_user_profile', array( 'wp_user_avatar', 'wpua_action_show_user_profile' ) ); remove_action( 'edit_user_profile', array( 'wp_user_avatar', 'wpua_media_upload_scripts' ) ); // Add to edit_user_avatar hook add_action( 'edit_user_avatar', array( 'wp_user_avatar', 'wpua_action_show_user_profile' ) ); add_action( 'edit_user_avatar', array( 'wp_user_avatar', 'wpua_media_upload_scripts' ) ); } // Loads only outside of administration panel if ( ! is_admin() ) { add_action( 'init','my_avatar_filter' ); }
You can change the HTML wrapper of the One User Avatar section by using the functions wpua_before_avatar
and wpua_after_avatar
. By default, the avatar code is structured like this:
<div class="wpua-edit-container"> <h3>Avatar</h3> <input type="hidden" name="wp-user-avatar" id="wp-user-avatar" value="{attachmentID}" /> <p id="wpua-add-button"> <button type="button" class="button" id="wpua-add" name="wpua-add">Edit Image</button> </p> <p id="wpua-preview"> <img src="{imageURL}" alt="" /> Original Size </p> <p id="wpua-thumbnail"> <img src="{imageURL}" alt="" /> Thumbnail </p> <p id="wpua-remove-button"> <button type="button" class="button" id="wpua-remove" name="wpua-remove">Default Avatar</button> </p> <p id="wpua-undo-button"> <button type="button" class="button" id="wpua-undo" name="wpua-undo">Undo</button> </p> </div>
To strip out the div container and h3 heading, you would add the following filters to the functions.php
file in your theme:
remove_action( 'wpua_before_avatar', 'wpua_do_before_avatar' ); remove_action( 'wpua_after_avatar', 'wpua_do_after_avatar' );
To add your own wrapper, you could create something like this:
function my_before_avatar() { echo '<div id="my-avatar">'; } add_action( 'wpua_before_avatar', 'my_before_avatar' ); function my_after_avatar() { echo '</div>'; } add_action( 'wpua_after_avatar', 'my_after_avatar' );
This would output:
<div id="my-avatar"> <input type="hidden" name="wp-user-avatar" id="wp-user-avatar" value="{attachmentID}" /> <p id="wpua-add-button"> <button type="button" class="button" id="wpua-add" name="wpua-add">Edit Image</button> </p> <p id="wpua-preview"> <img src="{imageURL}" alt="" /> <span class="description">Original Size</span> </p> <p id="wpua-thumbnail"> <img src="{imageURL}" alt="" /> <span class="description">Thumbnail</span> </p> <p id="wpua-remove-button"> <button type="button" class="button" id="wpua-remove" name="wpua-remove">Default Avatar</button> </p> <p id="wpua-undo-button"> <button type="button" class="button" id="wpua-undo" name="wpua-undo">Undo</button> </p> </div>
get_avatar
with get_wp_user_avatar
or leave get_avatar
as-is. Read about the differences here.[avatar_upload]
and [avatar]
shortcodes in your posts. These shortcodes will work with any theme, whether it has avatar support or not.Warning
If you are using One User Avatar to replace an existing installation of WP User Avatar, do not delete the old WP User Avatar plugin from the WordPress plugin administration screen, otherwise you will lose all your existing avatars. Instead, deactivate the WP User Avatar plugin and then manually delete it using FTP. If you can’t access your files directly, contact your hosting provider and ask them to delete it for you or simply leave the old plugin deactivated.
Example Usage
Within The Loop, you may be using:
<?php echo get_avatar( get_the_author_meta( 'ID' ), 96 ); ?>
Replace this function with:
<?php echo get_wp_user_avatar( get_the_author_meta( 'ID' ), 96 ); ?>
You can also use the values “original”, “large”, “medium”, or “thumbnail” for your avatar size:
<?php echo get_wp_user_avatar( get_the_author_meta( 'ID' ), 'medium' ); ?>
You can also add an alignment of “left”, “right”, or “center”:
<?php echo get_wp_user_avatar( get_the_author_meta( 'ID' ), 96, 'left' ); ?>
On an author page outside of The Loop, you may be using:
<?php $user = get_user_by( 'slug', $author_name ); echo get_avatar( $user->ID, 96 ); ?>
Replace this function with:
<?php $user = get_user_by( 'slug', $author_name ); echo get_wp_user_avatar( $user->ID, 96 ); ?>
If you leave the options blank, One User Avatar will detect whether you’re inside The Loop or on an author page and return the correct avatar in the default 96×96 size:
<?php echo get_wp_user_avatar(); ?>
The function get_wp_user_avatar
can also fall back to get_avatar
if there is no One User Avatar image. For this to work, “Show Avatars” must be checked in your One User Avatar settings. When this setting is enabled, you will see the user’s Gravatar avatar or Default Avatar.
For comments, you might have in your template:
<?php echo get_avatar($comment, 32); ?>
Replace this function with:
<?php echo get_wp_user_avatar($comment, 32); ?>
For comments, you must specify the $comment variable.
Other Available Functions
You can use the [avatar_upload]
shortcode to add a standalone uploader to a front page or widget. This uploader is only visible to logged-in users.
You can specify a user with the shortcode, but you must have edit_user
capability for that particular user.
[avatar_upload user="admin"]
You can use the [avatar]
shortcode in your posts. It will detect the author of the post or you can specify an author by username. You can specify a size, alignment, and link, but they are optional. For links, you can link to the original image file, attachment page, or a custom URL.
[avatar user="admin" size="medium" align="left" link="file" /]
You can also add a caption to the shortcode:
[avatar user="admin" size="medium" align="left" link="file"]Photo Credit: Your Name[/avatar]
Note: If you are using one shortcode without a caption and another shortcode with a caption on the same page, you must close the caption-less shortcode with a forward slash before the closing bracket: [avatar /]
instead of [avatar]
Works just like get_wp_user_avatar
but returns just the image src. This is useful if you would like to link a thumbnail-sized avatar to a larger version of the image:
<a href="<?php echo get_wp_user_avatar_src( $user_id, 'large' ); ?>"> <?php echo get_wp_user_avatar( $user_id, 'thumbnail' ); ?> </a>
Returns true if the user has a One User Avatar image. You must specify the user ID:
<?php if ( has_wp_user_avatar( $user_id ) ) { echo get_wp_user_avatar( $user_id, 96 ); } else { echo '<img src="my-alternate-image.jpg" />'; } ?>
First, choose a theme that has avatar support. In your theme, you have a choice of manually replacing get_avatar
with get_wp_user_avatar
, or leaving get_avatar
as-is. Here are the differences:
add_image_size
(fixed width and height are added to the image).get_avatar
.Read more about get_avatar in the WordPress Function Reference.
In your One User Avatar settings, you can upload your own Default Avatar.
In your One User Avatar settings, you can select “Disable Gravatar — Use only local avatars” to disable all Gravatar avatars on your site and replace them with your Default Avatar. This will affect your registered users and non-registered comment authors.
Yes, if you enable “Allow Contributors & Subscribers to upload avatars” in the One User Avatar settings. These users will see a slightly different interface because they are allowed only one image upload.
Yes, for registered users. Non-registered comment authors will show their Gravatar avatars or Default Avatar.
Yes!
No, BuddyPress has its own custom avatar functions and One User Avatar will override only some of them. It’s best to use BuddyPress without One User Avatar.
For Administrators, One User Avatar adds a column with avatar thumbnails to your Users list table. If “Show Avatars” is enabled in your One User Avatar settings, you will see avatars to the left of each username instead of in a new column.
Yes, you can use the [avatar_upload]
shortcode to put a standalone uploader in a front page or widget. This uploader is only visible to logged-in users..
You can specify a user with the shortcode, but you must have 'edit_user'
capability to change the user’s avatar.
[avatar_upload user="admin"]
You can use the [avatar]
shortcode in your posts. It will detect the author of the post or you can specify an author by username. You can specify a size, alignment, and link, but they are optional. For links, you can link to the original image file, attachment page, or a custom URL.
[avatar user="admin" size="96" align="left" link="file" /]
Outputs:
<a href="{fileURL}" class="wp-user-avatar-link wp-user-avatar-file"> <img src="{imageURL}" width="96" height="96" class="wp-user-avatar wp-user-avatar-96 alignleft" /> </a>
If you have a caption, the output will be similar to how WordPress adds captions to other images.
[avatar user="admin" size="96" align="left" link="file"]Photo Credit: Your Name[/avatar]
Outputs:
<div style="width: 106px" class="wp-caption alignleft"> <a href="{fileURL}" class="wp-user-avatar-link wp-user-avatar-file"> <img src="{imageURL}" width="96" height="96" class="wp-user-avatar wp-user-avatar-96" /> </a> <p class="wp-caption-text">Photo Credit: Your Name</p> </div>
Note: If you are using one shortcode without a caption and another shortcode with a caption on the same page, you must close the caption-less shortcode with a forward slash before the closing bracket: [avatar /]
instead of [avatar]
One User Avatar will add the CSS classes “wp-user-avatar” and “wp-user-avatar-{size}” to your image. If you add an alignment, the corresponding alignment class will be added:
<?php echo get_wp_user_avatar($user_id, 96, 'left'); ?>
Outputs:
<img src="{imageURL}" width="96" height="96" class="wp-user-avatar wp-user-avatar-96 alignleft" />
Note: “alignleft”, “alignright”, and aligncenter” are common WordPress CSS classes, but not every theme supports them. Contact the theme author to add those CSS classes.
If you use the values “original”, “large”, “medium”, or “thumbnail”, no width or height will be added to the image. This will give you more flexibility to resize the image with CSS:
<?php echo get_wp_user_avatar($user_id, 'medium'); ?>
Outputs:
<img src="{imageURL}" class="wp-user-avatar wp-user-avatar-medium" />
Note: WordPress adds more CSS classes to the avatar not listed here.
If you use the [avatar]
shortcode, One User Avatar will add the CSS class “wp-user-avatar-link” to the link. It will also add CSS classes based on link type.
Custom URL: wp-user-avatar-custom
[avatar user=”admin” size=”96″ align=”left” link=”attachment” /]
Outputs:
<a href="{attachmentURL}" class="wp-user-avatar-link wp-user-avatar-attachment"> <img src="{imageURL}" width="96" height="96" class="wp-user-avatar wp-user-avatar-96 alignleft" /> </a>
get_wp_user_avatar_src
: retrieves just the image URLhas_wp_user_avatar
: checks if the user has a One User Avatar image