One of the big things I wanted to do with this blog was share the fun I have playing with WordPress. Since there are a hundred and one blogs out there that focus on beginner tutorials, I wanted to do something a little different – something a little more personal, and something that involved adding a little pretty. So, I’ve added a feature called ‘Pretty Your Blog’, where we’ll talk about little things you can do to your WordPress blog to make it a little prettier and a little bit more yours.
In this tutorial, we’re going to add a custom Gravatar to your comments that will appear for all users who don’t have a Gravatar of their own. This way, you can match this image to your blog.
Gravatar is a super-useful tool that lets you create an avatar and associate it with your email address. Once you’ve set that up, every time you comment on a blog – yours or someone else’s – that avatar will appear next to your comment, like this:
So, let’s add one to your site.
Step One
Go to a post on your site that has comments. Right-click on the page and select View Source (You can also use Firebug to poke around your code) and scroll down to code that will look similar (not exactly) to this:
|
1 |
<img class="avatar avatar-48 photo" alt="" src="http://1.gravatar.com/avatar/fae25d0e6a7f5219eb8d674feb5b034c?s=48&d=http%3A%2F%2Fwww.addalittlepretty.com%2Fwp-content%2Fthemes%2Falittlepretty%2Fimages%2Fgravatar.png%3Fs%3D48&r=G" width="48" height="48" /> |
Notice in that code it gives a height and width of 48? This tells us that our gravatar image should be 48px wide and 48px high. We want to match the dimensions on your own site so that the new image fits in the space.
Step Two
Open your favourite photo editor and create an image that fits these dimensions. If you don’t have a cool software like Photoshop on your computer, you can use the free and pretty darn awesome Pixlr, and play with your images right in your browser. Make sure that if you have the option, you’re saving this file for the web, and that you save it as a .png file.
In my case, I created an image based on my logo:
Step Three
Go to Media > Add New and upload this new image to your media library. You’ll notice that when you do this, WordPress will generate a URL of where this image lives on the web. Copy this URL and save it for later.
Step Four
Open up functions.php in your theme folder. There are a few ways to do this. If you’re making any changes to your theme files, I strongly recommend creating a child theme. This keeps all of your customizations in a separate theme folder, so that if your theme ever gets updated, you won’t lose your changes. You can access your theme files either from Appearance > Editor or by accessing your site via FTP. I prefer the FTP version, because you can back up the file you’re changing and re-upload it in case anything goes wrong.
A few caveats about using your dashboard:
1. Be sure to back up any files you plan to change so you can easily revert back if something goes wrong.
2. Some themes break if there’s an error in your PHP in the functions.php file. This will give you the white screen of death and you won’t be able to access your site. If this happens, you will need to FTP in and replace the file you changed with the old version of the file.
3. It’s not as scary as it sounds, but better safe than sorry. <g>.
Step Five
Before the last PHP close tag ?> (or, if there isn’t one, at the very bottom of your functions.php file), add this code:
|
1 2 3 4 5 6 7 |
add_filter( 'avatar_defaults', 'newgravatar' ); function newgravatar ($avatar_defaults) { $myavatar = 'http://www.addalittlepretty.com/wp-content/themes/alittlepretty/images/gravatar.png'; $avatar_defaults[$myavatar] = "Personalized Gravatar"; return $avatar_defaults; } |
Note this line in the above code:
$myavatar = 'http://www.addalittlepretty.com/wp-content/themes/alittlepretty/images/gravatar.png';
Replace the URL (between the two single quotation marks) with the URL to your new Gravatar image… the one we saved for later.
Step 6
If the code worked, we can now go to Settings > Discussion from our WordPress dashboard. Scroll all the way to the bottom and you should see your new Gravatar at the bottom of the list of default Avatars:
Choose your image and Save your changes.
Step 7
Go back to that post with comments, and refresh the page. You should now see your new image for all your Gravatar-less commenters.
