How To Create a Detailed Author Box in Wordpress Blog with Links To your FaceBook, Twitter profiles and add Your Phone number

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.

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.

Part 1 – Creating a simple author box with your photo, name and profile

How to do the easy one

<?php
/**
 *	Template for Author Box
 *
 *	@package 		Builder
 *	@subpackage		BuilderChild-InvestorsEdge-Avail
 *	@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 CSS will work for both the detailed and standard author box.

/*********************************************
	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;
}

Part 2 – Adding more details to your user profile and including these in your details author box

WordPress out of the box has the following default contact info for users.

I don’t know about you but I don’t have an AIM, Jabber, Yahoo IM account as I prefer Skype, Facebook and Twitter to keep connected so use the code below to transform the Contact Info into something more relevant to what you need.

How to add additional Contact Info to Your WordPress User Profile

The following code will go into your theme’s functions.php file located in wp-content/themes/{your_current_theme}

This code will add fields to the Contact Info section in your User Profile settings page where you can add Twitter and Facebook IDs.

// My Custom User Profile Contact Details
function super_contactmethods ( $contactmethods ) {
		$contactmethods['mobile'] = 'Mobile'; // Add Mobile Phone Number
		$contactmethods['twitter'] = 'Twitter'; // Add Twitter
		$contactmethods['skype'] = 'Skype'; // Add Skype
		$contactmethods['facebook'] = 'Facebook'; // Add Link to Facebook profile
	return $contactmethods;
}
add_filter ('user_contactmethods','super_contactmethods',10,1);

The next code will hide the AIM, Yahoo and Jabber options from the user profile page. If you still want Yahoo, just remove or comment or delete the line that you want to keep.

// Hide other contact methods
function hide_other_contacts( $contactmethods) {
		unset( $contactmethods['aim']); // Hide AIM Field
		unset( $contactmethods['yim']); // Hide AIM Field
		unset( $contactmethods['jabber']); // Hide AIM Field
	return $contactmethods;
}
add_filter('user_contactmethods','hide_other_contacts');

Your Contact Info panel should look like this now

Now that you have added the above additional fields you can use these in your template file.

How to make an Author Box with Additional Contact Fields

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 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 then editing the single.php and filling it 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 Detailed
 *
 *	@package 		Builder
 *	@subpackage		BuilderChild-InvestorsEdge-Avail
 *	@since			1.0.0
*/
?>
<!-- Author Bio -->
		<div id="author-box" class="detailed-author 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 class="author-contact">
						<div class="mobile">Phone <?php the_author_meta('mobile'); ?></div>
						<div class="email">Email <a href="mailto:<?php the_author_meta('user_email'); ?>"><?php the_author_meta('user_email'); ?></a></div>
					</div>
			</div>
			<div class="author-social-links">
					<a class="facebook social-32" href="http://www.facebook.com/<?php the_author_meta('facebook'); ?>" title="Facebook" target="_blank">Facebook</a>
					<a class="twitter social-32" href="http://twitter.com/<?php the_author_meta('twitter'); ?>" title="Twitter" target="_blank">Twitter</a>
			</div>
		</div>

This will produce the detailed author box for you.

The code will grab your Gravatar image, add your phone number, email address and links to your Facebook and Twitter profiles. Don’t forget to setup your free Gravatar account and put a face to your email address.

The CSS

Add this css to 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;
}

Excellent Resource for Social Icons

Easy Property Listings plugin for real estate websites has a tabbed author box built in. You can even use the Staff Directory extension to add even more features to the author box.