You’ve just spent hours writing a great blog post and press the publish button and the only credit you get is your name. Well here is how to change that by adding a great profile about you, the author and extra contact details if you want them.
Adding an “About the Author” box to your posts is a simple way to upgrade your WordPress blog. You’ll have your posts branded in under 10 minutes its that easy.
The Goal
Once you understand the power of WordPress tags to call and insert information into theme template files you can easily build a dynamic site and customise your posts.
Here is an example of a simple author box with a Gravatar image and description.
Creating a new author box template file and adding it to your blog posts
WordPress has template tags that makes coding new templates much easier where you load mini template files into the main template. You can see this being used in your theme’s comments template.
comments_template(); // include comments template
Loading your author box in a similar way makes editing php files much easier as they can be put together from smaller more manageable php files. We don’t need to keep repeating code in our templates.
get_template_part( 'content' , 'author' ); // Include Author Bio
This piece of code will look for a file in your theme directory called content-author.php and load it into the template just like the comments are loaded. Writing template files in php is much simpler than filling your single.php file with the following author box code. Create a file called content-author.php in your theme directory and paste the following code.
<?php
/**
* Template for Author Box
*
* @package Builder
* @subpackage BuilderChild-RealEstateConnected
* @since 1.0.0
*/
?>
<!-- Author Bio -->
<div id="author-box" class="clearfix">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
<div class="author-text">
<h4>About <?php the_author_posts_link(); ?></h4>
<p><?php the_author_description(); ?></p>
</div>
</div>
The code will grab your Gravatar image, and and the text in your user profile Biographical Info. Don’t forget to setup your free Gravatar account and put a face to your email address.
How to call the Author Box template into your single.php file in your WordPress theme
Your theme may be different but just look at where the comments section start. WordPress TwentyEleven theme single.php comments_template line looks like this.
<?php comments_template( '', true ); ?>
Open your single.php in your active theme and insert this above it.
<?php get_template_part( 'content' , 'author' ); // Include Author Bio ?>
Add the CSS to your active theme style.css file
The CSS will work for both the standard and detailed author box. Add this css to the end of your style.css in your theme directory.
/*********************************************
Author Box
*********************************************/
#author-box{
background:#EFEFEF;
border:1px solid #CECFD0;
margin:1em 0;
padding: 1em;
}
#author-box h4{
margin:0;
padding:0;
}
#author-box .author-text{
margin-left: 1em;
float: left;
width: 81%;
font-size: 0.8em;
line-height: 1.2em;
}
#author-box.detailed-author .author-text{
width: 73%;
}
#author-box .author-social-links {
width: 32px;
margin-left: 1em;
float: left;
}
.social-32 {
display: inline-block;
text-indent: -999em;
height: 32px;
width: 32px;
text-decoration: none;
padding: 2px;
vertical-align: middle;
}
.social-32:hover {
opacity: 0.7;
}
#author-box .facebook {
background: url(images/facebook32.png) no-repeat;
}
#author-box .twitter {
background: url(images/twitter32.png) no-repeat;
}
#author-box .author-text p{
margin: 0.5em 0 0;
}
#author-box .author-contact {
margin-top: 0.5em;
}
#author-box img{
width: 80px;
margin: 0;
float:left;
}
Next I will show you how to add more contact information to your User Profile, hide unused stuff like AIM, Jabber and add social buttons.
Here is the advanced author box tutorial.
This author box offers more contact information which is great to add to real estate listing pages so buyers can contact you and connect with you on Facebook and Twitter.
Let me know how you go with the above tutorial and post any questions below.
