[Tutorial] How to Add Authors’ Images to your WordPress Blog


Have you ever wished you could display the photos of your site’s authors (i.e. their avatars) in a more creative way, such as showing the author’s avatar right beside the headline of each post?

Well, you can. It’s actually not that hard. It just takes placing a few lines of code in your theme.

Uploading an Avatar

Before we get into the code to do this, you should make sure that you have uploaded an avatar. WordPress default doesn’t have a place to upload avatars, but you can get a plugin that will do that, or probably the easiest solution is to go to gravatar.com and upload an avatar there.

The email address you use at gravatar.com should be the same email address you use as your registration address in your WordPress site. (By the way, the avatar you upload at gravatar.com will follow you around the web as long as you are using that same email address. There are many sites that will recognize your Gravatar avatar.)

The Code to Display Avatars / Profile Pictures

There are a number of different pieces of code you could use to display your avatar in WordPress. Here is the one we will use for this example:

<?php echo get_avatar( get_the_author_meta('ID'), 60); ?>

In this case, the number you see there (60) is the size of the avatar. You can simply make that bigger or smaller to suit your needs.

Avatar Appears, but without Style

If you insert the code above into your theme (for example in your single.php file), you should see the photo of that post’s author. The only problem with this is that it simply puts the photo wherever you’ve put the line of code without controlling it in any way.

Featured Plugin - WordPress Ecommerce Shopping Cart Plugin

Out of all the WordPress ecommerce plugins available, MarketPress has got to be the winner - easy to configure, powerful functionality, multiple gateways and more. A simply brilliant plugin!
Find out more

Controlling the Avatar with Styling

In order to get the photo to line up in a way that looks better, we are going to need to style it with some CSS styling.

In order to do that, first we are going to need to put it in a unique “div” – i.e. its own division, its own section. Here’s a way we can do that.

<div id="author_pic">
<?php echo get_avatar( get_the_author_meta('ID'), 60); ?>
</div>

This creates a new division/section called “author_pic” that is unique.

Important: Make sure your new div is unique. It should NOT have the same name as another div in your theme.

So we now have our div set up, but we still need to style it. We do that by referencing the div we’ve just created (“author_pic”) in the Stylesheet (style.css).

CSS Stylesheet

In the style sheet (Appearance > Edit > Stylesheet (style.css)), we’ll control the div with the style we want. Here’s an example.

#author_pic {
float: left;
margin-right: 10px;
}

First we name it the same as we named the div, but we put a hash tag in front of it first. And we also put the opening bracket.

#author_pic {

Then we tell it we want it aligned to the left.

float: left;

And then, because it’s going to be aligned to the left and therefore is going to have the content (in this case the title and the date) to the right of it, we need to make sure it doesn’t run together as it did originally. And so we are going to say, “Give me a 10 pixel margin on the right-hand side.” … And we’ll go ahead and put in the closing bracket.

margin-right: 10px;
}

Now that we’ve controlled the div with CSS, here’s what we get.

Featured Plugin - WordPress Newsletter Plugin

Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot.
Find out more

Linking to Author’s Posts

So all of that is looking pretty good. But the avatar that gets inserted is just photo, and that’s it. Many people will probably try to click on the photo thinking they will get more posts from the author or more info about the author.

So let’s go ahead and add a link to the photo that goes to an archive of the author’s other posts.

Our styling is fine, so we don’t need to touch that. But we’re going to need to add more to the code we first inserted.

To make a long story short, let’s just jump to the whole snippet of code.

<div id="author_pic">
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author">
<?php echo get_avatar( get_the_author_meta('ID'), 60); ?></a>
</div>

When we do that, clicking on the photo takes the viewer to the author’s archive page, as we hoped.


Featured Plugin - WordPress Infinite SEO Plugin

Fully integrated with the SEOMoz API, complete with automatic links, sitemaps and SEO optimization of your WordPress setup - this is the only plugin you need to help you rank your site number 1 on Google - nothing else compares.
Find out more

Inserting the Photo in Other Places

Where you insert the author’s avatar is up to you, but we’ll run through one more example that some may like to use.

This time we’ll put the avatar at the top of the sidebar. (Appearance > Editor > Sidebar) We’ll also go ahead and keep it linked to the author’s archive page.

<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author">
<?php echo get_avatar( get_the_author_meta('ID'), 198); ?></a>


You’ll notice that this is basically the same code as before, but two things are different. The first is that the divs are gone. The reason for this is that the space in the sidebar is so confined, that there isn’t really anywhere for the photo to go (at least not the way I’m using it).

The second thing is I’ve change the pixels from “60” to “198.” I decided that I wanted a large photo to go right at the top of the sidebar, and I wanted it to basically take up the whole space. (Your size may be different, of course, according to your theme.)

And here’s the result.

Style as You Like

These two basic examples should be enough to get you going. And of course there is a lot more you could do with this if you have the CSS know-how. Just remember that you will need to go in an add the code to whichever files you want the avatars to show up in.

Play around with it. It can really add a professional looking touch to your site.

Featured Plugin - WordPress Pop-Up Chat Plugin

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more

Photo: Author Icon Or Symbol from BigStock

Comments (6)

  1. Very nice….
    What if we running a multisite?
    How does it work for other users?
    Cos I’d like to use the Pro-Sites Plugin for my next project.
    And also,…..up till now,I still having problem with ‘Avatars’ Plugin from WPMU Dev.
    It shows the box of the avatar while the site is uploading,but then show nothing when it finished.
    Still have no clues eventhough I reset the whole site.

    • @Arda – Thanks.

      As for multisite, it should work fine. This code goes into whichever themes you’re using, so just put it in your themes. It will work for any user that’s register because the code just checks for the user who wrote the post.

  2. Nice post that shows you in detail how to add these valuable pieces of information. However There are many out there who have more than one blog and to implement this in say 10 blogs would take well over a day.

    By now you would think there is an easier way.

    Kevin

    • Kevin – Thanks. If you’re just learning this, then it might seem like a lot. But once you do it on one or two themes, it should get much easier. It’s really just a few lines of code that you need to paste in when it comes down to it — if you decide to go with the particular style that I’ve shown as an example, that is. If you decide to work out a different style or placement, then it may take a little more time, of course. But once you work out your own style, again, it’s just a matter of pasting a little bit of code in your different sites. … Shouldn’t take too long once you get on a roll.

    • Auktweena – If you are the administrator of your site, you should have access to your Appearance section. “Appearance” is the main section. (The “Themes” section is INSIDE or BELOW “Appearance.”) Under the main “Appearance” section, the last link there should say “Editor.”

      If you do not see this, then you may not be logged in as the Administrator. Or your may have some other plugin working that is hiding these options for you.

Participate