web
analytics
≡ Menu

Add Author Bio In WordPress Thesis Theme- How To

Thesis is the most popular search engine friendly and optimized theme. It provides you very easy experiment to add or update your theme code. It has its own designer tool, which allows you to customize your header menu, Side bar, Footer and other areas with just a few clicks. When i bought thesis, i found little difficulty in adding Author Bio at the end of the post. I tried a lot of methods, but due to my lake of knowledge about CSS and HTML i did not achieved it.

Finally i found a working method for adding Author Bio in WordPress Thesis Theme. Follow the below steps to add a cool and well designed author bio in your blog posts.

Requirements

  1. Fill Your Profile with informative information
  2. Content Width Area should not be more then 550px
  3. If your blog background color is gray i.e. the same as the color of the author bio, then change either your blog background color or author bio background color.

Add Author Bio in WordPress Thesis Theme

Author Bio in Thesis

Edit Your Function.php

Go to your wordpress press Dash Board> Thesis> Custom File Editor and select function.php and click on “Edit” button. Paste the below code in your function.php file and click on “Save Button”

function post_footer() {
if (is_single())
{
?>
<div
>
<?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');

The next step is to customize your Author Bio Area.

Add Code to Your Custom.css

Now select Custom.css from the list and click on “Edit” button. Paste the below code in your custom.css file and save it.

.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; }

Finally you will see a well designed Author Bio at the end of  your blog posts

Customization

You can change the background color according to your theme background color. Similarly you can change text and heading color. Change the bottom and top margin size with accordance to your theme requirement.

Let me know if you have any problem in adding Author Bio in your Thesis theme.

{ 22 comments… add one }
  • Praveen

    June 13, 2010, 5:41 pm

    Wow….This hack helped me to add Author Bio in my new Wordpress blog,

    Reply
  • Shiva

    June 14, 2010, 9:07 am

    I think this hack will help to put an author block not only in Thesis but in other themes too. Thanks Bilal

    Reply
  • Latief@AnotherBlogger

    June 17, 2010, 2:05 pm

    Can I use it for non Thesis Theme?

    Reply
  • Bilal Ahmad

    September 2, 2010, 11:00 am

    This is for Thesis Theme. However you can try on non thesis.

    Reply
  • Henry

    September 5, 2010, 11:58 am

    I managed to add the author bio to the bottom of the post, but is it possible to add the bio to the sidebar underneath the multimedia box?

    Reply
  • DailyTechPost

    September 12, 2010, 3:52 pm

    Great info…i was wondering how to add author info….it has surely helped me a lot….thanks for sharing 🙂

    Reply
  • Tuto

    September 14, 2010, 1:55 am

    many people don’t know this as the thesis theme use custom function and css unlike other theme. Your .postauthor class also give a beauty look.. many thanks..I have use your code

    Reply
  • shashank chinchli

    September 25, 2010, 10:00 pm

    great info,
    hope it make wonders for me!
    thanks for the share!

    Reply
  • Anna@Green Talk

    December 12, 2010, 11:09 pm

    I can’t get the code to show up. Is it because I have a custom skin? I am using 1.8 thesis.

    Reply
  • Bilal Ahmad

    December 13, 2010, 11:25 am

    Anna@ It works fine with a thesis theme. I am also using Thesis 1.8 and you can see no problem with my author bio.
    Try to place the code in correct location in your custom.function.php file.

    Reply
  • TJ

    February 19, 2011, 5:52 pm

    Hey, I’m trying to modify the CSS but my changes aren’t having an effect. Would you mind looking at it and making a suggestion?

    Thanks a ton if you do!

    Reply
    • Nancy

      March 12, 2011, 12:12 pm

      Hi,just passing through,im not good at changing this code ,so i guees you too,but im using this plugin ‘WP About Author’,works really great

      Reply
      • Bilal Ahmad

        March 12, 2011, 2:23 pm

        Nacy@ Using excessive plugins can eat your hosting bandwith. Adding PHP codes manually is good for blog.
        Thanks for using Gravatar for your email.

        Reply
  • Sorin

    September 11, 2011, 5:10 pm

    hello,

    i don;t know what have my custom.css. everything what i add in this file are not reading. is like don;t have permision or something like that. 🙁

    Reply
  • bashir

    November 30, 2011, 6:08 pm

    I can’t get the code to show up. Is it because I have a custom skin? I am using 1.8 thesis.

    Reply
  • meahbashir

    December 1, 2011, 2:21 pm

    Can I use it for non Thesis Theme?

    Reply
  • sai krishna

    April 22, 2012, 1:21 pm

    your author bio is really looking awesome , thanks for publicize your code 🙂

    Reply
  • Krishna

    May 6, 2012, 7:59 pm

    Yeah nice tutorial, I already applied this on to my blog.

    Reply
  • wandisini

    May 8, 2012, 8:29 am

    awesome. thanks bilal. this is what i look for my blog

    Reply
  • otobong

    July 19, 2012, 8:45 am

    Thanks but please its not showing up. What could be the cause, its making my page not to load

    Reply

Leave a Comment