How to add an author box after my post in WordPress
This tutorial will show you how to easily add an author box to your posts.
Here is a snapshot of my author box:
The first step to creating your own is to add your author bio in the WordPress admin area.
Login to your WordPress admin area.
Click on “Your Profile” under the Users tab.
Once the page loads, scroll down a bit until you see:
Enter your biography into the box. Click on Update Profile.
We will now add the author box code to your theme.
Click on the “editor” link under the Appearances tab.
We will need to edit two files: your stylesheet (usually stylehseet.css) and your post page (usually single.php)
First click to open your stylesheet.css
Add the following code at the end of the file:
#authorbox{ background:#000; border:1px solid #000; width:550px; margin:0 auto; margin-bottom:10px; overflow:hidden; }
#authorbox h4{ font-size:16px; color:#fff; margin:0; padding:10px 10px 5px 10px; }
.authortext{ padding-left:100px; }
#authorbox img{ margin:0; padding:10px; float:left; }
#authorbox p{ color:#fff; margin:0; padding:0px 10px 10px 10px; }
#authorbox h4 a{ text-decoration:none; }
#authorbox p{ color:#fff; }
You can play around with this code to fit your own theme. For sure you will probably need to edit the following options:
- Background color of the author box (currently set to black)
- Width of the author box (currently set to 550px)
Once you add this code, save the stylesheet.
Now open your post template, usually single.php
Add the following code wherever you would like your author box to appear. I added mine right before the comment section (< div id = ” comment ” >).
<div id="authorbox">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
<div class="authortext">
<h4>About <?php the_author_posts_link(); ?></h4>
<p><?php the_author_description(); ?></p>
</div>
</div>
Save the file and your author box should now appear.
If you run into any troubles, let me know below.
Related tutorials that might interest you:
