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 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 } ?-->
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.
<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>
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 ?
14 Comments
Demo page is suspended :(
Yes, I just noticed that – the authors site should be back up shortly.
On Google This post shows By Nouman Yaqoob Can you make it right OLIVER?
It is up again ! I just restarted the VPS
Very nice tutorial, but when I was thinking about adding an authors page, I was unable to add it with pagination, because I think it’s very important to have such authors page with pagination. Any idea about that?
Thanks very much and sorry for my bad English.
Why do you want to add pagination ?
Do you have like 100’s of authors?
I have a guess you will have to put it in the loop of WordPress and then you will be able to paginate it.
I think pagination is very important because sometimes we can have tens of authors. for example in one of my websites I have now more than 50 authors, so if we can display them 10 per page this will be very nice.
Yes if we can put it in a loop we’ll be able to paginate it, but the question is: How? :)
Thanks for your reply.
It will need a little more research, and workout in it, i will post about it if my post got accepted by the admin here.
Right now can’t say a lot about this.
Ok Ahmad, Thank you and good luck :)
Same to you.
Ahmad, did you ever manage to figure out how to paginate results? I have a site with over 500 users so need to paginate this.
Thanks
Osu
How to add the user role to it ?
One of my users doesn’t appear in the list, how can I fix this problem?
Is is possible to choose which “users” are carried over to the authors page?
I don’t want all users listed there. I know this is a very late comment and may not get answered but thought to give it a shot. :-) thanks! PS please email answer as there is no way to be notified here from the comments.