Despite the growing internet presence of Chris Pearson’s Thesis, his older themes still remain popular, including the Cutline theme which I’ve modified for this blog.
I recently decided to add gravatars to my theme, so I launched a search for anyone’s tips on best positioning of the gravatar code within Cutline. Since I didn’t find anything, I did it on my own–but I thought I’d share with you exactly which code to put where to get gravatars on Cutline positioned like mine. As a bonus, a small section at the bottom shows you how to create a add a custom default gravatar for your site. You’ll see that commenters without gravatars get a ghosted black-and-white BC avatar.
Inserting Gravatar Code into Cutline Comments
1. Inserting the code into comments.php.
a) Navigate to Theme Editor and open comments.php.
b) Scroll down to <p class=”comment_meta”>
c) Insert
<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '50'); } ?>
directly before <p class=”comment_meta”>
d) The result should look like: &amp;amp;lt;?php if(function_exists(’get_avatar’)) { echo get_avatar($comment, ‘50′); } ?&amp;amp;gt;<p class=”comment_meta”>
e) Save.
(Note, if you want your gravatars to be bigger or smaller, change the ‘50′ to ‘40′ or ‘60′ or whatever size you want.)
2. Styling the avatars in style.css or custom.css.
a) If you’re playing by the Cutline rules and have made all your changes in the custom.css stylesheet (or haven’t yet made any changes), open custom.css. If you’ve already hacked style.css to shreds anyway, open style.css.
b) If you’re in custom.css, insert the following line:
.custom #comments .avatar { float: left; margin: 0 4px 0 4px; padding: 4px; border: 1px #ccc solid; }
If you’re in style.css, insert the following line:
#comments .avatar { float: left; margin: 0 4px 0 4px; padding: 4px; border: 1px #ccc solid; }
c) Save.
This will style your gravatars with 4 pixels of padding on either side, then a 1px light-gray border, then a left/right margin to set them off. They’ll sit on the top left of your comments and the comment will wrap around them.
3. Turning on Gravatars.
Now your theme is set up for gravatars, but they may not be turned on. Navigate to Settings -> Discussion and enable gravatars, select the highest rating you’ll display, and choose a backup. Save those settings and watch the gravatars show up in your comments section.
Adding a Unique Default Gravatar
Now that your site has gravatars, you’ll find out just how many of your commenters don’t have them. You can select a mystery man, the gravatar logo, a blank space, or some randomly-generated icons to fill the space. Or you can create a special gravatar for your site. For example, I took the BlogCrafted gravatar, turned it black-and-white, and ghosted it. It shows up when people leave comments and aren’t signed up with gravatars, that’s what shows up for them.
Turns out that adding a gravatar that’s unique to your site isn’t hard at all. First you have to come up with a default avatar. In my example, it’s saved as defaultgravatar.jpg. If you use a different filename, be sure to change that in the code.
Upload the gravatar to the images folder of your theme directory (in Cutline, it’s called “images,” if your theme is different, please modify the code below to reflect its image folder name).
Then back in the Theme Editor area, navigate to functions.php (called Theme Functions). Directly under the:
if ( function_exists('register_sidebars') )
register_sidebars(2);
paste:
add_filter( 'avatar_defaults', 'newgravatar' );
function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/defaultgravatar.jpg';
$avatar_defaults[$myavatar] = &amp;amp;amp;quot;Unique Default Gravatar&amp;amp;amp;quot;;
return $avatar_defaults;
}
The only things you might want to change in this code are:
1) make sure the image location /images/defaultgravatar.jpg is the same as your image’s location. In this case, it’s in the images folder of your theme and called defaultgravatar.jpg. Make changes as appropriate.
2) “Unique Default Gravatar” can be changed to whatever you want to call it.Don’t delete the quotation marks or the semi-colon that comes after.
Otherwise, unless you know PHP, you don’t want to mess with this.
Turn it on. Now go to Settings -> Discussion. The new gravatar should appear in the list of default options. Select it, save, and voila! (if you’re using a caching plugin, you may have to clear it for this to take effect.)
Now there’s only one thing left to do–enjoy your blog’s new gravatars.
A special thanks to the helpful Build Internet article I found on changing default gravatars. Check it if you’d like to know how the code works and see images of what it’ll look like once you’ve done it.
If you've found this article useful, why not get new posts in your RSS reader or in your e-mail? Your e-mail will only be used for new posts and you can unsubscribe at any time.
