DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Display Gravatar & Autofill Fields for Previous Commenter

Posted by on

When someone comments on your site, cookies with the information the entered are saved to their computers. WordPress makes it easy to access that information. In fact, in your comments.php template they are ready-to-go PHP variables you can spit out anywhere you’d like. Let’s take a look.

Here are the most important ones, when it comes to commenting, are these:

  • $comment_author
  • $comment_author_email
  • $comment_author_url

Which you can safely output anywhere in the comments.php file like so:

<?php echo esc_attr($comment_author); ?>
<?php echo esc_attr($comment_author_email); ?>
<?php echo esc_attr($comment_author_url); ?>

In order to pre-fill the comment form with this information, the inputs for your comment form could be marked up like so:

<div>
  <label for="author">Name*</label>
  <input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" tabindex="1" />			
</div>	

<div>
  <label for="email">Email*</label>
  <input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" tabindex="2" />
</div>

<div>
  <label for="url">Website</label>
  <input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" tabindex="3" />
</div>

Getting the Gravatar

Gravatars are those little pictures that show up next to comments… “Globally Recognized Avatars”. Anybody can have one, get one here. What is cool about Gravatars is you have your own account that is associated with your email, so anywhere you comment that you use that email that supports Gravatars, that image will show up, and you can “globally” change that image at any time.

It is almost trivially easy to grab the URL source of someone’s Gravatar. The direct link to the image is:

http://www.gravatar.com/avatar/MD5-HASH-OF-EMAIL

So to spit out an <img> in your comments.php file, use a little PHP:

<?php if ($comment_author_email != "") { 

    $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($comment_author_email) . '?s=32';
    echo '<img src="' . $gravatar_link . '" alt="" />';

} ?>

On CSS-Tricks, I use all of this to prefill previous commenter information, including a small Gravatar:

That’s all there is to it! I think the comment form in every single WordPress theme ever written should probably use at least the pre-fill stuff. The “default” and “classic” themes that come with WordPress have this, so it’s pretty standard, but I do see plenty of themes that don’t.

9 Responses

  1. Nice one! I’m redesigning Cats Who Code right now, and for sure I’ll implement this trick. Thanks!

  2. Mike Summers December 20, 2009

    Great tip about pre-filling those fields!

    Is the gravatar code still needed though? I thought gravatars were built into WP now?

  3. Nice one about the Gravatar.

    I knew the others, but not the gravatar (just didn’t think of it).

    And best of all is that if the cookie is empty, Gravatar simply shows the default avatar (http://www.gravatar.com/avatar/ with nothing appended shows the default avatar).

    So no need for a fallback.

    Thanks a lot :)

    TeMc

  4. Jared Ringold December 20, 2009

    Nice tips. I think it would be better to use the following code to show the avatar:

    <?php echo get_avatar(esc_attr($comment_author_email), 32); ?>

    Using this method will display the default avatar you have picked in WordPress if the email address doesn’t have a gravatar associated with it, rather than displaying the generic G gravatar.

  5. sweet

  6. This is great.

  7. great,
    it’s only for same computer and browser?

  8. I attempted to implement gravatars into my current theme “WPTypo” by you guys, but I could not get it to work. I took the above code and inserted it into my comments.php but it did not work… any suggestions?

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry