TechToggle - Its All About Technology

Although there is a wordpress plugin available known as Author Bio but still this the manual method offers much more customization like adding author’s photo via his/her gravatar, changing background color, adding post count stuff etc. All you need is a little sense of programming. Here is a brief summary of each function which we are going to use followed by a step by step procedure to implement them.

<?php echo get_avatar( get_the_author_email(), ‘80′ ); ?>

The above function gets the author avatar from the Gavatar depending upon his/her email.

<?php the_author_posts_link(); ?>

Displays a link to all posts by an author. The link text is the user’s Display name publicly as field. The results of clicking on the presented link will be controlled by the Template Hierarchy of Author Templates. This tag must be used within The Loop.

<?php the_author_posts(); ?>

Displays the total number of posts an author has published. Drafts and private posts aren’t counted. This tag must be used within The Loop.

<?php the_author_description(); ?>

Displays the contents of the About yourself field in an author’s profile (Administration > Profile > Your Profile). About yourself is a block of text often used to publicly describe the user and can be quite long. This tag must be used within The Loop.

Follow these simple steps:

1. First you have to access your single.php which should be in your active theme’s directory.  If you know how to access it then jump to step 4.
2. You may access single.php via two methods i-e by using FTP or by using an inbuilt theme editor provided by wordpress itself.
3. We will go for easy way, so login into your admin account i-e www.yourblog.com/wp-admin and then navigate to Appearance tab in side-bar, click on Editor
4. Choose single.php, now you have to place the following code anywhere you like within wp loop function. It depends whether you want to add it before or after post content

<div id="post_author">
<?php echo get_avatar( get_the_author_email(), '80' ); ?>
<div><h4>Author : <?php the_author_posts_link(); ?>, Posts:<?php the_author_posts(); ?></h4>
<p><?php the_author_description(); ?></p>
</div>

5. Now click on the Update File button.
6. In the same editor click on style.css and add the following code.

#post_author {
border: 1px solid #E8E8E8;
background: #EBF6FB;
padding: 10px;
margin: 20px auto 20px auto;
}
#post_author img {
float:left;
background-color: #fff;
border:1px solid #ccc;
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
#post_author h4 {
font-size: 1.4em;
font-family: Arial, Helvetica, sans-serif;
}
#post_author p {
margin: 0;
padding: 0;
}
.author_desc {
padding-left: 95px;
}

7. Click on Update File button.

Ur done. Similarly you may add author’s description to your main homepage by altering your index.php