How to add the Author’s profile box at the end of the post in Thesis Theme

by Pascal on December 29, 2009

In this tutorial you can learn how to add the author’s profile box at the end of the post. In your website, if anybody writing the guest post , the visitors can easily recognize about the author of the post through this. To show in author’s profile box, the details are taken from the admin panel of the user profile. It’s not only for guest post but also any author of the post.

Before adding the Author’s profile box:

Author’s profile box Before

After adding the Author’s profile box:

Author's profile box after
Author’s profile box After

How to add this Author’s profile watch this video below:

It’s take too much time to buffering. Don’t hesitate. Keep reading rest of the post.

1. Login to wordpress admin panel.

2. Go to user panel then select your profile and type the biographical info about yourself.

3. Then, click update.

4. To do this process use FTP. copy this below code and paste it on  launch.php or custom_function.php.

function post_footer_author() {
if (is_single())
{ ?>
<div class="postauthor">
<?php echo get_avatar( get_the_author_id() , 100 ); ?>
<h4>Article by <a href="<?php the_author_url(); ?>">
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></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>
<?php }
}
add_action('thesis_hook_after_post_box', 'post_footer_author');

5. Then you should change your own RSS, Email, and You tube url.

6. Final step  paste the below code into custom.css.

/* code for Author's profile box below the post */
.postauthor {background: #F5F5F5;
&nbsp;border-top: 1px solid #e1e1e0;
&nbsp;border-bottom: 1px solid #e1e1e0;
overflow: hidden; padding: 1.5em;
}
.postauthor img {border: 1px solid #e2dede;
float: left;
&nbsp;margin-right: 1.5em;}
.postauthor h4 {color: #666;
font-size: 2em; margin-bottom: 5px;}
.postauthor p {color: #515151; font-size: 13px;
margin-bottom: 12px;}.postauthor p.hlight {font-size: 11px;
text-transform: uppercase;}.postauthor p.hlight span {color: #CB3131;
font-size: 1.5em; font-style: italic;
font-weight: bold; letter-spacing: 0.8px;}
.custom .postauthor p {
fontsize:15px;}
.custom .postauthor p.hlight{
fontsize:13px;
fontweight:bold }

Share your experience in comment section below:

Related Tutorials:

  1. How to create Author box in wordpress blog?
  2. How to add Page Navigation Menu without Using Open Hook Plugin in Thesis Theme
  3. How to highlight Author comments with image and background color in Thesis theme?
  4. How to Display Track backs after Comments in Wordpress Thesis Theme?
  5. 11 Css Tricks for Thesis Theme Customization

{ 37 comments… read them below or add one }

Isaac | GoBlogger December 29, 2009 at 3:09 AM

Nice tutorial buddy. I’ve seen some thesis users use that nice author box. Quite popular I guess.

Reply

Pascal December 29, 2009 at 4:21 AM

Yes. This is popular among thesis users especially blogs which have multi author or more guest authors use this option.

Reply

aviaitonMY January 10, 2010 at 2:47 PM

Namaskar,

when i watched your YouTube there i found you’re Indian blogger with a lot of mad skills..

Thank you for this author box tutorial..and maybe you will se my comments again and again until i have done my Thesis customization. Will tell you soon as my weblog is ready.

BTW, just wanna ask.. how to make “share with your friends like yours” its look cool

p/s: send my regards to Asin and Namrata Shirodkar.

Reply

Pascal January 10, 2010 at 3:29 PM

For quick help, Use search box in navigation you will get your ans for your query.

see this link http://fourblogger.com/how-to-add-social-bookmark-button-links-in-posts/

Reply

Sandesh Mascarenhas December 29, 2009 at 2:17 PM

Excellent post Pascal……… :)

Reply

Pascal December 30, 2009 at 1:15 AM

Thanks Sandesh.

Reply

Tech Maish December 30, 2009 at 12:59 AM

Yes this is very useful and great post.Thank you so much.
Voted.

Reply

Pascal December 30, 2009 at 1:16 AM

Thanks a lot.

Reply

aaslin January 8, 2010 at 9:09 PM

hi,pascal,i implemented it,but there is no background for that.it shows only text.help me

Reply

Pascal January 8, 2010 at 9:37 PM

Ya surely i will help you..

Reply

aaslin January 8, 2010 at 10:24 PM

thanks for doing it for me yourself.thanks for your help!!! as always fourblogger is helping blogger.

Reply

Pascal January 8, 2010 at 10:52 PM

Thanks.

Reply

Keith February 8, 2010 at 3:59 AM

I have tried this from several different tutorials and none of them seem to be working correctly. My picture shows above the author info, there is no real “box”, the fonts are tiny, and the coloring of the box doesn’t seem to work either…. not sure what I could be doing wrong and I only started using thesis last week. Not sure what I could be doing wrong, I added the code by copying and pasting and I tried adjusting the fonts in the code, still nothing.

