Adding an author box to the end of all your WordPress posts is  a great way to introduce yourself to new readers. Its also the most popular way to add some information about the post author and personalize your blog.

There’s many WordPress plugins which will add an author box for you quickly & easily which you’ll find in other posts i have written.

In this tutorial i’ll show you 2 ways to add an author box manually using both php & css code which i will supply.

Adding Code to Your Single.php File

Firstly, here’s the css code which you need to add to your theme’s style.css file.

Tip: When you update your theme, all your custom coding additions & edits will be lost. In order to avoid this simply create a child theme which won’t be overwritten when you update your theme. If your’e using the Twenty Eleven theme, here’s free blank child theme to save your custom coding in.

#authorarea{
background: #fff;
border: 2px solid #d3d3d3;
padding: 5px;
width:600px;
overflow:hidden;
color: #444;
}
#authorarea h3{
font-size: 20px;
color:#444;
margin:0;
padding:10px 10px 5px 10px;
}
#authorarea h3 a{
text-decoration:none;
color: #444;
font-weight: bold;
}
#authorarea img{
margin:0;
padding:5px;
float:left;
border: 1px solid #ddd;
width: 90px;
height: 90px;
}
#authorarea p{
color:#444;
margin:0;
padding:0px 10px 10px 10px;
}
#authorarea p a{
color:#444;
}
.authorinfo{
padding-left:100px;
}

You can easily edit this code to your own liking by changing the hex color codes, padding and borders to match your theme’s styling.

Once you have saved the css code to your style.css file, its time to add the php code to create the function which is executed below your content on single posts.

[box type="info"]Caution: Always backup your files before editing php code.[/box]

Add this code to your theme’s single.php file inside the WordPress loop.
<div id=”authorarea”>
<?php if (function_exists(‘get_avatar’)) { echo get_avatar( get_the_author_email(), ’100′ ); }?>
<div class=”authorinfo”>
<h3>About <?php the_author_posts_link(); ?></h3>
<p><?php the_author_description(); ?></p>
</div>
</div>

This code will pull your avatar from Gravatar and insert it into your author box. I have made the size 90 pixels but you can change this if you like as well as the h4 tags to h3 or h2.

If you don’t have a Gravatar, i suggest you head on over and sign up for free. Gravatar is owned by Automattic, the company which owns WordPress.

The second way to add an author box to your posts is a better method in my opinion however the code below works only on the Thesis theme and needs to be edited in order to work on other themes.

Adding a Author Box in Single Posts Using The Thesis Theme

Paste this css code into your custom.css file editor
.custom .author_info {
border:1px dotted #666;
padding:1.0em;
}
.custom .author_info a {
color:#cc0000;
border-bottom:1px dotted #fff;
text-decoration:none;
}
.custom .author_info a:hover {
border-bottom:1px dotted #cc0000;
}
.custom .author_info .author_photo img {
border:1px dotted #666;
padding:0.2em;
float:left;
margin:1.0em 1.0em 1.0em 0em;
}
.custom .author_info p {
margin-top:0.8em;
margin-bottom:0.4em;
}
.custom .author_info p.author_email {
text-indent:1.8em;
background: url(‘images/my-email-icon.gif’) 0px 4px no-repeat;
}

Next step is create the function using php code which you’ll need to paste in your custom.functions file editor
function thesis_author_box() {
if (is_single()) {
?></pre>
<div>
<h4>This post was written by…</h4>
<!–?php the_author_posts_link(); ?–> – who has written <!–?php the_author_posts(); ?–> posts on.

<!–?php the_author_description(); ?–>

<a title=”Send an Email to the Author of this Post” href=”mailto:<?php the_author_email(); ?>”>Contact the author</a></div>
<pre> <!–?php }
}

add_action(‘thesis_hook_after_post’,'thesis_author_box’);</pre–>

 

Thanks to DIY themes for this code. If you want to change the location of the author box, you can use another hook rather than.

thesis_hook_after_post.

Thesis offers a huge range of custom coding for customizing the thesis theme.

You can change the size of your image by editing the code. The image is pulled from Gravatar based on your users profile email address.

Go to Gravatar for a free avatar using your profile email address if you haven’t already.

If you’re are not using Thesis, you could modify this code using your themes Hooks (Filters & Actions) to match your themes.

You can also use the Thesis Hook manager plugin to execute any type of code in any hook location.

How did you go adding your author box? 

Which method do you think is better? Using the single.php file or themes functions.php?