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

Author Bio - PSDTuts

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

From Adelle’s Micromanaging a Creative

Author Bio - PSDTuts

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.

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

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

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.

25. November 2008 by Gabe Diaz
Categories: Blog | Tags: | 73 comments

Comments (73)

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

  2. Thanks for share, I am looking for a long time

  3. @Tiffany
    @Tox

    Very welcome, glad this was found useful.

  4. 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

  5. @Godserv

    Glad it could be used.

    Site looks great, you feature some very beautiful work.

  6. 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

    • @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.

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

  8. Hello. And Bye. :)

  9. @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.

  10. 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

  11. 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

    • @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.

  12. 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

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

  14. Just what i needed. Awesome work. Thanks! :D

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

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

  17. 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 ?

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

  19. 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 ;)

  20. 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

  21. @Pavlin –

    Good to hear you solved your _blank issue!

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

  23. Awesome man !!!
    It works…..

  24. 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 =-.

  25. Glad people are still finding this useful :)

  26. 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 =-.

  27. @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.

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

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

  30. @Rhys & @Shafar – Enjoy!

  31. 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

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

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

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

  35. @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.

  36. 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;
    }

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

    Kudos!

  38. 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.

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

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

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

  42. thanx really helpful

  43. this is what I was looking for!

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

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

  46. 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

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

  48. Excellent article and mod. Thanks
    Dave

  49. Thank you so much!!! This worked so quickly. Your website has helped me immensely. Great job.

  50. thx, im looking for a loong thim for this tutor ^_^

Trackbacks/Pingbacks

  1. Make your own Wordpress Theme. Anyone can do it, really! | r_shahin : i am web designing
  2. 10 Ways to Customize and Personalize your Wordpress Blog | Pro Blog Design
  3. wordpress düzenleme ve kişiselleştirme yolları « Bay Bedava – Netten Başlıklar
  4. wordpress düzenleme ve kişiselleştirme yolları | Teknoloji Sokağı
  5. Enabling Author Pic and Bio for WordPress Single Posts | GabeDiaz.com - Personal portfolio and all things web related.
  6. 10 Ways to Customize and Personalize your Wordpress Blog | SEO & Web Design
  7. HowTo upgrade free WordPress Theme « WordPress Noise · WPNoise.com
  8. Post Author Info Guide :Tutorials & inspirations at The MegaMag
  9. Adding Author Bio Information to a Post on Wordpress | DesignRJC
  10. Wordpress Wednesday Weekly Round Up
  11. links for 2010-04-11 « Free Open Source Directory
  12. Quora
  13. Wordpress Wednesday Weekly Round Up | Ascend Social Media Marketing
  14. Wordpress Wednesday Weekly Round Up | Cheap Website
  15. Wordpress Wednesday Weekly Round Up - WebsiteDesainer.com
  16. Wordpress Wednesday Weekly Round Up | Start a Web Design Company

Leave a Reply

Required fields are marked *