Thanks for the tutorials, I have used several that worked great.

Reply

Suresh February 8, 2010 at 11:32 AM

hai Keith,
I saw your site. In your custom.css file you have placeed the code for logo
ie. .custom #logo a { }. In this code you have missed the close brace } . That’s why author box and widgetized footer is not working. So add close brace in logo css code then your author box and footer will working fine.. if you have problem contact via gtalk admin@fourblogger.com

Reply

Keith February 8, 2010 at 7:58 PM

Thank you so much Suresh, that fixed my footer issues I was having too.

A friend of mine started a forum just for bloggers (do-follow links too) and I was going to start a section just for thesis, would you be will to post tutorials there and answer questions if people ask them? http://bloggerluv.com/community

I will add the thesis topic on there today.

Reply

Pascal February 8, 2010 at 10:14 PM

Thanks for giving this opportunity. Now i am engaged with some other works. after finishing that works, surely i will participate in your community. once again thanks.

Reply

Haja Peer Mohamed H February 23, 2010 at 6:57 PM

hey, i cant find it working.. receiving some error like.. ”
Parse error: syntax error, unexpected ‘<' in /homepages/5/d238782941/htdocs/bloggerluv/wp-includes/default-filters.php on line 229
"

Reply

Pascal February 24, 2010 at 7:33 AM

Hi Haja Peer Mohamed,

i saw your site. it is not thesis theme so you cant add author box with this thesis code. for your theme i already put post click follow link http://fourblogger.com/how-to-create-author-box-in-wordpress-blog/

Reply

Haja Peer Mohamed H February 23, 2010 at 6:55 PM

Nice work!

ALso let me know how to do the same when using blogger? any reference sites?

Reply

Sukhjit Singh February 26, 2010 at 9:23 PM

Dude, I am using thesis with Blogussion theme. But this does not seems to work on that as it shows error on custom function file. Can u help me?

Reply

Suresh February 27, 2010 at 2:28 PM

hai sukhjit singh,
First place the code in your site then only we can identify what is the problem you have and solve it..otherwise tell me clearly what error you get when you place the code..

Reply

Sukhjit Singh March 4, 2010 at 8:23 PM

The error is parse syntax error on some line…. It worked fine on Thesis normal but on blogusion one has problem.

Reply

Suresh March 8, 2010 at 6:52 PM

hai,
we haven’t tested in blogusion skin..

Reply

Thesis Theme Design March 12, 2010 at 11:58 AM

Letting the world about the Author of a post is quite a popular trends of today’s blogging atmosphere. Thank you very much for providing a useful post to flow myself in this popular wave.

Reply

aaslin April 14, 2010 at 11:16 PM

I added the code for author box mentioned on this post in my blog http://www.sfihomebizz.com. The box is appearing but the author box has distorted and pushed the sidebar to bottom of the page. While saving my firefox closed abruptly and the next thing I see this result on my blog. Can you please check my blog and help me out in this

Reply

Suresh April 15, 2010 at 8:02 PM

hai,

This is not because of the author box code check your comment box code.. there is no css code available for your comment section.. adjust the comment width..

Reply

aaslin April 15, 2010 at 8:26 PM

thanks suresh

Reply

diWordpress April 28, 2010 at 12:45 AM

Thanks for this Pascal! :D

Reply

Deyson May 14, 2010 at 1:10 AM

Thank you sir, you tutorials are quick and easy, which is great when you have very little time to learn new things.

Keep them coming!

Here is the final result of your tutorial:
http://deysonortiz.com/blog/photography/photographers-find-out-who-has-been-using-your-images/

Deyson Ortiz

Reply

Chirag May 17, 2010 at 5:15 PM

Great tutorial! I implemented this code. Its great :)

Reply

Jason Coffee June 12, 2010 at 8:18 PM

Pascal, I put in the code in the specified manner but I am seeing no results. I must be doing something wrong.

Reply

Suresh June 15, 2010 at 5:20 PM

hai Jason,
Once again check do you have code in your custom function.php file or not..
I am not seeing ant ode in your site.
tell me where you are getting problem exactly…

Reply

Will July 3, 2010 at 9:56 AM

Your Tutorials are absolutely amazing, you saving lots of headaches

Reply

Pascal July 3, 2010 at 11:16 AM

Glad you liked it.

Reply

Asrul July 9, 2010 at 10:23 AM

Pascal, how to change the avatar? Can you show me the way?

Reply

Pascal July 20, 2010 at 11:09 PM

Thanks. Contact me via contact form, if you want my service on this work.

Reply

Asrul July 20, 2010 at 11:18 PM

@ pascal :. nah..its ok.

Reply

{ 1 trackback }

You are now listed on FAQPAL
December 29, 2009 at 2:24 AM

Leave a Comment

Page 1 of 0