How to add a custom admin avatar in WordPress without having an avatar profile online!

This article was written by in September 18, 2013, & may not be posted on other sites!
Original source url for this article: How to add a custom admin avatar in WordPress without having an avatar profile online!

How to add a custom admin avatar in WordPress without creating a profile online. Every blog online tells you this is impossible, but it’s not! Maybe you want to add a custom avatar image specificly for one single WordPress site and not use this image all over internet. Maybe you want all your wordpress admins to have individual avatars without creating an avatar / gravatar profile online? This is how to do it with jQuery:

Add one or several custom avatars for admin profiles in WordPress.

  1. Create a custom avatar image. It should be sqare size and can be a .jpg or .png for example.
  2. Upload the custom avatar to your wordpress theme folder.
  3. Add this jQuery code to change the default avatar image. It is basically changing the image url path to whatever you want:
    $('.comment-author-yourUserName img').attr("src", "http://www.yoursite.com/custom-admin-avatar.jpg");
  4. The first code above is crucial, $('.comment-author-yourUserName) is the class of the specific admin-id, in this case “yourUserName“, this is the same name you use to login to the wordpress admin. You can also find the name in the wordpress admin under Users > Your profile.
  5. Don’t forget to change the image src to match your custom avatar images url.
  6. If you use Firebug or Chrome developer tools, you can see the unique author-class in the <li> element of the author comment.
  7. The jQuery code can be put in your child themes custom js-file, or in the footer.php before the closing </body> tag. In this case, add the script tag and the document.ready function:
    <script>
    jQuery(function ($) {
    $( document ).ready(function() {
    $('.comment-author-yourUserName img').attr("src", "http://www.yoursite.com/custom-admin-avatar.jpg");
    });
    });
    </script>

How to add a custom admin avatar in WordPress without having an avatar profile online!

 

Add a default custom WordPress avatar that will be used for every other user without an avatar image.

This image will be used when visitors without a custom avatar of their own leaves a comment. This is how to:

  1. You should always work with a childtheme or a custom theme in wordpress to avoid problems when updating (may cost overwrite).
  2. Create a custom avatar image, It should be sqare size and can be a .jpg or .png for example.
  3. Uppload the custom avatar image into your WordPress theme folder.
  4. Open your theme file > functions.php in a text-editor or through wordpress admin > appearance > editor. If you don’t have a functions.php file, create one and put it directly into your theme folder.
  5. Ad the following code to your functions.php file:
    <?php
    //custom avatar
    add_filter( 'avatar_defaults', 'custom_avatar' );
    function custom_avatar ($avatar_defaults) {
    $myavatar = get_stylesheet_directory_uri() . '/images/custom-avatar.jpg';
    $avatar_defaults[$myavatar] = "Custom Avatar";
    return $avatar_defaults;
    }
    ?>
  6. Make sure the file path above matches your custom avatar image url.
  7. Save or upload your functions.php.
  8. Inside the WordPress admin, click on settings > discussion and scroll down to the bottom section “Avatars”. Your custom avatar should be displayed, just select it and save.

Spread the word

Facebooktwittergoogle_pluslinkedinmail

2 thoughts on “How to add a custom admin avatar in WordPress without having an avatar profile online!

  1. haxor Post author

    Hi, are you trying to change your admin image? I saw that the Dzonia theme is missing the .comment-meta class. Try this code in the bottom of your footer.php, put it inside script-tags:

    jQuery(function ($) {
    $( document ).ready(function() {
    $(‘.comment-author-user img’).attr(“src”, “www.yoursite.com/custom-avatar.jpg”);
    });
    });

    Change the word “user” in .comment-author-user to your username, and change the img url to your custom avatar url.

Leave a Reply

Your email address will not be published. Required fields are marked *