How to Add Author Bio to WordPress Blog Posts

Most of the WordPress themes today come with author bio pre-installed but still some do not. In that case you can get one either by installing a plugin or by hard coding the author bio section in your theme’s single post page. Most of the bloggers go for the plugin option since it’s the easier one. But if you think you already have a lot of plugins and do not want to add one more to the list, here is how to get it done through coding. Ah it too is not that difficult either.

author bio in WordPress posts

So, to have a small author bio section just below your post:

1. Log in to your WordPress admin panel

2. Navigate To Appearance >> Editor

3. The page which appears before you once you navigate to above location is the CSS file of your site; or in simple words, it’s the file where your site’s design lies. Scroll to the last line of the page hit enter to create a space and then put this small piece of code there (in your Style.css file):

#authorbox{

background:#EFEFEF;

border:2px solid #CECFD0;

width:538px;

margin:0 auto;

margin-top: 5px;

margin-bottom:10px;

overflow:hidden;

}

#authorbox h4{

font-size:16px;

color:#191919;

margin:0;

padding:5px 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 > a{

text-decoration:none;

}

#authorbox p{

color:#191919;

}

4. Once you are done with pasting the above code in the Style.css file, search for the page called single.php. Open it and get to the desired location where you want the author bio to appear and then paste the below given code there:

<div id=”authorbox”>

<?php if (function_exists(‘get_avatar’)) { echo get_avatar( get_the_author_email(), ’80′ ); }?>

<div class=”authortext”>

<h4>About <a href=”<?php the_author_url(); ?>”>

<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>

<p><?php the_author_description(); ?>. <?php the_author_firstname(); ?> has written <strong><?php the_author_posts(); ?></strong> awesome articles for <?php bloginfo(‘name’); ?>, See all the posts written by <?php the_author_posts_link(); ?>.</p>

</div>

</div>

Note: If you are not able to decide where to place the code, then place the above code just below the following code in your single.php file (This will make your author bio appear just below your post):

<div>

<?php if (function_exists(‘digg_this_button’)) { ?><div style=”float: left;”><?php digg_this_button(); ?></div><?php } ?>

<?php the_content(‘<span>Continue Reading</span>’); ?>

<!– google_ad_section_end –>

<?php wp_link_pages(‘before=<div id=”page-links”>&after=</div>’); ?>

</div>

Now, save the changes to the single.php file and clear your browser cache; it’s time for a site preview. Go to a post and you should find your author bio appearing there.

Leave a Reply

Your email address will not be published. Required fields are marked *