Many blogs have an author information box at the end of their posts. This is becoming one of the biggest trends in WordPress blogs. In this article we will show you, how you can add an author information box at the end of your single posts without a plugin.
Screenshot:
First open your style.css file in your themes folder and add this code:
#authorarea{
background: #f0f0f0;
border: 1px solid #d2d2d2;
padding: 10px;
width:500px;
overflow:hidden;
color: #333;
}
#authorarea h3{
font-size: 18px;
color:#333;
margin:0;
padding:10px 10px 5px 10px;
}
#authorarea h3 a{
text-decoration:none;
color: #333;
font-weight: bold;
}
#authorarea img{
margin:0;
padding:10px;
float:left;
border: 1px solid #ddd;
width: 100px;
height: 100px;
}
#authorarea p{
color:#333;
margin:0;
padding:0px 10px 10px 10px;
}
#authorarea p a{
color:#333;
}
.authorinfo{
padding-left:120px;
}
Note: You might have to modify the CSS file to match your theme formatting.
Once you have added that then open your single.php and add this code inside your loop.
<div id="authorarea">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '100' ); }?>
<div class="authorinfo">
<h3>About <?php the_author_posts_link(); ?></h3>
<p><?php the_author_description(); ?></p>
</div>
</div>
There are many ways to get the images for the author profile, but we used Globally recognized Avatars, Gravatar. This code will get the avatar associated with the author’s email.
If you have any questions, feel free to ask in the comments.
I’ve been using wordpress now for a few months, I just got back into the design game, and I still consider myself a beginner. I popped it in my custom theme, and with a little Css it was working beautifully. Bravo! Thank you for the short cut.
helpful article it’s nice to see we can add author box without any wordpress plugin.
Thanks for this great post.
The CSS Layout doesn’t work for me with Twenty Eleven. So,I need to have a custom theme. The author bio is not floating arount the gravatar and the whole block is not centered.
We would have to see the code to determine what’s going wrong. The code should work perfectly fine unless there is another class with the same name in the CSS.
@CalGavinltd Somewhere in your CSS, there has to be a property: text-transform: uppercase; You need to get rid of that.
For some reason the author title is in caps how do I change this?
I want to do this, but editng the code scares the crap out of me!
I much prefer a plugin to do it for me!
thanx. i already have a author box enabled by default on my alltuts theme! in case i needed to style it..this is a gr8 tutorial!
I’m using the YARPP plug-in and it’s always displaying on top of the author box. I’m not good with PHP so I don’t know how to tweak the settings for it to appear below the the_content(); hook. Any tips you could provide? Thanks!
@Mahendra Glad we were able to help
Superb! I was looking for it for a long time. just now did it successfully after reading this article. Thank you very much!
hi, i followed your tutorial and insert the html/php code right at the end of the loop, but the author box is displayed below the comment section.
did i miss something?
Paste it above the comment code.
I am using a parent and child theme combination. The single.php file is in the parent theme and shows -
“<?php
/**
* WARNING: This file is part of the core Genesis framework. DO NOT edit
* this file under any circumstances. Please do all modifications
* in the form of a child theme.
*
* This file handles posts, but only exists for the sake of
* child theme forward compatibility.
*/
genesis();
The CSS code was easy but where do I put the PHP code in the child theme?
You are using Genesis. This feature is already built in. Go to your User Profile page, and turn it on. No need to use the code on this article.
Shared And Liked, Thanks for this greatfull tutorial, its always better to cardcode things in you’re template folder instead of adding way to many plugins (:
Hi, thanks so much for this tutorial. I got it to work real nicely after I tried several plugins that just wouldn’t.
Here’s a question. How can I move the Author box to appear above the related posts? See: http://www.newenlightenedminds.com/2010/10/letting-go-movie-trailer/
Any help would be much appreciated.
Tx
Rob
That will depend on which plugin you are using… From the looks of it, the related post plugin is adding the posts at the end of the_content(); hook. So you would have to disable the plugin and tweak it to fit your needs.
Simply Superb.
I was so looking up for this. tried different plug in but couldn’t get the right things. what you did is without plug in is really Great.
Just wanted to know how can we show the number of post in the same code ?
I am managing a multi author blog on my main site
You can add this code: <?php the_author_posts(); ?> and it will show the count of posts done by that author.
How can I exclude the admin author from appearing? Thanks!
Is there a way to exclude the author box from a specific category? Please help. Thank you very much!
p.s. thank you for this tutorial, it worked perfectly!
Yes… You can use the conditional tag is_category (then display nothing) else display this. Or the easier way to do this would be creating a separate single.php for that specific category and remove this code. All you have to do is create single-categoryname.php or single-categoryid.php
I love the Comment box you have on your site! Is it a plugin or did you code it yourself? Can you help me get my comment box looking like that! ALSO, What plugin are you using to have the twitter and facebook widget on the lefthand side of your screen?
Thanks in advance! BTW, your site is super clean, I love the layout!
The only plugin we are using for the comment box is subscribe to comment. Everything else is simple codes. For the floating widget, we are going to be releasing that plugin for free in the coming week, so stay updated.
Excelent! I was looking this for my job
Thanks!!!
Awesome post with nice explanation. I was searching these codes for my blog post. Thanks for sharing this nice post.
For the loop, do I need to paste it specifically or can I just paste at the end of the file?
It is better if you post it at the end of the loop.