How to Add a Custom WordPress Avatar

by

There is a How-to video at the end of the post.

An avatar is a way to help brand yourself. It is usually a logo or picture of yourself that shows up when you leave a comments in a blog post.

With WordPress, they give the ability to default a user’s Gravatar account when they comment with the associated email address.

Here is an example:

But if a person leaves a comment on your blog with an associated Gravatar account or mistypes the proper email account, a default WordPress avatar is used.

You, the site owner, have the ability to choose what WordPress avatar you want to default. This will show when a person without a custom avatar leaves a comment on your blog. This can be found on your Discussion Settings tab in the dashboard.

Custom WordPress Avatar

While having a choice of monster IDs and retro designs is nice, a site owner needs a custom WordPress avatar.

After creating a 80 x 80 pixel image, save it as a .png file. Upload it into your BlueHost cpanel image folder.

Go into Apprearance > Editor > functions.php file. Make a copy of it and paste it into notepad (just incase you make a mistake or you run into technical issues, you’ll have a copy of the original file).

Add this code:


add_filter( 'avatar_defaults', 'new_avatar' );
function new_avatar($avatar_defaults){
$new_avatar = get_stylesheet_directory_uri() . '/images/avatar_logo.png';
$avatar_defaults[$new_avatar] = "My Kick Ass Christine.biz Logo";
return $avatar_defaults;
}

below this code:

<?php
// Start the engine
require_once(TEMPLATEPATH.’/lib/init.php’);

Replace ‘/images/avatar_logo.png’ in the above code with your image file name.
Replace “My Kick Ass Christine.biz Logo” with your new avatar name (unless you want to keep it). ;)

So, what’s your custom WordPress avatar for your site look like? Leave me a link and I’ll come check it out.

Add a custom logo in your BlueHost cpanel today!
 

Did you enjoy this post? Sign up by email to receive my free blogging tips! No spam. I totally respect your privacy.

Print Friendly
Filed Under: Blogging Tagged With:
About Christine McCarthy

Social Media Enthusiast, Tech Geek & Whole Foods Lovin' | Here to discuss Internet Marketing, Blogging, Social Media & Search Engine Optimization | Twitter: @christinebiz | Facebook: ChristineBiz

