Jesse Lawson

Software engineering, artificial intelligence, writing, and open-source tools

Jun 24, 2013 - Tutorials

Custom Author Image in WordPress

I don’t like using Gravatar — or any third-party service for that matter — for my author profile pictures. For me, having control over where the images come from and how they are displayed is important, so I wrote a custom function and came up with a simple system for rolling my own custom author image in WordPress.

In this tutorial, I’ll walk you through the steps necessary to roll your own custom author image system. When you’re finished, consider reading the follow-on tutorial to this: how to create a Custom ‘About the Author’ Box in WordPress.

***Would you rather just download a plugin? My free Easy Author Image Plugin puts an image uploader right on your profile page. It couldn’t get any easier! ***

I know you’re tempted to just download a plugin to do this, but don’t (unless you download my plugin, because it’s awesome). But seriously, you can do this. Just *t**ake a breath, relax, *and go through each step to do this yourself. Customizing your WordPress and getting under the hood once in a while helps to build up your appreciation for how this wonderful system works.

When I was working on an online newspaper, we had WordPress users with information in their bio boxes (under the Users->Your Profile tab in the admin section) but not everyone had Gravatar profiles. Instead of making them sign up for the service, we had them give us profile shots of their faces and we stuffed them into folders on our server. The pictures were named according to their author IDs (so one would be author-36.jpg, another author-119.jpg, and so on).

We wanted to display these at the end of our posts, but also on a custom Masthead page that would list all of our writers, their positions, a short bio, and their picture, so we developed a simple function that would grab their picture and display it. In this tutorial, we’re going to do just that:

  • We’ll set up a special directory where you can upload author images
  • We’ll create a custom function that will retrieve that author image
  • We’ll wrap it in some CSS and make it easy to stylize it

Ready? Let’s get started!

Step 1: Setup and upload the author pictures.

When we were doing it with Lawsonry, I had a folder in our main directory that held all of the author pictures. This is the easiest thing to do. Go to your FTP client or use whatever system you like to use to access your WordPress directory and create a new directory called “author-images.” It should look something like this:

http://www.yourdomain.com/author-images/

Next, you’ll want to assign all of your authors’ pictures their appropriate user IDs, so get all of the author pictures for all your authors together in a folder on your desktop and rename each file to their name (don’t worry, we’re going to change this in a second).

Now that you have a folder with a bunch of images, and each image is named according to each author, head over to Users->All Users. Hover your mouse over each name that has a corresponding image and note the user ID in the status bar. It should be something like this:

.../user-edit.php?user_id=123

Obviously ’123′ would be the user ID you are looking for. Go through each user and, for each user_id, make a mental note of the number, click on your folder with all the author images loaded up, and change the corresponding picture’s name to ‘author-123.jpg’, where 123 is the user_id you saw in the status bar from the other window.

Once this is done, you should have a folder on your desktop with a bunch of images with names like ‘author-334.jpg’ and ‘author-123.jpg’. The numbers are going to all correspond to the individual user IDs. Don’t worry if these numbers are in no specific order or don’t make sense — just make sure you have the correct user ID for the correct image.

When you’re finished, upload all of these newly renamed author images into your ../author-images/ folder on your server.

*Scott asks, “Do they have to be JPG files? I’m using PNG.” — You can use any file you want; we used JPGs because that’s just what they happened to be in. *

Step 2: Edit functions.php.

Go to Appearance->Editor, and find your functions.php file (usually labelled “Theme Functions.”) Scroll to the bottom of the file and copy and paste the following code:

/*-----------------------------------
/* GRABS AND DISPLAYS AUTHOR IMAGE 
/* (USING OUR CUSTOM AUTHOR IMAGE LOCATIONS)
-----------------------------------------*/
function the_author_image($curauth="") {
  global $post;
  if($curauth==""){
    // If we are not requesting a specific author image via their ID, 
    // we'll get the current author image of whatever page we're
    // calling this function from.
    $author_id = get_the_author_meta('ID');
    // Make sure you change the file extension if you aren't using JPG!
    $url = home_url()."/author-images/author-".$author_id.".jpg"; 
 return '<img alt="" src="'.$url.'" />'; } else { 
    // However, if we ARE requesting a specific img via $curauth, 
    // then let's grab THAT author id image instead. 
    $url = home_url()."/author-images/author-".$curauth->ID.".jpg"; 
    return '<img alt="" src="'.$url.'" />'; 
  } 
}

I’ve added some comments in the code above, but in case it’s a little confusing, I’ll detail the function’s logic for you.

  1. Check to see if the function call is requesting a specific author id.
  2. If no, then retrieve the ID of the author of the page the function is being called from, then get that ID’s corresponding author image from our custom location and display it.
  3. If yes, then grab the corresponding author image for the inputted author ID from our custom location and display it.

Step 3: Add our custom function to a file.

We’re almost done! The last step is to just call the function from wherever you want the custom author image to be displayed.

If you want the custom author image to appear in individual posts (like at the end, in a custom author byline box), go to Appearance->Editor, and find your single.php file. In it, look for the following line:

<?php the_content(); ?>

After it, add the following code:

<?php $author = get_userdata( get_query_var('author') ); /* Fill the $author variable with information about the current author */ ?>
<center><h2><?php echo $author->display_name;?></h2>
<?php echo the_author_image($author); ?></center>

What this will do is display the author’s name with the custom author image under it. Not exactly a design contest winner, but it gets the job done. If your theme already has a custom author byline box, and you are reading this tutorial because you want a Gravatar alternative, then look in your single.php file after the_content() for something that looks like this:

<?php echo get_avatar(get_the_author_meta('user_email'),'160'); ?>

Anytime a theme has an author byline block built-in, it will usually use the Gravatar picture of the author’s email address (which is what the function get_avatar() does). Since this function does nothing more than return an IMG tag with the author’s profile picture, you can simply replace this function with the custom one that we created earlier. So if you see this:

<?php echo get_avatar(get_the_author_meta('user_email'),'160'); ?>

… Just replace it with this:

<?php $author = get_userdata( get_query_var('author') ); echo the_author_image($author); ?>

… And that’s it!

In summary, I hope this tutorial wasn’t too daunting. The bulk of it all is in the custom function I wrote (the_author_image()) and its accompanying folder of author files.

If you’re looking for a way to display something like what we have here at Lawsonry (click here to see my author page) read my tutorials about how to create a custom author page and the follow-on tutorial to this one, how to create a custom ‘About the Author’ box in WordPress.

While you are working with your files, don’t hesitate to post any problems you run into in the comments section below so we can walk you through a solution.