Many of you are having multi author blogs and may feel the need to show the author details on every posts published, some of you may have simple author but then also you’d like to add author details coz it looks kinda cool. Most of the premium professional themes comes with the added bonus but as i’m a free theme lover and hope you’re too, we can easily add it to our blog. I’ll show you how i added it in this blog and show you the different ways you can add it in your blog.

The Code

<div id=”post_author” class=”clearfix”>
<?php echo get_avatar( get_the_author_email(), ‘80′ ); ?>
<div class=”author_desc”><h4>Author : <?php the_author_posts_link(); ?></h4>
<p><?php the_author_description(); ?></p></div>
</div>

This will create a author info like i have in my every post. Lets analyse the code,

get_avatar(get_the_author_email(),’80′) , imports the avatar from gravatar, 80 is the size you can change it if you want to.

the_author_posts_link(), imports the link to which all the posts of author are shown, you can also change it to some other options like author sitename, IM etc, checkout the functions listed below.

the_author_description(), its self explanatory it imports the description added by the author in users option in admin panel.

Some other functions you can try can be found here : Template Tags ( Check Author Tags)

The CSS

Ofcourse everyone knows the output have to be styled, heres the default CSS i use for my site, you can change it to what ever suits your need.

#post_author {
border: 1px solid #E8E8E8;
background: #EBF6FB;
padding: 10px;
margin: 20px auto 20px auto;
}
#post_author img {
float: left;
border: 1px solid #E8E8E8;
}
#post_author h4 {
font-size: 1.4em;
margin-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
}
#post_author p {
margin: 0;
padding: 0;
}
.author_desc {
padding-left: 95px;
}

If you don’t understand the CSS and need any type of help with modification of style ask in comment, me or some other users will surely answer or you can also try some basic tutorials on internet on CSS.

How To Add

The biggest question aint it, if your a geek you already figured out if not heres the process,

1. Open style.css in your template and at the end of all CSS codes just paste the CSS lines in red above.
2. Open single.php and find <?php the_content( ” ); ?> now if you want the author description to appear at the start of every post just paste the PHP Code high above in red, just before the line <?php the_content( ” ); ?>, if you want it to appear at end of every post paste it below the line <?php the_content( ” ); ?>
   

Please Check The Following Images For Example :

CSS Example

PHP Example

And your professonal author description is ready, add more details in the php using the other functions and change it to suit your needs its all upto you.