Inicio > English > WordPress 3.4 and higher Custom Avatars the proper way

WordPress 3.4 and higher Custom Avatars the proper way

Domingo, 27 de enero de 2013

There is a new version of this that works with 3.51 read it here:  WordPress 3.51 the proper way to get custom avatars
There are about 1 million results in google to implement avatars, local avatars, remove gravatars, some even explain how to turn off all avatars from the back-end.

I had this project where i needed to:

  • Show Avatars
  • Remove calls to gravatar.com
  • Use local default Avatar
  • Add custom avatar for the blog users
  • Display Custom avatar for blog users
  • Display default avatar for unregistered commenter
  • Display custom avatar for comment replies


Buy me a beer

Digging for 3 days around google got me two posts which gave me the initial code:

Add default Custom Avatar: http://studio412design.com/custom-default-avatar-for-wp-comments

Custom Avatar Field by Bill Erickson: http://www.billerickson.net/wordpress-custom-avatar/

However the first one only allows to define a custom local default avatar. (Still calls gravatar.com and if nothing found displays a local image)
The second one only works properly on pages, while on comments shows the avatar of the author of the page for unregistered commenter.

During a few days struggling with code examples that did not completely solve my problem I decided to develop a solution myslef.
I dug into wp-includes/pluggable.php and after a struggle understood how WordPress was calling the avatars and what needed doing to get the results I wanted.

No core files should be modified and that was the hardest part.

So I came up with a nice modification in functions.php which i decided to convert in a plugin for the less savvy users.

To use it:

  • Download the file
  • extract the ZIP (1 folder: proper-avatars containing 2 files readme.txt and proper-avatars.php)
  • copy the folder to your /wordpress/wp-content/plugins folder
  • go to the admin area and start defining avatars for your users (the field is added at the end of user profiles)

Alternatively: copy the code at the end of the article in your functions.php file in your theme folder

The demo is available  on the main site: http://rockdio.org

<!--?php /* Plugin Name: Proper Custom Avatars Plugin URI: http://rockdio.org/ayudatech/wordpress-3-4-and-higher-custom-avatars-the-proper-way/ Description: Proper way of displaying Custom avatars, remove calls to http://gravatar.com, Use local default Avatar, Add custom avatar for the blog users,Display Custom avatar for blog users, Display default avatar for unregistered commenter, Display custom avatar for comment replies. Version: 0.1.0 License: GPL Author: Nathaniel Narvaez (RockDio.org) Author URI: http://rockdio.org */ /*===================================================================================  * Add default Custom Avatar   * @ http://studio412design.com/custom-default-avatar-for-wp-comments  * =================================================================================*/ add_filter( 'avatar_defaults', 'newgravatar' ); function newgravatar ($avatar_defaults) { $myavatar = get_bloginfo('stylesheet_directory').'/imagenes/escucha.jpg';		// Change this to point to where your custom 												// avatar is stored $avatar_defaults[$myavatar] = "Avatar de Rockdio"; 					// Change this to describe your Default Avatar return $avatar_defaults; }  /*===================================================================================  * Use Custom Avatar if Provided  * If no Avatar is found the default from the function above is used  * =================================================================================*/ function be_gravatar_filter($avatar, $id_or_email, $size, $default, $alt) { 	if (!is_object($id_or_email)) { 												//Returns the Local Avatar for Posts and Pages 			$custom_avatar = get_the_author_meta('be_custom_avatar'); 			if(!empty($custom_avatar)) 			$avatarfound = $custom_avatar; 			elseif(empty($custom_avatar)){ 												//Returns the Local Avatar for ADMIN AREA  				$id = $id_or_email; 				$custom_avatar = get_user_meta($id,'avatar',true);   				if(!empty($custom_avatar)){ 				$avatarfound = $custom_avatar; 				} 			} 		} 	elseif ( !empty($id_or_email--->user_id) ) {
												//Returns the Local Avatar for Comments
			$id = (int) $id_or_email->user_id;
			$user = get_userdata($id);
			if ( $user){
												//Returns the Local Avatar for comments if User has one
				$email = $user->user_email;
				$custom_avatar = get_user_meta($user,'be_custom_avatar',true);
				$avatarfound = $custom_avatar;
			}
		}
	elseif ( !empty($id_or_email->comment_author_email) ) {
												//Returns the DEFAULT Local Avatar for comments
			$email = $id_or_email->comment_author_email;
			$avatarfound = $default;
		}

	if ($avatarfound =='')
			$avatarfound = $default;

	$avatar = "</pre>
<img class="avatar avatar-{$size} photo" src="{$avatarfound}" alt="{$safe_alt}" width="{$size}" height="{$size}" />
<pre>";
	return $avatar;

}
add_filter('get_avatar', 'be_gravatar_filter', 1, 5);
//
print_r($custom_avatar)

/*===================================================================================
 * Add Custom Avatar Field @param object $user
 * @link http://www.billerickson.net/wordpress-custom-avatar/
 * =================================================================================*/
