RSSAll Entries Tagged With: "about author"

How to add “About the Author” Box in WordPress.

I had recently updated my blog theme and found that “about the author” box was missing at end of the post . I couldn’t find a good plugin to do the same but found a way to implement it manually .

This will require that you access 2 of your template files, however, very little coding is required.  Just copy and paste, unless you want to make further customization.

Step 1 : Edit single post page. [ single.php ]

Edit single.php [Single Post] page using appearance editor within your admin dashboard. Search for the <?php the_content(); ?> line of code, press enter to give some space then copy and paste the code below that line, then save :

[html]
<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 article(s) for us. <br/><br/><?php the_author_description(); ?></p>
</div>
[/html]

Step 2 : CSS file

Copy the CSS code below to your style.css or custom.css file. This will control the background color, width and text alignment. You may change the color schemes as needed to fit your theme.

[css]
<pre>/* Author’s Bio Box */
.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; }</pre>
[/css]

Step 3 : Author’s Bio

Add the author’s bio information in the About Yourself section in the wordpress dashboard.

Hope this tutorial was simple enough and very helpful !