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

Nov 25, 2008 | 6:38 pm

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

—

Also see Enabling Author Pic and Bio for WordPress Single Posts for displaying an author bio box on a post by post basis.

—

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:

Steven Snell(Vandelay Design and DesignM.ag) is a contributer to the popular site PSDTuts, they do an author pic/bio before the article.

From Steven’s 20 Photoshop Painted Inspiration and Brush Resources

Adelle Charles runs FuelYourCreativity.com in which she displays an author pic/bio after the article.

From Adelle’s Micromanaging a Creative

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:
<?php echo 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.

But what happens if the author doesn’t have a Gravatar account?

Hmm…interesting.

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.

1
2
3

<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!

.authbio{
color: #666;
font-weight: normal;
background: #fff;
border: 1px solid #ccc;
width: 420px;
height:60px;
padding: 8px;
margin-bottom:5px;
}

Okay, so now we are pulling in the author’s bio…what about the image?

Remember all the author fields you were suppose to fill out? First Name, Last Name, Nickname…if you didn’t do it, go do it now!

Let’s add these lines before your the_author_description in your single.php file.

1	<img src="<?php bloginfo('template_url'); ?>/images/<?php the_author_firstname(); ?>.jpg" alt="" class="alignleft"/>

Your author image and bio should now look like this:

<div class="authbio">
<img src="<?php bloginfo('template_url'); ?>/images/<?php the_author_firstname(); ?>.jpg" alt="" class="alignleft"/>
<?php the_author_description(); ?>
</div>

What the above means:

The above img src is looking for a file in your “Your Theme Stylesheet Directory/images” folder aka www.yoursite.com/wp-content/themes/ThemeName/images/.

php the_author_firstname is the first name used in the author fields under dashboard>>users>>profile

Please note that this is just returning what was entered into the First Name field and not the complete author name. Finally the extension “.jpg” is appended to the name.

Now you just need to upload a photo to your: www.yoursite.com/wp-content/themes/ThemeName/images/ and name the file exactly the same name you placed in the First Name Field in the author profile.

Throw in a little CSS to clear up the spacing

img.alignleft {
    float:left;
    background-color: #fff;
    border:1px solid #ccc;
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
}

And we are looking pretty much done!

—

Things to remember:

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.

36 Comments: Comment or Ping

Tiffany

Thanks for this post, this is exactly what I was looking for!

Dec 10th, 2008
Tox

Thanks for share， I am looking for a long time

Jan 3rd, 2009
gabediaz

@Tiffany
@Tox

Very welcome, glad this was found useful.

Jan 3rd, 2009
Godserv

Thanks for posting these helpful tips. This has been a great help for us at http://inspiks.com.

Godserv’s last blog post..Flickr Group Graphics Roundup-January

Jan 6th, 2009
gabediaz

@Godserv –

Glad it could be used.

Site looks great, you feature some very beautiful work.

Jan 6th, 2009
bara

is this way will work if I put it in my first page, I usually do this in my author.php file, what if I want to display the biographical info on the main page…

bara’s last blog post..[tanya]perangko Deutiches Reich

Jan 20th, 2009
gabediaz

@bara -

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.

Jan 20th, 2009
Rob

Awesome post! Thank you!

I’d like to put all my authors into an Author page, like this:
http://theportablegamer.com/writers/

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?

Again, thanks for a great tutorial!

Rob’s last blog post..bleep. bloop. FREE — LED Football for $0.00 all Superbowl Weekend

Jan 31st, 2009
kookimebux

Hello. And Bye.

Feb 1st, 2009
gabediaz

@Rob –

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.

Feb 2nd, 2009
designeRoof

yes! we found it! ahahahah… we did a little mod and placed the gravatar in with links to author’s articles. tell us how it looks. =)

designeRoof’s last blog post..Mighty Wallet by Dynomighty

Feb 16th, 2009
Leon Poole

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

Leon Poole’s last blog post..Access iPhone – Theme for activeCollab

Mar 5th, 2009
gabediaz

@Leon Poole -

I definitely think think it adds a personal touch to any article plus if you have a guest writer, it’ good promotion.

Glad you found a use for this, but don’t forget you can also use gravatars if all your authors are signed up with an account.

Mar 5th, 2009
James

Great post – lovin’ it. Made my corporate blog what it needed to be… Thanks much!

James’s last blog post..How To Post In WordPress, The Basics

Apr 10th, 2009
gabediaz

@James -

Glad to help! Gravatars are the easiest to implement but not everyone has one which is why I needed something like this to aid in helping to promote offline authors.

Apr 11th, 2009
Matt Simpson

What an inspired solution.. just what I was looking for! Author bio pic should really be built into WP but until it is this is the perfect solution! Thanks!

May 3rd, 2009
jorgerosa

Just what i needed. Awesome work. Thanks!

May 11th, 2009
Carlos

How can I make it so that the author bio doesn’t show up on each page of a multipage article? I want to show it only on the very last page.

Jun 4th, 2009
Kim

Thanks for this, it’s a huge help. If you ever see our pics and bios up on our blog, you’ll know who made it possible!

Jun 18th, 2009
gabediaz

@Kim -

Glad it can be of use!

Jun 21st, 2009
Paritosh

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 ?

Sep 12th, 2009
Rob H

Good article, clearly laid out explanation too.
Rob H´s last blog ..Free vector social bookmarking icons

Sep 29th, 2009
Pavlin

Hi, Why links in author bio can’t have target blank?

When I insert a link in my bio, however I type it, it just removes the target=”_blank”

how can I make my links to open in blank page?

please help

Oct 23rd, 2009
Pavlin

nevermind I made it

The issue here was that a user’s description allows very little HTML

I’ve just allowed full html and the links are working now

Oct 23rd, 2009
gabediaz

@Pavlin –

Good to hear you solved your _blank issue!

Oct 23rd, 2009
Jim

After hours of searching, these instructions you provided did the trick. I can’t thank you enough!

Jan 12th, 2010
Praveen

Awesome man !!!
It works…..

Mar 7th, 2010