Comments

  1. Suresh Khanal says:
    May 11, 2011 at 6:57 pm

    It would be nice to display custom avatar. I prefer something meaningful avatar than to use blog logo or blog owner’s image because this will confuse readers. The author’s comment should be distinct and reader’s image should not be blog logo or author’s.
    Suresh Khanal recently posted..Why you don’t love KeywordLuvMy Profile

    Reply
  2. Paul Salmon says:
    May 12, 2011 at 5:32 am

    Thanks for the tutorial. I created a custom avatar in the past, but eventually dropped it as it was too similar to the avatar tied to my comments. I’ll have to create a new one, and this post will come in handy since I will need to re-add the code to my theme.

    If you are active online, it is important to have your own avatar to help establish your brand online.
    Paul Salmon recently posted..5 Biggest Internet Marketing ScamsMy Profile

    Reply
  3. Rojish says:
    May 14, 2011 at 12:46 am

    I was just looking for this and I found your article in Blokube. Now I am going to implement this in my blog.
    First I have to create a custom avatar.

    Thanks for the article Christine :)
    Rojish recently posted..The Friday Coffee – Interview with Daniel Scocco of DailyBlogTipsMy Profile

    Reply
  4. Nik says:
    June 12, 2011 at 11:48 am

    The first person who can write a plug-in to simplify this will have lots of installs. Always wondered but this is rather complex. What do you think Christine? Up for writing a plug-in? I would install it.

    Nik
    Nik recently posted..Hotel Chocolat to expand | BusinessMy Profile

    Reply
  5. Chris Chisu says:
    June 27, 2011 at 12:31 pm

    Hello Christine, Just curious as i am ready to install my new personal picture avatar.
    After going to functions.php:
    - Where more exactly do i have to introduce the line code?
    Before the code lines already there?
    Below the line codes already there?
    Please let me know.

    Thanks
    Chris Chisu recently posted..Photography, Rainier and dead treeMy Profile

    Reply
  6. Chris Chisu says:
    June 28, 2011 at 5:41 am

    Hello Christine

    I had to rely at signing with Gravatar services in order to make my avatar available. I think it is because i am using a different WP theme and i was unable to find the line of code you have posted from your Genesis theme.
    But as long as it works is fine with me.
    And thank you for your tutorials.
    Chris Chisu recently posted..Photography, Rainier and dead treeMy Profile

    Reply
    • Christine McCarthy says:
      June 28, 2011 at 9:35 am

      Ah, you are talking about for comments to other people’s site. Gravatar is great and easy to implement. And if you reply to someone’s comments on your site it the Gravatar profile will be used.

      This tut will come in handy to set an avatar for those people who come to your site to comment and do not have a gravatar profile. It will replace the default Avatar settings and replace it with something more custom. If you would like you can email me your function.php file code and I can tell you where to implement it. Either drop it in the contact box or email me at christine @ christine [dot] biz.
      Christine McCarthy recently posted..Even Bloggers Need a Strategic Business PlanMy Profile

      Reply
  7. don cox says:
    July 10, 2011 at 10:44 am

    i added my avatar and it works for comments…but i am interested in having the image showing up in my wordpress blog next to the “user” of the post. any suggestions?

    Reply
  8. bdkamol says:
    August 12, 2011 at 9:50 pm

    I have successfully finished by following your tutorial. Thnx 4 sharing.

    Reply
  9. tim says:
    October 24, 2011 at 5:16 pm

    hi there,

    good post … i can see my custom avatar with the comment on the wordpress dashboard, but it still shows the default gravatar logo on my website … any ideas why?

    Reply
    • Christine McCarthy says:
      October 24, 2011 at 8:32 pm

      try clearing your cache or in Chrome you can hit Ctrl+shift+N to open the incognito browser (doesn’t leave a cookie) to view . or try leaving a new comment. Let me know if that works.
      Christine McCarthy recently posted..5 Reasons Why Captain America Should Be a Blogger My Profile

      Reply
      • tim says:
        October 25, 2011 at 5:28 am

        hi – thanks for the quick reply Christine … clearing cache did not work – and icognito browser did not work either …

        Reply
      • tim says:
        October 25, 2011 at 1:09 pm

        hi Christine,

        i am not a code guy, but i found the fix.

        in addition to your code (which works perfectly) one has to add the following in the functions.php file:

        there should be an existing line of code that says:

        <?php echo get_avatar($comment, $size='65', $default='’); ?>

        you have to replace with the url of where your image is stored, otherwise your theme will still grab the gravatar instead of your custom avatar:

        do this, and the custom avatar shows up on your website.

        thanks again

        Reply
        • Christine McCarthy says:
          November 5, 2011 at 9:20 pm

          I had to go check mine. LOL.

          I have:
          add_filter( ‘avatar_defaults’, ‘new_avatar’ );
          function new_avatar($avatar_defaults){
          $new_avatar = get_stylesheet_directory_uri() . ‘/images/avatar_logo.png’;
          $avatar_defaults[$new_avatar] = “My Kick Ass Christine.biz Logo”;
          return $avatar_defaults;
          }

          where by ‘/images/avatar_logo.png’ is where my logo is stored w/ my hosting co BlueHost.

          But didn’t have the line you mentioned. So Thank you for the update. I am sure many people will benefit from it. For not being a code guy…that was pretty good. ;)
          Christine McCarthy recently posted..Hit “Send” too soon? How to retract Gmail messagesMy Profile

          Reply
  10. Erica M says:
    November 16, 2011 at 5:54 pm

    Christine,
    I am using Headway, which gets cranky during php modifications. Before I deleted your code after numerous tries, I was able to get everything but the actual logo image on the WP discussion settings page. Do you mind helping?

    lovelinks.freefringes.com

    Thank you!
    Erica
    Erica M recently posted..lovelinks #31 is openMy Profile

    Reply
  11. Jaime says:
    January 11, 2012 at 12:28 am

    Hi there…thanks for the informative video…I was unable to complete this successfully as I am new to wordpress and I uploaded a theme from cyberchimps and it doens’t work like that plus I have hosting at godaddy…any words of wisdom you could pardon for this newbie? Thanks in advance.
    Jaime recently posted..The SEOPressor PluginMy Profile

    Reply
  12. Ramzkie says:
    January 17, 2012 at 8:47 pm

    I used this in my blog… you can check this out: http://ramzkie.com/author/admin/
    Ramzkie recently posted..Sinulog 2012 List of WinnersMy Profile

    Reply
  13. Nelly Grey says:
    February 7, 2012 at 3:59 am

    Easy and simple steps to follow for a Custom Gravatar! Thanks Kristine :)
    Nelly Grey recently posted..hydrocodone acetaminophen 5 500My Profile

    Reply
  14. Osama says:
    March 4, 2012 at 9:47 am

    Bookmarked :p
    I implemented the changes but didn’t create avatar.
    Thanks if it works. :)

    Reply
  15. Dailyblogshout says:
    April 19, 2012 at 11:16 am

    I found this article through google and it helped me lot to show custom avatar on site. Thanks again for this wonderful article.
    Dailyblogshout recently posted..5 Plugins To Make Comments In WordPressMy Profile

    Reply
  16. Kristin says:
    April 23, 2012 at 9:28 am

    Hi Christine! Thanks for this post. I added my new avatar. Very easy instructions.
    I’m wondering if you know how to add 3 or 4 avatars so they alternate?

    Reply
  17. guideseeq says:
    May 31, 2012 at 2:06 pm

    Why not to use avatar plugin and get the avatar image upload feature in the edit profile section of WordPress.

    Reply
  18. Calee (@chimes) says:
    June 15, 2012 at 7:24 am

    Oh hai there lady! I came across this when I was trying to figure out a better commenting system. I’ve been using disqus and it’s not working for a lot of people.

    What comment system (plugins) do you have installed? Halp. :)
    Calee (@chimes) recently posted..Why I’m not a Mom at the Ripe Old Age of 27.My Profile

    Reply
  19. Myles says:
    July 17, 2012 at 7:27 am

    I don’t have a functions.php file :(

    Reply
    • Myles says:
      July 17, 2012 at 7:30 am

      I found it. They changed the name to “Theme Functions”. So do I add the code at the top of the html? or the bottom?

      Reply
  20. Dargson says:
    August 1, 2012 at 5:40 pm

    I can’t find code in my php can you please check this http://whatsnewtalk.com/wp-content/uploads/functions.txt
    I uploaded my image to /images/login_page_logo.png
    Thanks
    Dargson recently posted..How to Install Arch LinuxMy Profile

    Reply
  21. Mukesh Dutta says:
    November 2, 2012 at 9:19 pm

    I was wondering how to use a custom gravatar. Thanks to you for showing me a simple way to do it!
    Mukesh Dutta recently posted..3 Simple Yet Unique Website Ideas For Free! (Part-3)My Profile

    Reply

Speak Your Mind

*

CommentLuv badge