Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

How To Create A WordPress Author's Page Template

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

If you run a multi-author website, you may want to consider adding an author template to your website. Author templates help present more information about writers and make it easier for visitors to find other articles the author have written. In this post we will be breaking the author template down and showing you how you can improve it.


An Introduction To The Author Template

The author.php template used to be an afterthought with most theme developers however they are now realizing the importance of including a good author.php template with their designs and displaying more than just previous posts from the author.

If you click on the author link on a WordPress website and it only shows excerpts of their previous posts, the theme probably does not have an author.php template. Excerpts are shown because of the template hierarchy for authors:

  1. author-{nicename}.php
  2. author-{id}.php
  3. author.php
  4. archive.php
  5. index.php

In plain English, WordPress first looks for templates specifically created for individual authors such as author-kevin.php or author-24.php (note: nicename is set to match the corresponding username). If no template has been specifically created for that author, WordPress will display the authors information using the author.php template (which is what we are looking at today). If no author template of any description can be found WordPress defaults to the archive.php template and then the index.php template (if no archive template exists).

Linking To The Author Page

let's briefly look at how you can link to the author page. To add a link to an authors page, simply use the the_author_posts_link tag anywhere inside the loop.

<?php the_author_posts_link(); ?>

Another useful function is the wp_list_authors tag. As the name suggests, it generates a list of all authors on your site. It doesn't need to be placed within the loop therefore it can be placed anywhere on your site e.g. sidebar, footer etc.

<?php wp_list_authors(); ?>

By default the tag excludes the admin account from the list and users who haven't any posts. Here are some examples of how wp_list_authors() can be used:

<?php wp_list_authors('hide_empty=0'); ?>

Display all users including those with no posts.

<?php wp_list_authors('show_fullname=1&optioncount=1'); ?>

Display the post count and full name of each user.

<?php wp_list_authors('orderby=post_count&order=DESC&number=10'); ?>

Display the top ten users in descending order.


Understanding the Author.php Template

I've always found the best way to understand how a particular type of template works is to look at an example and break it down so that you can understand every part of it. The Twenty Ten author.php template is a good introduction to how the template works however for this article I have decided to use the current default WordPress theme Twenty Eleven as it's more up to date.

The template displays an author bio at the top of the page. The bio is quite basic, only showing the authors gravatar at the left hand side and the authors bio info on the right.

All of the authors posts are displayed underneath the bio section. This area works in the same way as the archive.php template. The number of posts listed per page is determined by the number of posts per page you have set on www.yoursite.com/wp-admin/options-reading.php.

Below you will see the full code for the Twenty Eleven author.php template:

<?php<br />
/**<br />
 * The template for displaying Author Archive pages.<br />
 *<br />
 * @package WordPress<br />
 * @subpackage Twenty_Eleven<br />
 * @since Twenty Eleven 1.0<br />
 */<br />
<br />
get_header(); ?><br />
<br />
		<section id="primary"><br />
			<div id="content" role="main"><br />
<br />
			<?php if ( have_posts() ) : ?><br />
<br />
				<?php<br />
					/* Queue the first post, that way we know<br />
					 * what author we're dealing with (if that is the case).<br />
					 *<br />
					 * We reset this later so we can run the loop<br />
					 * properly with a call to rewind_posts().<br />
					 */<br />
					the_post();<br />
				?><br />
