How to Add an About Author Box in Thesis 1.6

After posting a general tutorial on How to Add Thesis Image
an About Author Box in the Post Footer in WordPress
yesterday, my visitor traffic soared and quite a few persons were asking me how to add the author box to the Thesis theme. So since I like to please my readers, here’s a short and easy tutorial on how to get it done.

Step 1 – Add your bio to wordpress

Fill out your profile information in the wordpress Users’ Profile section. Ensure to add your first name and your site’s name because the script will be calling and displaying this information on your posts.

Step 2 – Code in the Custom_functions.php file

Access your Thesis Options (Located at the bottom-left in your wordpress admin) and select Custom File Editor, this is where you will add the code to call the bio information. Within the thesis custom file editor, ensure that custom_functions.php is selected in the file selection drop-down menu at the top. If it is not selected then select it from the drop-down menu and click Edit Selected File.

Then add the code below at the end of the file and click save:

function post_footer() {
if (is_single())
{
?>
<div class="postauthor"
>
<?php echo get_avatar( get_the_author_id() , 120 ); ?>
<h4>Article by <a href="<?php the_author_url(); ?>">
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
<p><?php the_author_firstname(); ?> has written <strong><?php the_author_posts(); ?></strong> awesome articles for us. <br/><br/><?php the_author_description(); ?></p>
</div>
<?php
}
}
add_action('thesis_hook_after_post_box', 'post_footer');

Note: For the code in the bold highlight above, the RSS feed addresses should be changed to your own.

Step 3 – Code in the Custom.css file

Within your custom file editor select Custom.css from the drop-down menu and click edit selected file. Then add the css code below at the end of the file and hit save:

.postauthor { background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }

You should end up with something like this: Thesis Author BoxAnd that’s it. Hope you found this useful.

Please let me know if this works for you or if you have any difficulties. Everybody is going crazy over the Thesis theme, can anyone convince me as to why I should switch?

Robyn-Dale Samuda is a Web Developer & Entrepreneur & is CEO of Creative Engine Jamaica - Web Design. He has a passion for the web and loves offering assistance and inspiration whenever possible and does so through Sam's Web Guide. He is also a Writer for the popular blog, Blogging Pro. Follow him on twitter Here

Got something to say? Please share it with us below!

27 Comments on "How to Add an About Author Box in Thesis 1.6"

  1. great post mate ….very helpful for thesis users.
    .-= Dev | Technshare´s last blog ..12 ways to Increase comments on your Blog =-.

  2. Sam says:

    Thanks for reading Dev. Please retweet. Thanks :)

  3. Jamaipanese says:

    this should be very useful to thesis users
    .-= Jamaipanese´s last blog ..Monster Hunter Tri Will be HUGE =-.

  4. Fazreen says:

    I notice your blog title goes down. Maybe you should shorten the ‘subscribe link’ at the top of your blog to fix it.
    .-= Fazreen´s last blog ..How To Upgrade From Thesis 1.6 To Thesis 1.7 =-.

    • Sam says:

      Hey Fazreen,

      Thanks for giving me the heads up. I’ve never had that problem with my display though. What screen resolution are you using or are you using the zoom feature in your web browser? I think these factors may affect that.

      Please let me know.
      .-= Sam´s last blog ..6 Awesome WordPress Alternatives =-.

      • Fazreen says:

        I’m using old version off firefox as I’m using LINUX OS. Don’t worry it looks fine when i view in latest version off firefox on windows OS.

  5. I’m the sole blogger on a couple of blogs, but own a large, group blog. I’l be updating it to Thesis in the next month or so (have some hacking to fix) and will try this out. Perfect for a group blog. Thanks!
    .-= Alison Moore Smith@Easy Blog Setup´s last blog ..31DBBB: Day #9 Join a Forum and Start Participating =-.

  6. I didn’t want to learn how to add an author box. However, I did need to learn how to had post footer content. Your post was the most helpful. Once I decide on exactly what content I want to add to my post footer, I’ll be golden. Thanks!

    This is my first time on your site. It looks great! I’ll be visiting often from now on.
    .-= Chuck Edwards@Weight Loss Blog´s last blog ..The Special K Diet and Challenge =-.

    • Sam says:

      Hey Chuck,

      I’m really glad you like my site. I took a look at yours and I must say that the information you’re providing there is awesome. Let me know if you need further help with your thesis theme.

  7. You forgot to link the CSS to the code. You need to put class=”postauthor” in the opening DIV tag for your code to work. Other than that it works like a charm.

  8. Great tutorial Sam!

    It was exactly what i need and with it, I have just customized my thesis theme.

    Thanks a lot for the great post,
    -Onibalusi

  9. Tia says:

    Thanks, Sam. Just finally switched over to Thesis on my own blog and this really helped. :)

  10. sanya says:

    hi,

    pls tell me can we use this bio box only after posts, not after pages??
    Please reply soon, i need to implement it asap…

    Thanks a lot.

    • Sam says:

      Hello Sanya,

      Sorry for taking so long to reply.

      You can actually add it to pages. Instead of using if (is_single()) at the start of the code, you would use if (is_page())

      The code in the tutorial is only for posts.

  11. Works like a charm. Nice work!

  12. Lee says:

    This is exactly what I was looking for. I just have one question for you…for contributing authors, how do I upload their picture to be shown?

    • Sam says:

      Glad it helped Lee.

      For contributing authors’ images to be shown, they will need to create a gravatar account at gravatar.com and ensure that they complete their author bio information in the wordpress dashboard with the same e-mail. Once this is done their image will be automatically shown.

      Let me know if this helps.

  13. sanya says:

    Hi,

    Thanks for the help sam, it works great.

  14. henry says:

    hi
    how do you add an author bio to the top of the side bar?

  15. Jason Ulsrud says:

    Thanks so much for this tutorial. It was exactly what I was looking for and it works perfect.

Trackbacks for this post

  1. designfloat.com
  2. Vote on this article at blogengage.com