Wordpress: Working with Gravatars » Skylish

Wordpress: Working with Gravatars

YOUR JOURNEY SO FAR: Home » Tutorials » Wordpress: Working with Gravatars

Tutorial hardness:

Rate this tutorial:

In this short tutorial I will show you how to add and customize your readers' personal gravatars in your Wordpress comments.php file. If you need any help understanding this tutorial after, please contact me.

Don't have a Wordpress gravatar? What are you waiting for? Get your own gravatar!

First thing's first, you need to get the correct code to add to your comments.php page. I use the code below:


		<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '40'); } ?>

Place this code somewhere in your comments.php file. To learn more about the comments.php file and how to customize it; see my tutorial.

It's up to you where you add it. To the right is an example of where I've added mine.

Next, you have to style it. In order to do this, add the code below to your CSS:

img.avatar {
float: (left/right);
width: ??px;
height: ??px;
margin: 6px;
}
img.avatar:hover { (OPTIONAL - This is what will appear when the gravatar is hovered)
float: (left/right);
width: ??px;
height: ??px;
margin: 6px;
}

Styling

There are so many different things you can do in terms of style with the gravatar. Below I have listed some techniques I have done in the past, and how I did them.

1. Version Happy Birthday

To achieve this look, I placed the code for the avatar below the information relating to the authors name, the date the comment was posted, etc. I wrapped it in a <div align="right"> code. To make it appear in line with the author's information, I added a margin-top code to the CSS (with a minus number), and it's clear that I added a thick border to the image.

2. Version Carnival

To achieve this look, I placed the code for the avatar below the information relating to the authors name, the date the comment was posted, etc. I made it appear in line with this information by adjust both the margin-top and margin-left sections in the CSS to minus numbers. To acheive the bordered look, I applied a padding of 4px to the CSS code, a white background colour and a 1px border. To acheive the shadow, I added the code below:

box-shadow: 1px 1px 1px #808080;
-webkit-box-shadow: 1px 1px 1px #808080;
-moz-box-shadow: 1px 1px 1px #808080;

3. Version Under the Sea

To achieve this look, I placed the code for the avatar below the information relating to the authors name, the date the comment was posted, etc. I made it appear in line with this information by adjust both the margin-top and margin-left sections in the CSS to minus numbers. To acheive the bordered look, I applied a padding of 4px to the CSS code, a blue background colour and a 2px border-right and border-bottom. To acheive the rotation, I used the code below:

-webkit-transform: rotate(3deg);
transform: rotate(3deg);
-moz-transform: rotate(3deg);

Just by playing with the codes, so many different and interesting looks can be acheieved - and it's all very simple to do.

Good luck ^_^!