Add Custom Default Avatar To WordPress

elegant themes affiliate

In this post, I will share a simple code to help you add custom default avatar to wordpress websites. By default wordpress uses the gravatar platform to display the profile pic of these people who comment on your blog. But most of the time commenters don’t have an account in gravatar and thus, your comment area becomes a un interesting place.

 

But there are many different ways to make your comment section colorful. You can move to your website’s  discussion settings and from there you can change the default avatar. You can either choose mystery man, blank, gravatar logo, identical, avatar, monster ID or retro.

Or you can use a custom code to check if the gravatar for that profile is available or not. If the condition is true then this code will not work and if false then it will load the fallback image from your server. By using this method you the choose to have your own image and thus you can better control your website’s design.

You can also use plugins but I don’t see any advantage in using them. As they will merely put pressure on your server resources while performing the same task.

Code To Add Custom Default Avatar To WordPress.

Now over here I am providing you with a code snippet. It will work only when you will place it within your theme’s function.php file. You have to place it at the bottom of that file. In order to edit this file, you can either use WordPress inbuilt theme editor or you can also download it locally in your computer and edit it using some code editor.

add_filter( 'avatar_defaults', 'wpvkp_custom_image' );
function wpvkp_custom_image ($avatar_defaults) {
$new_url = get_bloginfo('template_directory') . '/images/cimage.png';
$avatar_defaults[$new_url] = "Your Custom Avatar";
return $avatar_defaults;
}

Now, what you have to do.

Once you have placed the code properly you will have to upload the image to your theme’s image folder. The name of your image must be image and it’s format must be png.

You can also give your image any personal name, but then you will have to modify the snippet accordingly.

Now Let Me Provide You With Some Explanation On How This Function Works.

First I have created a new function named “wpvkp_custom_image” and I have assigned a variable to it named “$avatar_defaults” .

Second I have created a new variable named “$new_url” which holds the link to the image which is located inside the themes image folder.

Third I passed the variable “$new_url” as the array value to “$avatar_defaults” and assigned it with a name “Your Custom Avatar”.

Modify You Avatar With Custom CSS.

If you want to give your comment section more personal touch then here’s simple CSS styles to make the images around and to add the drop shadow.

.avatar {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 100%;
    box-shadow: 1px 1px rgba(0, 0, 0, 0.1);
    margin: 0 16px 24px 0;
}

I wish that post would be helpful to you. If you want any further customizations then please let me know in comment section. And please don’t forget to share this post with your friends.

Leave a Comment