How to create Author box in wordpress blog?

Nowadays more number of persons doing blogging. In blogging WordPress platform is one of the best platform for bloggers.

Ok let us come to my point.

In this video tutorial I am going to show how to add author box in your wordpress blog. Because it is very important for each post, then only visitors can know about author. In author details you can put your Rss feed link and what are all the links you want, you can add in that author box description.  Already I posted about how to create author box for wordpress in thesis theme.

credit

To create author box watch our video tutorial.

As per our video paste the below code in single.php

Note: in this code instead of fourblogger link, you can put your site link.

<div id="authorbox">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
<div>
<h4>Article by <?php the_author_posts_link(); ?></h4>
<p><?php the_author_description(''); ?></p>
<p><?php the_author_firstname(); ?> has written <span><?php the_author_posts(); ?></span> awesome articles.</p>
<p>Subscribe to feed via <a href="http://www.fourblogger.com/feed"><b>RSS</b></a> or <a href="http://feedburner.google.com/fb/a/mailverify?uri=Fourbloggercom&amp;loc=en_US"><b>EMAIL</b></a> to receive instant updates.</p>
<p>Subscribe to our fourblogger <a href="http://www.youtube.com/user/fourblogger"><b>You tube channel </b></a></p>
</div>
</div>

As per our video paste the below code in style.css

Share your experience in comment box.

#authorbox{
background:#EFEFEF;
border:1px solid #CECFD0;
width:638px;
margin:0 auto;
margin-bottom:10px;
overflow:hidden;
}
#authorbox h4{
font-size:16px;
color:#191919;
margin:0;
padding:10px 10px 5px 10px;
}
.authortext{
padding-left:100px;
}
#authorbox img{
margin:0;
padding:10px;
float:left;
}
#authorbox p{
color:#191919;
margin:0;
padding:0px 10px 10px 10px;
}
#authorbox h4 &amp;gt; a{
text-decoration:none;
}
#authorbox p{
color:#191919;
}

{ 8 comments… add one }

Leave a Comment

  • aviationMY February 13, 2010, 1:03 PM

    Hi Pascal, its me once again.

    just want to know how to make my comment box like this:

    http://www.famousbloggers.net/thesis-1-7.html

    1. he put his own logo at the left of the box
    2. he put how many comment counts
    3. he arrange the date, comment count vertically[default is in the same row with commentator name]
    4. the space/padding/margin between text and the top(no. 3 [date,name,comments count]) is far which means if we have a long text comment, the text doesn’t wrap the gravatar at the right.

    hope you can try to look at it as your convenience

    Thank You.

    BTW, i thought only Thesis can put profile box at below the post!

    Reply
    • Pascal February 13, 2010, 11:19 PM

      For your query, we will try to put one post.

      Reply
  • Zubair April 24, 2010, 12:03 PM

    Thanks for this,

    But I want to display author image in author box, and any one who give comment and if it is a user of that site and have photo then it will display with their comments.

    If any body have an idea how to do this then please share it with me.

    Please mail me if there is any plugin for that.

    I also tried this one

    http://wordpress.org/extend/plugins/user-photo/

    but no photo display.

    Thanks,
    Zubair Ansari

    Reply
    • Suresh April 25, 2010, 10:47 AM

      hai.

      go to http://gravatar.com then login and upload your author profile image image. place the code as per our tutorial..

      Reply
  • cascd August 10, 2010, 9:49 PM

    Can we put this code in twenty ten themes?

    Reply
  • Fred January 2, 2012, 10:30 AM

    Thank you for the code..

    Reply
  • Jackie January 21, 2012, 1:19 AM

    Thank you for the tutorial :) Works for me.

    Reply
  • Debajyoti Banerjee July 5, 2012, 2:10 AM

    We have developed a WordPress plugin Easy Author Box that would solve the purpose and also you can place your social profiles there such as Facebook, Google+, Twitter & Email. Check it out here – http://www.7boats.com/wordpress-plugins/rohini/

    Reply