It’s common to find an author’s credit and bio at the end of a blog post, especially on blogs that post content from multiple writers. Using a cocktail of Wordpress template tags, an info section can be easily put together to showcase the author’s Gravatar profile image, their name, link to their website and short bio.
A typical author info section sits at the bottom of a post, so we’ll add our code in the single.php Wordpress file. The aim is to display their name, linked to their personal homepage; automatically pull in their gravatar profile picture; and display a short bio.
Enter the User Info
The majority of this information is inserted into the Wordpress Users section of the admin panel, go ahead and create the user and fill out the relevant fields. Select the appropriate option for how the name should be displayed, enter the user’s website, and complete the Biographical Info.
Write out the HTML
<div id="author-info">
<div id="author-image">
<a href="**Author Website**">**Author Gravatar**</a>
</div>
<div id="author-bio">
<h4>Written by <a href="**Author Website**">**Author Name**</a></h4>
<p>**Author Description**</p>
</div>
</div><!--Author Info-->
Open up your single.php theme file and write out the initial HTML code. The whole author info section is contained within the div of author-info. Within this, is a div containing the linked gravatar image, followed by a div containing the main author information, such as the author’s name set in a level 4 heading, and the paragraph awaiting the biographical information.
Style up the CSS
#main div#author-info {
background: #eaeaec; padding: 10px; margin: 0 0 15px 0;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
overflow: auto;
}
#main div#author-info div#author-image {
float: left; margin: 0 10px 5px 0; border: 5px solid #DCDCE1;
}
With the HTML in place, the CSS styling can be written out to move everything into place. Here the author-info div is styled up with a grey background, some padding around the edges and a bottom margin. A touch of border radius rounds off the corners and the author-image is floated to the left.
Adding the Wordpress Template Tags
<div id="author-info">
<div id="author-image">
<a href="<?php the_author_meta('user_url'); ?>"><?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?></a>
</div>
<div id="author-bio">
<h4>Written by <?php the_author_link(); ?></h4>
<p><?php the_author_meta('description'); ?></p>
</div>
</div><!--Author Info-->
The dynamic functionality can then be added to the theme file with the use of Wordpress’ template tags. Here’s what’s used:
<?php the_author_meta('user_url'); ?>
The the_author_meta() template tag can be used to pull in various snippets of information about the user, in this case it’s used to find the author’s URL.
<?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?>
The get_avatar() template tag is used to grab the author’s gravatar, and the get_the_author_meta(‘user_email’) tag is used to take the place of the user’s email in the parameters.
<?php the_author_link(); ?>
The the_author_link() template tag is used to simply drop in the author’s name, and automatically link it up to their website URL.
<?php the_author_meta('description'); ?>
Finally, the the_author_meta() tag is used once again, this time with the paramater to fetch the user’s description, also known as their biographical information.
Taking the idea further
With the range of template tags available to Wordpress, it’s easy to take things that extra step and add new features, why not consider the following in your theme?
Display all posts by user
<p>See all posts by <?php the_author_posts_link(); ?> </p>
Display user’s post count
<p><?php the_author(); ?> has written <?php the_author_posts(); ?> posts on <?php bloginfo('name'); ?></p>
Link to user’s AIM address
<p><?php the_author(); ?>'s AIM address is <?php the_author_meta('aim'); ?></p>
I’ve always wondered how to get something like this done. Thanks for sharing!
Is it me or is there are tag missing after the gravatar/email call? I tried pasting this code in my template to see how it worked and I all see if the raw code itself. It is not pulling up the right content unless I’m missing something else?
really helping stuff for took more professional look on our blog.
Thanks for share.
Adding the Wordpress Template Tags, missing the end tag .
;)
<a href="<?php the_author_meta(‘user_url’); ?>"><?php echo get_avatar( get_the_author_meta(‘user_email’), ‘80′, ” ); ?></a>
Right?
Thank you for sharing
xD
Sick!
Just made some adjustments to the site, it looks like it was stripping out the closing anchor tags previously.
Nice. It was late last night when I saw this post did a quick check to see how it worked. I knew I wasn’t going crazy lol
Very nice tutorial and easy to follow and understand.
An excellent tip and its certainly easy to understand. I’ve tried doing something similar on ExpressionEngine. :)
Nice work Chris. Super simple, but something that a lot of people could probably use.
I just implemented something like this a few weeks ago on my own blog!
Tutorial added to thewebtuts.com
Nice tutorial Chris. I think I will be adding an author info section on the Design Informer soon.
Nice tutorial!
Very useful information. Thanks!
The information is excellent. Thanks!
Hi Chirs,
I’ve never dealt with wordpress in this way. But could you easily add some microformats to the author section?
Would that be a good idea?
Thanks. Keep up the good work.
Absolutely awesome post Chris. I will be implementing this on my blog very soon!
Wow… great) i’ll do it tommorow
finaly i’m find this tut ,thanks chris
Another awesome post, been meaning to add this to my blog
Thank you very much. Great article. using it on my site.
This is a useful addition to professional looking blogs. Thanks.
Good stuff. Been looking how to do this for my site. Will be implementing author info asap.
thanks chris.
i was very very lazy, so i solved this via wp-plugin “About the Author Box”. but i never had the chance to be more flexible. i will change this in the nearest future. really nice tut – thx.
and btw. nice house ;)
/sebastian
Great stuff and very helpful! Thank you for sharing!
Chris – Great stuff, a thorough tutorial that covers everything and never needs repeating else where. Bookmarked for sure. The XHTML is pretty simple and isn’t a challenge, the reference to the correct WP tags is the stuff I’m personally interested in.
I’ve been using the Carrington framework for this type of stuff, but it involves creating dedicated templates for each author. I like this technique that uses Wordpress’s built-in functions better.
Thanks Chris – great timing. I just started looking to code this when the post was tweeted.
Nice tutorial. I must give this a try as I dont have any Author section on my blog and would love to have this.
Thanks Chris
Informative!
I just implemented this tutorial on my blog and its working perfect. You can see any post on my blog.
Thanks Chris again!
I have implemented this on my blog http://www.kaplang.com/blog today due to getting my first guest author. Thanks for sharing this, its been really useful :)
I was just looking for a plugin to do this without much luck. Then I ran across a link to this post on another blog. Fantastic stroke of luck. Thanks for sharing.
I can’t stress enough how much I appreciate you putting this up.
Thank you Chris!
Thanks!
I’m having trouble getting the text to wrap around the Gravatar… Any suggestions?
Great article, I really enjoy your work and find both of your blogs to be great resources. Thanks man, keep it up!
Wow ! that’s great …..hope to expect more.
Ah, Chris it’s always such a pleasure to read your posts.
Thanks for the post! Was wondering how to add paragraph spacing to the author description if you want to write a lot?
WordPress seems to be stripping the tags. any ideas?
Well, you are my hero, I was searching this for a long time instead of installing a crappy plugin. The only problem I have is that the gravatar is in first line and not besides the description of my cool existance.
Gravatar
Description of my cool existance
The rest stuff
However is a good tutorial and I should share this on my blog giving all the credits to you my manner.
Cheers… My Mind
Hi
Thanks for your useful post. Just want to ask a simple thing… The code is working fine and i am already using it after reading your post can you please tell me why it is showing 32×32 px size by default i tried in code but it is still not changing…. any suggestion?
Chris,
How to place a default message if the member did not fill his biography yet, as the the_author_meta(‘description’) tag is empty ?
I found the solution here.
Here the code adapted to my case.
It will be able to perhaps inspire certain person.
<a href="">
Depuis le , a écrit article(s) sur mywebsite.com.
<a href="">
n'a pas encore renseigné sa biographie. Mais il devrait l'écrire prochainement.N'hésitez pas à repasser pour la lire ...
Depuis le , a écrit article(s) sur mywebsite.com.
I had sought the solution for several days. I found it 5 minutes after my preceding message. :)
Thanks Chris you are always v.v.helpful
and outstanding
Thanks, what if I have several authors and wanted there photo beside each of there blog post on the index page. What should I do?
Thanks again.
Rosco
I was trying all the plugins that are available and none seemed to work well with my theme. Your tutorial did the trick and I now have exactly what I was looking for, so a big thank you to you.
Regards,
Karl
Excellent contents and I’ll try to use some of the info in my site.
Great post, these wordpress related posts are really helping me out progressing my own blog.
Thanks again.
yep, nice tutorial Chris…there are also other methods for authors info, but your is much better and good moderated. Thanks for sharing.
Chris, cheers for that, that’s one thing I could figure out…
Hi Chris, Thanks a lot for this post. Had been looking for something like this for quite some time.
Have already added this solution to my bloog! :)
Brilliant…. Just what I was looking for. I tried several other codes, but this is by the best…..
You have a great eye for details, Chris. I love those rounded corners :)
Thanks a lot