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

By Gabe Diaz on 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.

65 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
Laneth Sffarlenn follow me on Twitter

This is brilliant, thanks so much! I’ve now got to finish my bio and I’m done!
.-= Laneth Sffarlenn´s last blog ..Coming Soon from Sffarlenn.net =-.

May 6th, 2010
gabediaz

Glad people are still finding this useful

May 7th, 2010
Mark

Works perfect in Firefox but the author description doesn’t display nor does the author image display in IE.

Is this a known issue and do you know a fix for it?

Thanks
.-= Mark´s last blog ..Video: Footage from Above 2010 Icelandic Volcano =-.

May 8th, 2010
gabediaz

@Mark – I checked your site, doesn’t seem to work at all in IE or Firefox. Your site is looking for a thumbnail called http://www.techiezine.com/wp-content/themes/tztheme/images/James.png which doesn’t exist in your folder. Make sure when you upload the thumbnail it’s labelled to match the info put in the Profile fields under Users.

There shouldn’t be an issue with IE vs Firefox because we are just using a normal WP reference to call the info. Double check your code and if you are still have issues feel free to drop me a line.

May 10th, 2010
Rhys Little follow me on Twitter

Hey! just want to say thanks, this has been a great help! R

Jun 21st, 2010
Shafar follow me on Twitter

At last I found the solution here! Thanks!
.-= Shafar´s last blog ..Longtails Ranked For With Correct Permalink Structure =-.

Jun 21st, 2010
gabediaz

@Rhys & @Shafar – Enjoy!

Jun 22nd, 2010
Adam

Thanks for the great and easy tutorial!

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):

Article Written By:

<img src="/images/.jpg” alt=”" class=”alignleft”/>

<a href="mailto:”>Email

<a href=" “>Follow on Twitter

Jul 2nd, 2010
Cindy follow me on Twitter

This is great! I am trying this out Couldnt find any plugin to make this work so yeah, definitely have to code it

Jul 12th, 2010
gabediaz

@Adam & Cindy – Enjoy! If anyone runs into any issues just leave a comment or send me an email!

Jul 14th, 2010
Joseph

How did you solve the target=”_blank” issue? Where did you change settings? WP admin or code?

Aug 15th, 2010
gabediaz

@Joseph – Sorry for the late response, I have been sick all week. I made an edit to a WP Core file, which I wouldn’t really recommend because it’ll get overwritten every time there’s a WP update. You can see the example on:
http://gabediaz.com/blog/enabling-author-pic-and-bio-for-wordpress-single-posts/
Where you can click on my Twitter and Facebook links which open in new windows.

There is also a plugin which may allow for full HTML in Bio descriptions or you could also use the Author Description Meta fields such as the AIM/Yammer fields and incorporate them into your post.

If I can write up a function to replace the core edit I’ll email you with the link to the post.

Aug 20th, 2010
Larry Levenson

Very helpful article. I used the following CSS to show either the avatar or the user photo, depending on what the guest blogger has available.

.authbio img.avatar, .authbio img.photo { float:left; width: 80px; background-color: #fff; border:1px solid #ccc; padding: 4px; margin: 0 7px 2px 0; display: inline; }

Sep 7th, 2010
Valerie follow me on Twitter

Thanks! You gave me the framework here to really trick-out my author boxes and I appreciate that! Great, clear instructions.

Kudos!

Nov 9th, 2010
Bips

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.

Dec 30th, 2010
ezra

and if i want to use how can di these ?
get_avatar_from_post = author article from gravatar

Feb 13th, 2011
Farrin follow me on Twitter

Thank you, thank you, thank you!!! This is so wonderfully put together! Even an idiot can understand it!

Apr 25th, 2011
Sarah

Great job mate. Long time i was looking how to add authors bio in wordpress and now i got the solution.

May 1st, 2011
pankil joshi follow me on Twitter

thanx really helpful

May 9th, 2011
Alexey

this is what I was looking for!

May 23rd, 2011
Akif follow me on Twitter

i need something special and really cool for author profile and info

Jun 3rd, 2011
Kim

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!

Jun 22nd, 2011
The Chef follow me on Twitter

thanks for this.. I still cant see the answer to my problem on my blog.. I cannot resize or edit the words on my codes.. I am no programmer

Nov 16th, 2011
James R

Do you know how to pull in this information for the user that is logged in?

Nov 29th, 2011
Dave

Excellent article and mod. Thanks
Dave

Jan 14th, 2012