Displaying Author Pic and Bio in Your WordPress Post the Non-Gravatar Way

A lot of sites/blogs out there have guest posts and/or multiple authors who contribute content on a regular basis. Now, there is nothing new with displaying the author name of a post, that snippet of code is just

<?php the_author();?>

and will simply display the authors name. We want to get a little more stylish and display a bio with an image, usually you can find a small bio of the article author before or after the post you are reading. 2 quick random examples can be seen below:

Both of these examples display a little information about the author along with a link to the author’s site. Who doesn’t love some link love?!

Both are also are calling in the author’s Gravatar (Globally Recognized Avatar) that is linked to the author’s email*.

*For those who don’t know you can import an author’s image using the gravatar code:

<?phpecho get_avatar( get_the_author_email(),'80');?>

In which the author’s email will be checked with Gravatar, if the person has an account the image linked to their email will be displayed, exact same concept of pulling in avatars in the comments section of your favorite site.

Ok first thing first, make sure your author is listed as a “User” for your site. If they are not listed, create the account:

Go to your WordPress dashboard>>Users>>Authors>>Profile

Make sure the section for the Bio Info is filled out and while your at it make sure the First Name, Last Name and Nickname are filled out as well…they will come in handy later on.

Now open your Single Post php file, usually single.php. This page generates the layout of your article and is the file you need to edit in order to display some author info. For my example I added the author bio after the article, right before the share options and comments.

<div class="authbio">
<?php the_author_description();?>
</div>

Yikes, ugly but it works!

Let’s add some quick CSS to make it look somewhat respectable, you can always style away later!

You can put links in your bio, no need to forget to link back to your site.

The above technique is looking for an image labeled the same as the “First Name” of the author. Also try the_author_lastname(); or the_author_nickname();

The technique above will provide a static solution for an author who does not have a Gravatar account. What is great about Gravatar is that the image will follow you wherever go as it’s linked to your email address. If you change your Gravatar image I believe it will be reflected everywhere you have left a comment, written a guest post etc. Using a Gravatar helps your personal branding to be consistent throughout the web.

Hope this is helpful, as I used it as a solution for an guest author who has an offline presence.

About Gabe Diaz

Gabe Diaz is web professional and consultant focusing on design and development, currently based out of South FL. When not geeking out on the internet you will find him spending time with his children. You can also find him on Google+: +Gabe Diaz, Twitter: @GabeDiaz and Facebook: GabeDiaz.

For it to work on your main page for the posts that appear you would need to put the code in your loop. You are already pulling in the author names for posts and you could very well add the author image as well. Just style the image with css for placement. If you wanted to add the bio, you could do that as well within the loop.

But using the code you’ve put here on the site. Is there a simple way to do this? I assume it’s going to involve creating a different Page Template, and then putting some form of the code as above. What I don’t know, however, is how to get all of my authors to show up in such a page, without doing it manually. Thoughts?

You can do this using Author Templates. Check out: http://codex.wordpress.org/Author_Templates basically you will create a Author.php page. In that page you will recreate the look of your archive or category template but instead of calling in posts you will be calling in your author’s info in the loop.

This is great! Thank you for the insight on this… I think adding an ‘about the author’ bit with image and bio can make the author’s post more authoritative, and yet personal at the same time… (if that makes sense?) which is a good thing

Hi,
Thanks for such a great tutorial. I being a non technical person never thought of doing this all by myself !
However 2 things i still couldnt find in your tutorial:
1. Author name is not being displayed ( with a link to his posts )
2. How do i add other things like, twitter link, facebook link, etc ?

I saw someone had a question about this above. Here is the code I used to display the author info above the box and added the author’s email and Twitter link (I put the author’s Twitter URL in the AIM area to make this work):

I don’t know how can I thanks you for this wonderful tips. I was searching for such plugin but your code is 100 times better than plugin. This really solves annoying steps of signing for Gravatar. There are many contributers who do not have gravatar account so it was one kind of problem. Contributer loves to have their images on their post, your code is amazing.

Hi. I recently activated the WP-Gravatars plugin, and because I was being stupid, I put in a URL of an image I was thinking to use in the “default gravatar to use” box. However, I apparently already have a gravatar, which I created with my profile on gravatar.com. I want to delete the URL I stupidly put in the default avatar to use box so that the RIGHT gravatar (which is the one on my profile @ gravatar.com), and I keep trying to leave the box blank, but the URL just keeps popping in there again after I save the changes. Please help me!