How To: Create an Authors Listing Page for your WordPress site

If you run a WordPress blog with multiple authors you might consider making an Authors' list page to show off your authors, with their descriptions and some social profile links. Some of the biggest blogs practice this and a lot of others just forget about it. An authors' list page helps your readers connect with their favorite authors easily. Sadly, 50% to 70% themes do not have authors.php included in them so WordPress automatically displays the archive.php. In this tutorial, we will be showing you how to create an authors listing page in for you WordPress site.

Making your blog more social & professional is always a plus point. This page can also help in getting your editors/authors team recognized by your readers and bring more credibility to your site ( to enable you to get into Google News for example ). Creating a customised authors' list is really simple. The code for the author description is entirely provided by known and documented WordPress template tags and information gathered from the authors' profiles.

Tutorial Details

• Program: WordPress
• Version  : 3.0 & Above (It may work with old versions)
• Difficulty: Intermediate
• Estimated Completion Time: 15 mins

See the Demo »

Introduction

Let's start the process.The overall process is very simple, you will download authors.php and will upload it in you theme then finally you will insert a code in your theme's functions.php file.Isn't it easy?

Step 1:

I have coded a very simple Authors' List WordPress Page Template (It will work with most of the themes & it is easy to modify due to in-line CSS),  you can download it from the below link. Upload this template in your theme's root folder

yourdomain.com/wp-content/themes/yourthemename/

Download Authors.php Template »

What will this page template do?

The answer is quite simple, it will list the authors ordered by their IDs, followed by correct description and gravatar.After this it will show the latest post by author with multiple social profile links (Author must fill the description/author bio & social profile links inside the admin panel to make his/her gravatar displayed).The supported social profiles are Twitter, Facebook, LinkedIn, Digg and Flickr.

Step  2:

Now its time to add some functionality in user's profile admin area.Find the code below, copy it and paste it at the very top of functions.php in your themes root.It is a crucial step, add the code before anything at the very beginning of funtions.php to avoid any errors.(Do backup your theme's funtions.php file for safety before modifying it.)

yourdomaincom/wp-content/themes/yourthemename/functions.php(Modify it after back up)

OR

WordPress Admin > Appearance >Editor > Theme Functions(functions.php)

[php]
<!--?php add_action('show_user_profile', 'wp_moreprofiles'); add_action('edit_user_profile', 'wp_moreprofiles'); add_action('personal_options_update', 'wp_moreprofiles_record'); add_action('edit_user_profile_update', 'wp_moreprofiles_record'); function wp_moreprofiles_record($userID) { if (!current_user_can('edit_user', $userID)) { return false; } update_usermeta($userID, 'twitter', $_POST['twitter']); update_usermeta($userID, 'facebook', $_POST['facebook']); update_usermeta($userID, 'linkedin', $_POST['linkedin']); update_usermeta($userID, 'digg', $_POST['digg']); update_usermeta($userID, 'flickr', $_POST['flickr']); } function wp_moreprofiles($user) { ?--></pre>
<h3>More Social Links</h3>
<table class="form-table">
<tbody>
<tr>
<th><label for="twitter">Twitter</label></th>
<td>
<input id="" class="regular-text" type="text" name="twitter" value="<?php echo esc_attr(get_the_author_meta(" />

<span class="description">Please enter your Twitter username. http://www.twitter.com/<strong>username</strong></span></td>
</tr>
<tr>
<th><label for="facebook">Facebook</label></th>
<td>
<input id="" class="regular-text" type="text" name="facebook" value="<?php echo esc_attr(get_the_author_meta(" />

<span class="description">Please enter your Facebook username/alias. http://www.facebook.com/<strong>username</strong></span></td>
</tr>
<tr>
<th><label for="linkedin">LinkedIn</label></th>
<td>
<input id="" class="regular-text" type="text" name="linkedin" value="<?php echo esc_attr(get_the_author_meta(" />

<span class="description">Please enter your LinkedIn username. http://www.linkedin.com/in/<strong>username</strong></span></td>
</tr>
<tr>
<th><label for="digg">Digg</label></th>
<td>
<input id="" class="regular-text" type="text" name="digg" value="<?php echo esc_attr(get_the_author_meta(" />

<span class="description">Please enter your Digg username. http://digg.com/users/<strong>username</strong></span></td>
</tr>
<tr>
<th><label for="flickr">Flickr</label></th>
<td>
<input id="" class="regular-text" type="text" name="flickr" value="<?php echo esc_attr(get_the_author_meta(" />

<span class="description">Please enter your flickr username. http://www.flickr.com/photos/<strong>username</strong>/</span></td>
</tr>
</tbody>
</table>
<pre><!--?php } ?-->

[/php]

What will this code do ?

This code will add  support for the social profiles i.e. Twitter, Facebook, LinkedIn, Digg and Flickr inside the Edit Profile Admin section.

Tip: There must be no spaces at the end of functions.php

Step 3:(Final Step)

So, now we have implemented the functionality in admin panel and authors.php is also uploaded.The last thing to do is to display this authors' list as a page in WordPress.

Goto your blog’s admin panel > Pages > Add New >

Add a page with desired title & choose the  Authors List Template from templates section on the right side.Don't add any content in the page , just publish it and you are done.View the page to see the results.Wasn't it easy?

Adding Style:(Optional Step)

This is for users who have a little knowledge of CSS . If you study the authors.php template, you downloaded, you will find out some in-line CSS in it, which can easily be used to style your author's list.You can add dotted border, or gradient background boxes, may be some nice padding and such other things.

[php]
<style type='text/css'>
.author { margin-bottom: 80px; }
.author h3 { margin-bottom: 10px; }
.author .description { width: 100%; overflow: hidden; }
.author .description p { width: 75%; float: left; margin: 0; }
.author .avatar { float: right; border: 5px solid #ccc; }
.author h4 { background: #E7E7E7; padding: 5px; border: 1px dotted #ccc; }
.author .connect { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; list-style: none; margin: 0; padding: 0; width: 100%; overflow: hidden; padding: 10px 0px; }
.author .connect li { float: left; margin-right: 20px; }
</style>
[/php]

Demo

You might ask about a working styled demo, then I have one for you. Click the below demo link to view it.

See the Demo »

Your Turn:

• Do you have an authors page on your blog ?
• Have you benefitted from adding one ?
• Any questions about this tutorial ?