<br />
				<header class="page-header"><br />
					<h1 class="page-title author"><?php printf( __( 'Author Archives: %s', 'twentyeleven' ), '<span class="vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( "ID" ) ) ) . '" title="' . esc_attr( get_the_author() ) . '" rel="me">' . get_the_author() . '</a></span>' ); ?></h1><br />
				</header><br />
<br />
				<?php<br />
					/* Since we called the_post() above, we need to<br />
					 * rewind the loop back to the beginning that way<br />
					 * we can run the loop properly, in full.<br />
					 */<br />
					rewind_posts();<br />
				?><br />
<br />
				<?php twentyeleven_content_nav( 'nav-above' ); ?><br />
<br />
				<?php<br />
				// If a user has filled out their description, show a bio on their entries.<br />
				if ( get_the_author_meta( 'description' ) ) : ?><br />
				<div id="author-info"><br />
					<div id="author-avatar"><br />
						<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyeleven_author_bio_avatar_size', 60 ) ); ?><br />
					</div><!-- #author-avatar --><br />
					<div id="author-description"><br />
						<h2><?php printf( __( 'About %s', 'twentyeleven' ), get_the_author() ); ?></h2><br />
						<?php the_author_meta( 'description' ); ?><br />
					</div><!-- #author-description	--><br />
				</div><!-- #entry-author-info --><br />
				<?php endif; ?><br />
<br />
				<?php /* Start the Loop */ ?><br />
				<?php while ( have_posts() ) : the_post(); ?><br />
<br />
					<?php<br />
						/* Include the Post-Format-specific template for the content.<br />
						 * If you want to overload this in a child theme then include a file<br />
						 * called content-___.php (where ___ is the Post Format name) and that will be used instead.<br />
						 */<br />
						get_template_part( 'content', get_post_format() );<br />
					?><br />
<br />
				<?php endwhile; ?><br />
<br />
				<?php twentyeleven_content_nav( 'nav-below' ); ?><br />
<br />
			<?php else : ?><br />
<br />
				<article id="post-0" class="post no-results not-found"><br />
					<header class="entry-header"><br />
						<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1><br />
					</header><!-- .entry-header --><br />
<br />
					<div class="entry-content"><br />
						<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p><br />
						<?php get_search_form(); ?><br />
					</div><!-- .entry-content --><br />
				</article><!-- #post-0 --><br />
<br />
			<?php endif; ?><br />
<br />
			</div><!-- #content --><br />
		</section><!-- #primary --><br />
<br />
<?php get_sidebar(); ?><br />
<?php get_footer(); ?>

Don't worry if the above code is a bit overwhelming. We will be looking at the main part of this template (i.e. everything between <div id="content" role="main"> and </div><!-- #content --> in a second. Once you break it down you will find it's fairly straight forward.

Starting The Loop

In order to display information about the author (such as their name, URL and bio) and list the authors posts, you have to start the WordPress loop. Everything which is placed within the loop will be displayed on every author archive page (i.e. page 1, 2, 3 etc).

<?php if ( have_posts() ) : ?><br />
<br />
				<?php<br />
					/* Queue the first post, that way we know<br />
					 * what author we're dealing with (if that is the case).<br />
					 *<br />
					 * We reset this later so we can run the loop<br />
					 * properly with a call to rewind_posts().<br />
					 */<br />
					the_post();<br />
				?>

Displaying The Page Title

At the top of author pages, the Twenty Eleven page displays 'AUTHOR ARCHIVES:' followed by a link to the authors profile. On the main author page this link is pretty useless as it links to the current page however on author archive pages (e.g. http://www.yoursite.com/author/admin/page/2/) this link helps visitors return to the first author page.

Twenty Eleven uses the get_author_posts_url function to link to the author page (it passes the author ID to this function by calling get_the_author_meta). It also uses get_the_author to display the authors name.

<header class="page-header"><br />
					<h1 class="page-title author"><?php printf( __( 'Author Archives: %s', 'twentyeleven' ), '<span class="vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( "ID" ) ) ) . '" title="' . esc_attr( get_the_author() ) . '" rel="me">' . get_the_author() . '</a></span>' ); ?></h1><br />
				</header>

Rewind The Loop Back To The Beginning

A we used the WordPress loop to display a link to the author profile at the top of the page, we need to reset the posts using the the rewind_posts function.

<?php<br />
					/* Since we called the_post() above, we need to<br />
					 * rewind the loop back to the beginning that way<br />
					 * we can run the loop properly, in full.<br />
					 */<br />
					rewind_posts();<br />
				?>

Page Navigation

At the top and bottom of the author page you will see links to older and newer posts. Twenty Eleven displays these links using the twentyeleven_content_nav function.

<?php twentyeleven_content_nav( 'nav-above' ); ?>

Passing the parameter nav-above through the function displays the top nav whilst nav-below shows the navigation links for the bottom of the page.

<?php twentyeleven_content_nav( 'nav-below' ); ?>

Details of the twentyeleven_content_nav function can be found in the Twenty Eleven theme functions template (functions.php). The function uses previous_posts_link and next_posts_link to display navigation links and ensures that no navigation is shown at the top of the 1st page. It also styles the links; aligning older posts to the left and newer posts to the right.

If you want to add navigation to your author template, you can either wrap a CSS division around the previous_posts_link and next_posts_link functions and style them or, if you prefer, use a navigation plugin like WP PageNavi to do the work for you.

Displaying The Author Bio

To display author information, we use the get_the_author_meta function (you may recall we also used this function previously with the get_author_posts_url function in order to link to the author page). The bio is displayed at the top of ever author page and the if statement ensures that if no bio has been entered by the user, the bio will not be displayed.

The get_the_author function is used again to display the authors name in the bio title and get_avatar is used to display the users Gravatar (the user_email parameter is used with get_the_author_meta so that the get_avatar function knows the authors email address).

<?php<br />
				// If a user has filled out their description, show a bio on their entries.<br />
				if ( get_the_author_meta( 'description' ) ) : ?><br />
				<div id="author-info"><br />
					<div id="author-avatar"><br />
						<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyeleven_author_bio_avatar_size', 60 ) ); ?><br />
					</div><!-- #author-avatar --><br />
					<div id="author-description"><br />
						<h2><?php printf( __( 'About %s', 'twentyeleven' ), get_the_author() ); ?></h2><br />
						<?php the_author_meta( 'description' ); ?><br />
					</div><!-- #author-description	--><br />
				</div><!-- #entry-author-info --><br />
				<?php endif; ?>

Displaying The Authors Posts

Twenty Eleven displays the posts of an author by using the get_template_part function. This allows a template that was created specifically for displaying posts to be loaded directly into the author template.

By finding out the post format using the get_post_format function, the theme allows different types of posts to be displayed as they were attended. For example, if the post was set as an image, the content-image.php template would be used. Likewise, the content-link.php template could be used if the format was set as a link.

	<?php while ( have_posts() ) : the_post(); ?><br />
<br />
					<?php<br />
						/* Include the Post-Format-specific template for the content.<br />
						 * If you want to overload this in a child theme then include a file<br />
						 * called content-___.php (where ___ is the Post Format name) and that will be used instead.<br />
						 */<br />
						get_template_part( 'content', get_post_format() );<br />
					?><br />
<br />
				<?php endwhile; ?>

If No Posts Can Be Found

If no results can be found for an author, a message is displayed encouraging the user to use the search form below to search again.

<?php else : ?><br />
<br />
				<article id="post-0" class="post no-results not-found"><br />
					<header class="entry-header"><br />
						<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1><br />
					</header><!-- .entry-header --><br />
<br />
					<div class="entry-content"><br />
						<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p><br />
						<?php get_search_form(); ?><br />
					</div><!-- .entry-content --><br />
				</article><!-- #post-0 --><br />
<br />
			<?php endif; ?>

Customising the Author Template

Like any WordPress template, author.php can be customised as much or as little as you feel necessary. You can create something similar to the Twenty Eleven author template and list a basic bio at the top of every page and list posts the same way you do in category archives. Alternatively, you can expand the bio area and list their email address, messenger information (e.g. Google Talk) and the date you registered and create a unique template for displaying author posts.

Customising the Author Bio

The bio area is very easy to modify. All of the information the author entered into their profile can be called using the get_the_author_meta function. You can pass two parameters into this function: $field and $userID.

<?php get_the_author_meta( $field, $userID ); ?>

$field is the name of the data to be returned whilst $userID allows you to return data from a specific author. The User ID parameter is only used outside of the loop. We don't need to use it anyway as we are calling this function from within the loop, therefore WordPress knows the user we want to call information for.

Here is a list of all the parameters you can call using get_the_author_meta:

  • <?php the_author_meta( 'user_login' ); ?> - Displays the authors login name.
  • <?php the_author_meta( 'user_pass' ); ?> - Displays the authors password in hexadecimal form
  • <?php the_author_meta( 'user_nicename' ); ?> - Displays the authors nicename (same as their login)
  • <?php the_author_meta( 'user_email' ); ?> - Displays the authors email address.
  • <?php the_author_meta( 'user_url' ); ?> - Displays the authors URL.
  • <?php the_author_meta( 'user_registered' ); ?> - Displays the date the author registered with your site.
  • <?php the_author_meta( 'user_activation_key' ); ?> - Displays the authors activation key (if applicable).
  • <?php the_author_meta( 'user_status' ); ?> - Displays the authors user status e.g. user who has confirmed account has a user status of 2.
  • <?php the_author_meta( 'display_name' ); ?> - Displays the name the author has chosen to display publicly.
  • <?php the_author_meta( 'nickname' ); ?> - Displays the authors nickname.
  • <?php the_author_meta( 'first_name' ); ?> - Displays the authors first name.
  • <?php the_author_meta( 'last_name' ); ?> - Displays the authors last name.
  • <?php the_author_meta( 'description' ); ?> - Displays the authors bio.
  • <?php the_author_meta( 'jabber' ); ?> - Displays the authors Jabber / Google Talk contact info.
  • <?php the_author_meta( 'aim' ); ?> - Displays the authors AIM contact info.
  • <?php the_author_meta( 'yim' ); ?> - Displays the authors Yahoo messenger contact info.
  • <?php the_author_meta( 'user_level' ); ?> - Displays the authors user level (e.g. admin are level 10, subscribers are level 0).
  • <?php the_author_meta( 'user_firstname' ); ?> - Displays the authors first name.
  • <?php the_author_meta( 'user_lastname' ); ?> - Displays the authors last name.
  • <?php the_author_meta( 'user_description' ); ?> - Displays the authors bio.
  • <?php the_author_meta( 'rich_editing' ); ?> - Displays true if the author is using the visual editor and false if they have disabled it.
  • <?php the_author_meta( 'comment_shortcuts' ); ?> - Displays true if the author has keyboard shortcuts enabled and false if they are not.
  • <?php the_author_meta( 'admin_color' ); ?> - Displays the colour scheme the author has chosen for the admin area (classic for blue and fresh for grey).
  • <?php the_author_meta( 'ID' ); ?> - Displays the authors ID.

As we saw before, most basic author templates simply display the authors gravatar on one side and the authors bio on the other. You could easily spice this up with some CSS. For example, you could place an information box down one side showing the users contact information (email, Google talk etc), another showing the users full name and website address.

Customising The Post List

If you want to create a consistent look with the rest of your site, styling the navigation and post area will be relatively straight forward as you can simply copy code from your archive.php template. A few changes to this code can give the author page a completely different look from the category archives. For example, perhaps you want to remove featured images or remove meta information.

On my own blog I decided to simply list post titles and the date they were published rather than list full excerpts. It's a lot simpler and makes searching through author posts easier. Here is the code I used to display a list of posts rather than full excerpts:

<ul><br />
<!-- The Loop --><br />
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?><br />
<li><br />
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><br />
<?php the_title(); ?></a>, <br />
<?php the_time('d M Y'); ?> in <?php the_category('&');?><br />
  </li><br />
<br />
  <?php endwhile; else: ?><br />
     <p><?php _e('No posts by this author.'); ?></p><br />
<br />
	<?php endif; ?><br />
<!-- End Loop --><br />
</ul>

This produces the following:


Conclusion

By improving your author.php template and displaying more information about authors you will give them more exposure and make it easier for readers to find out more about them. The template itself is fairly easy to modify once you get used to it.

If your theme doesn't have an author.php template, the best thing to do is to copy another template such as page.php or archive.php and remove all the code from the content area i.e. keep the code at the top and bottom that shapes your design but remove all the code that isn't needed for the author page. Once you have done so, you should be able to easily create your own author.php template using this article and the author.php templates from the default themes Twenty Ten and Twenty Eleven as references.

Good luck - Kevin

Advertisement