How to Make a Royally Awesome Author Template in WordPress

I’ve been trying some new stuff with my client’s websites as of late.  I wanted something where a multi-blog site could get the most out of as few plugins as possible, and still have a really awesome way to display their author’s main information.  But, the information they ask for doesn’t have everything.  What about twitter profiles? Facebook links?

There’s a few things we can do to enhance the process.

We’re going to be accomplishing a few things here:

1. Building an author.php template to take care of author links
2. Downloading and installing any necessary plugins
3. Customizing the author profile with new fields.
4. Calling those new variables in the author template.

Step 1: Building an Author.php template

So, WordPress’ structure for templates goes as follows:

• author.php
• archive.php
• index.php

It looks for files (top to bottom) and uses whichever one it finds to do its bidding.  Since default templates don’t usually have one, we’re going to build an author.php file.  To start with, let’s make it look something like this:

<?php get_header(); ?> <div id="content" class="narrowcolumn"> <!-- This sets the $curauth variable --> <?php if(isset($_GET['author_name'])) : $curauth = get_userdatabylogin($author_name); else : $curauth = get_userdata(intval($author)); endif;  ?> <h2>About: <?php echo $curauth->nickname; ?></h2> <dl> <dt>Website</dt> <dd><a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a></dd> <dt>Profile</dt> <dd><?php echo $curauth->user_description; ?></dd> </dl> <h2>Posts by <?php echo $curauth->nickname; ?>:</h2> <ul> <!-- The Loop --> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <li> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"> <?php the_title(); ?></a>, <?php the_time('d M Y'); ?> in <?php the_category('&');?> </li> <?php endwhile; else: ?> <p><?php _e('No posts by this author.'); ?></p> <?php endif; ?> <!-- End Loop --> </ul> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>

What this does is set up the author variables, calls some basic variables like name, url, and a bio (description), and displays the last X posts (defined by the number set in the options menu).  We’re going to be modifying this quite a bit, but this gives us a good start point.

Save this as author.php, send it to your server via FTP, and open it in your theme editor to make sure it looks OK.

Step 2: Plugins We’ll Need

Actually, we’ll only need one plugin to really get the most out of this: the Authors Widget plugin. This gives us a really cool widget that pulls the author’s name and gravatar (if you choose) and displays post counts (also if you choose – lots of options).  It’s a fast way to showcase all the authors in the sidebar.  If you click on the author’s name, it takes you to their author page (which is what you just build [author.php]).

Step 3: Adding Fields to the User Profile

Open the theme editor and edit (or create an upload if you don’t have one) the functions.php file.  This file has lots of drop-in options you can get from Google to enhance your theme.  Widgetized sidebar code goes here too, so most people have one already.

Drop in this data:

add_action( 'show_user_profile', 'my_show_extra_profile_fields' );
add_action( 'edit_user_profile', 'my_show_extra_profile_fields' );

function my_show_extra_profile_fields( $user ) { ?>

<h3>Extra profile information</h3>

<table class="form-table">

<tr>
<th><label for="twitter">Twitter</label></th>

<td>
<input type="text" name="twitter" id="twitter" value="<?php echo esc_attr
( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">Please enter your Twitter profile URL.</span>
</td>
</tr>

<tr>
<th><label for="facebook">Facebook</label></th>

<td>
<input type="text" name="facebook" id="facebook" value="<?php echo esc_attr
( get_the_author_meta( 'facebook', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">Please enter your facebook profile URL.</span>
</td>
</tr>

<tr>
<th><label for="linkedin">LinkedIn</label></th>

<td>
<input type="text" name="linkedin" id="linkedin" value="<?php echo esc_attr
( get_the_author_meta( 'linkedin', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">Please enter your linkedin profile URL.</span>
</td>
</tr>

</table>
<?php }

add_action( 'personal_options_update', 'my_save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );

function my_save_extra_profile_fields( $user_id ) {

if ( !current_user_can( 'edit_user', $user_id ) )
return false;

/* Copy and paste this line for additional fields. Make sure to change 'twitter' to the field ID. */
update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
update_usermeta( $user_id, 'facebook', $_POST['facebook'] );
update_usermeta( $user_id, 'linkedin', $_POST['linkedin'] );
}

This dataset is for adding a twitter, linkedin, and facebook profile link box to each user profile.  You can customize it however you need to, just add:

 

<tr>
<th><label for="twitter">Twitter</label></th>

<td>
<input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta
( 'twitter', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">Please enter your Twitter profile URL.</span>
</td>
</tr>

and change the values from “twitter” to whatever you want the field to be called.  Also, add a line like this:

 update_usermeta( $user_id, 'linkedin', $_POST['linkedin'] );

under the rest.  That will allow the data to be saved.

4. Changing the Author Template

Now that we have some really cool custom values, let’s edit our template a little bit.  We’re going to change it to this:

<!-- This sets the $curauth variable -->

<?php
if(isset($_GET['author_name'])) :
$curauth = get_userdatabylogin($author_name);
else :
$curauth = get_userdata(intval($author));
endif;
?>
<div class="author_bio">
<h2><span><?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?></span></h2>
<div class="floatLeft" style="margin-right: 10px"><?php echo get_avatar($curauth->ID, $size = '96'); ?></div>

<p><?php echo $curauth->user_description; ?></p>
<div class="clear"></div>
<h2 class="connectwith"><span>Connect with <?php echo $curauth->first_name; ?>:</span></h2>
<div class="clear"></div>

<ul>
<li><a class="linkedin" href="<?php echo $curauth->linkedin; ?>">linkedin profile</a></li>
<li><a class="facebook" href="<?php echo $curauth->facebook; ?>">facebook profile</a></li>
<li><a class="twitter" href="<?php echo $curauth->twitter; ?>">twitter profile</a></li>

</ul>
<div class="clear"></div>
<h2 class="postsby"><span>Posts by <?php echo $curauth->first_name; ?>:</span></h2>
</div>
<!-- The Loop -->

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark"
title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<div class="entry">
<?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>
<div class="clear"></div>
<div class="tags"><?php the_tags( '<p>Tags: ', ', ', '</p>'); ?></div>

</div>

</div>

<?php endwhile; else: ?>
<p><?php _e('No posts by this author.'); ?></p>

<?php endif; ?>

Notice the changes we’ve made:

• We’ve added the user’s first name and last name.  This will allow users to know exactly who the author is
• We’ve added the gravatar by user ID and given it a right margin to prevent text-bumping
• There’s a new section called “Connect With X” – it has an unordered list that contains the three fields we just created, echoed in a hyperlink to allow for automatic linking to profiles.

You can style this, or modify it, however you want, but this is a fairly simple technique to allow authors to have an automatically generated page with 1) their information, 2) their picture/avatar, and 3) their latest posts.