Creating the Author’s Profile Block

Recently, I added author profile blocks to the bottom of my blog posts.  This was inspired by advise from the team at Wishlist Products and after I saw their author info boxes.

There are many benefits to incorporating an Authors info box on your site – the least of which is having guest authors that you can show case.

I thought I would share how I’ve created this box….

Let’s start with the code I use first.  Below is the block of code I have inserted in my themes single.php file however, it can be inserted into any of the theme files where there is an author.

<!– About The Author –>
<?php $authoremail=get_the_author_meta('user_email'); ?>
<div style="width:100%; margin-top:10px; float:left; font-size: 12px;border:5px solid #EDEDED;" id="authordiv">
<div style="width:125px; float:left; padding: 5px;">
<?php echo get_avatar($authoremail,$size='125′,$default='<path_to_url>' ); ?>
</div>
<div style="width: 415px; float:left; padding: 5px;"><p><?php echo the_author_meta( 'description' ); ?><br />
<a href="<?php the_author_meta( 'user_url' ); ?>" style="font-size:10px; color:#0000ff;font-weight:bold;"><?php the_author_meta( 'user_url' ); ?></a></p>
</div>
</div>
<!– End About The Author –>

Breaking this down into sections will help.  I’m going to ignore the formatting that I’ve included for now and focus on the code, then add the formatting.

Getting the Authors Avatar

Displaying a photo of the author is really quite important – it helps to connect the reader with the author.

To simplify things, I decided to use the Gravatar system.  Your authors will need to register an account for the email address they are using on your site at Gravatar.com and upload their image.  The benefit of this, is that image can be used across a variety of sites that already use Gravatar (like most WordPress commenting systems do).

This line uses the standard WordPress function get_the_author_meta to retrieve the email address and then assigns that value to the variable $authoremail.

<?php $authoremail=get_the_author_meta('user_email'); ?> 

To display the author’s Gravatar on the page, we use the following line:

<?php echo  get_avatar($authoremail,$size='125′,$default='<path_to_url>' );  ?>

The get_avatar function is standard to WordPress and allows site owners to modify the size of the displayed avatar using the $size= paramater.  In this case, I’ve set the avatar to 125px by 125px.  Note the use of the variable $authoremail – this was set in the previous line of code.

The Author Bio

I’ve also allowed the use of html in my author description field.  By default WordPress strips out any html characters and leaves a plain text profile.  Whilst this isn’t desirable, it does protect your site from poorly formed code being added to the profile.  If you really want to allow for the use of html code in your user profiles (I wanted to link to other images) add the following line of code to your functions.php file in the theme.

// enable html markup in user profiles
remove_filter('pre_user_description', 'wp_filter_kses');

Now to add the users profile and link to their website….

<?php echo the_author_meta( 'description' ); ?>

This will retrieve the content of the authors description field and ‘echo’ it to the screen.

To display a nicely formatted link to the Authors website:

<a href="<?php the_author_meta( 'user_url' ); ?>"  style="font-size:10px; color:#0000ff;font-weight:bold;"><?php  the_author_meta( 'user_url' ); ?></a></p>

Using the built in function the_author_meta(‘user_url’) will retrieve the website address from the authors profile.  There is no need to use the echo function, as the_author_meta will automatically echo the output to the screen.

The rest of the code lays the components out on my page nicely.  You’ll have to tweak your code to suit your layout.

To create an Author archive page, I use a similar approach.

Initially, I copy my page.php theme file and call it author.php.

At the top of my author.php page I place:

<?php if(isset($_GET['author_name'])) :
$curauth = get_userdatabylogin($author_name);
$authorset = 1;
else :
$curauth = get_userdata(intval($author));
endif; ?>

Then, just above the line:

 if (have_posts()) : 

<?php if (is_author()) { ?>
<!– About The Author –>
<?php $authoremail=get_the_author_meta('user_email'); ?>
<div style="width:100%; margin-top:10px; float:left; font-size: 12px;border:5px solid #EDEDED;" id="authordiv">
<div style="width:125px; float:left; padding: 5px;">
<?php echo get_avatar($authoremail,$size='125′,$default='<path_to_url>' ); ?>
</div>
<div style="width: 415px; float:left; padding: 5px;"><p><?php echo the_author_meta( 'description' ); ?><br />
<a href="<?php the_author_meta( 'user_url' ); ?>" style="font-size:10px; color:#0000ff;font-weight:bold;"><?php the_author_meta( 'user_url' ); ?></a></p>
</div>
</div>
<!– End About The Author –>
<?php _e('Posts by Authors',kubrick); ?>
<?php  }?>

This will allow your visitors to click on the authors link in the post, and see all the articles by an author.  An example of the author profile page can be seen here