function be_custom_avatar_field( $user ) { ?></pre>
<h3>Custom Avatar</h3>
<table>
<tbody>
<tr>
<th><label for="be_custom_avatar">Custom Avatar URL:</label></th>
<td>
<input id="be_custom_avatar" style="width: 400px;" type="text" name="be_custom_avatar" value="<?php echo esc_attr( get_the_author_meta( 'be_custom_avatar', $user->ID ) ); ?>" />

 <span>Type in the URL of the image you'd like to use as your avatar. This will override your default Gravatar, or show up if you don't have a Gravatar.
<strong>Image should be 70x70 pixels.</strong></span></td>
</tr>
</tbody>
</table>
<pre>	<!--?php  } add_action( 'show_user_profile', 'be_custom_avatar_field' ); add_action( 'edit_user_profile', 'be_custom_avatar_field' );   /*===================================================================================  * Save Custom Avatar Field @param int $user_id @author Bill Erickson  * @link http://www.billerickson.net/wordpress-custom-avatar/  * =================================================================================*/ function be_save_custom_avatar_field( $user_id ) { 	if ( !current_user_can( 'edit_user', $user_id ) ) { return false; } 		update_usermeta( $user_id, 'be_custom_avatar', $_POST['be_custom_avatar'] ); } add_action( 'personal_options_update', 'be_save_custom_avatar_field' ); add_action( 'edit_user_profile_update', 'be_save_custom_avatar_field' ); ?-->

Author: Categories: English Tags:
  1. Nathan
    Viernes, 30 de agosto de 2013 a las 17:54 | #1

    @Trishah I am sorry mate, the way the plugin is implemented it will need a massive rewrite for doing what you want… I can try to put something together but as a different plugin as i dont want to break this one.

  2. Jueves, 29 de agosto de 2013 a las 00:39 | #2

    Your plugin is the best so far that I’ve tried, and I have literally tried all of them in the WP repository!

    I would like to change it a little so I can upload a directory of images and only allow users the ability to choose from those images with a radio button. How easy would this be to do? I’m willing to pay for such a feature.

    • Nathan
      Jueves, 29 de agosto de 2013 a las 06:32 | #3

      Hi thanks for the feedback, glad you liked the plugin.

      I will take a look at the code, and let you know if i can do that mod in a few lines

  3. Martes, 28 de mayo de 2013 a las 04:04 | #4

    Hi,
    Thank you for the great plugin :)
    Please tell me how to restrict the access to all media library. I’d like users to use only their own pictures and media files.
    Thank you in advance :)
    Best regards,
    Prolet

    • Nathan
      Domingo, 2 de junio de 2013 a las 12:10 | #5

      uh… the way the plugin works you type the url of the image… nothing to do with the images in your blog

  4. Domingo, 19 de mayo de 2013 a las 07:29 | #6

    Greetings from Carolina! I’m bored to tears at work so I decided to browse your blog on my iphone during lunch break. I really like the info you provide here and can’t wait to take a look when I get home. I’m surprised at how fast your blog loaded on my mobile .. I’m not even using WIFI, just 3G .. Anyhow, very good blog!

  5. Nathan
    Sábado, 11 de mayo de 2013 a las 09:42 | #7

    @zk send me a link to your site to see the problem

    @zk

  6. zk
    Sábado, 11 de mayo de 2013 a las 06:18 | #8

    Custom Avatar URL input is blank ,, must be Gravata display

  7. Nathan
    Viernes, 10 de mayo de 2013 a las 08:12 | #9

    @zk
    Español ?
    Français?

  8. zk
    Viernes, 10 de mayo de 2013 a las 07:43 | #10

    do not link text box > Gravata image display

    sorry poor english

  9. zk
    Jueves, 9 de mayo de 2013 a las 06:15 | #11

    @zk
    guest commenter Gravatar not display

    • Nathan
      Jueves, 9 de mayo de 2013 a las 08:27 | #12

      Hello I dont understand your question

  10. zk
    Jueves, 9 de mayo de 2013 a las 06:09 | #13

    zk :
    can you edit blank text box is display default gravata image??

    @zk

    zk :
    can you update, blank text box default display gravata image??

  11. Jueves, 25 de abril de 2013 a las 05:41 | #14

    nice

  12. Jueves, 4 de abril de 2013 a las 23:26 | #15

    Thank you Nathan your plugin works awesome on my website (Finally)
    i rated it 5 stars on wordpress with nick Marius84.
    Thank you again

  13. Lunes, 25 de marzo de 2013 a las 08:13 | #16

    @Nathan
    I can see the blue eye in my comment and your custom logo

  14. Lunes, 25 de marzo de 2013 a las 08:12 | #17

    @Nathan
    Here is an example of the replies http://revisiongroup.net/?p=4596
    I am using wordpress 3.5.1
    the plugin is 1.0.2 from plugin installer in the wordpress
    It is using the basic way load the comment form using wp_list_comments();

  15. Sábado, 23 de marzo de 2013 a las 02:27 | #18

    Hi, I am using you plugin to make the custom avatar, But it won’t show correctly in the comment part, will you update the plugin to make it possible to show in comment part??

    Thanks for creating the plugin!!

    • Nathan
      Sábado, 23 de marzo de 2013 a las 08:49 | #19

      Hi can you see a custom avatar here in your comment ?
      Where did you get the plugin from ?
      What version of WordPress are you using?
      What theme ?

      It is the first time someone has this problem so i need more information

  1. Miércoles, 30 de enero de 2013 a las 09:55 | #1