User Avatar Photos in WordPress


WordPress has supported Gravatars for awhile, which is great, but if you're rolling out a site for a bunch of students to hammer on, it's not ideal to have to send them to a third party service to set up photos. It's awkward, and confusing, for new users to have to go somewhere else to add a photo to their profile. And profile photos can be very useful, especially at the beginning of a semester when everyone is just getting to know everyone else in a class, to put a face to a name.

So, for UCalgaryBlogs.ca, I just installed the handy User Photo plugin. Now, any site can enable this, and the users of that site will be able to add photos to their profiles, like this:

The plugin can be configured with custom sizes for the full-size and thumb versions of the avatar, and the avatar image can be deleted and/or replaced at any time.

It's not completely trivial to enable - because the themes need to be User Photo aware. That's pretty easy to add, though. For the cutline theme we're using on a project, I edited a handful of files to add the code, and it works great. On index.php, and single.php, just add this wherever you want the blog author's photo to be displayed on the post (I put it in the section displaying the post meta information):

Wrapping the thumbnail display code in a function_exists conditional means it will degrade nicely if the plugin is unavailable. Always a good thing to degrade instead of borking.

That results in this display when viewing the post:

Now, if you also want to show avatars on the comments, just edit comments.php to add this code (I put it in the comment meta info section):

And that will look like this when displayed on the blog:

If a user hasn't added an avatar, it won't display any image. But if they do have one, they'll get the properly sized version of their avatar image displayed automatically. Easy peasy. It's a bit awkward having to edit the themes, but it's not difficult. The hard part will be remembering to re-apply the edits if the themes get updated (hence this post...)


comments powered by Disqus