While working on a client’s website, we realized that the built-in function for listing authors was not enough. We showed you how to display all authors from your site, but that method was only good if you want a simple list to display in your sidebar. If you want to create a more content-rich and useful contributors page, then that function is useless.
In this article we will show you how you can create a contributors page which will display a list of authors with avatars or userphoto and any other information that you like. This tutorial is an intermediate level tutorial.
First thing you need to do is create a custom page using this template.
Then you will need to open functions.php file in your themes folder and add the following code:
function contributors() { global $wpdb; $authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name"); foreach($authors as $author) { echo "<li>"; echo "<a href=\"".get_bloginfo('url')."/?author="; echo $author->ID; echo "\">"; echo get_avatar($author->ID); echo "</a>"; echo '<div>'; echo "<a href=\"".get_bloginfo('url')."/?author="; echo $author->ID; echo "\">"; the_author_meta('display_name', $author->ID); echo "</a>"; echo "</div>"; echo "</li>"; } }
By adding this function you are telling WordPress to create a function that will display author’s name, and author’s avatar. You can change the avatar to userphoto plugin setting by simply changing the following line:
echo get_avatar($author->ID);
and replacing it with:
echo userphoto($author->ID);
You can add more features to this function such as displaying author URL and other information from the profile by following the structure used.
You would also need to add the following lines to your CSS file:
#authorlist li { clear: left; float: left; margin: 0 0 5px 0; } #authorlist img.photo { width: 40px; height: 40px; float: left; } #authorlist div.authname { margin: 20px 0 0 10px; float: left; }
Once you are done adding the function, now you would need to call it in your page-template. Open the contributors.php file or whatever you name the file. Follow the same page template as your page.php and in the loop, just add this function instead of displaying the content:
<div id="authorlist"><ul><?php contributors(); ?></ul></div>
This will provide you with a more content-rich contributors page. This trick is excellent for Multi-Author blogs.
Now here is an example of how we used it:
If you want to have a contributors page with information like displayed in the example above, you will need to make a few changes to the original function. We have an example code that will get you exactly everything displayed in the image above.
function contributors() { global $wpdb; $authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users WHERE display_name <> 'admin' ORDER BY display_name"); foreach ($authors as $author ) { echo "<li>"; echo "<a href=\"".get_bloginfo('url')."/author/"; the_author_meta('user_nicename', $author->ID); echo "/\">"; echo get_avatar($author->ID); echo "</a>"; echo '<div>'; echo "<a href=\"".get_bloginfo('url')."/author/"; the_author_meta('user_nicename', $author->ID); echo "/\">"; the_author_meta('display_name', $author->ID); echo "</a>"; echo "<br />"; echo "Website: <a href=\""; the_author_meta('user_url', $author->ID); echo "/\" target='_blank'>"; the_author_meta('user_url', $author->ID); echo "</a>"; echo "<br />"; echo "Twitter: <a href=\"http://twitter.com/"; the_author_meta('twitter', $author->ID); echo "\" target='_blank'>"; the_author_meta('twitter', $author->ID); echo "</a>"; echo "<br />"; echo "<a href=\"".get_bloginfo('url')."/author/"; the_author_meta('user_nicename', $author->ID); echo "/\">Visit "; the_author_meta('display_name', $author->ID); echo "'s Profile Page"; echo "</a>"; echo "</div>"; echo "</li>"; } }
This code is utilizing User Photo plugin. The twitter field is being displayed using the trick we mentioned in the article How to Display Author’s Twitter and Facebook in the Profile page.
The CSS for example would look like:
#authorlist ul{ list-style: none; width: 600px; margin: 0; padding: 0; } #authorlist li { margin: 0 0 5px 0; list-style: none; height: 90px; padding: 15px 0 15px 0; border-bottom: 1px solid #ececec; } #authorlist img.photo { width: 80px; height: 80px; float: left; margin: 0 15px 0 0; padding: 3px; border: 1px solid #ececec; } #authorlist div.authname { margin: 20px 0 0 10px; }
You can display more information if you like by using the advanced code as your guide.
I tried it, it works very well.
Is there a way to make it responsive?
Hi thanks for your time for making a great tutorial.
Hi can you please help me to display only one author photo only with no info or name just they photo only. I want to use this as a profile public photo display
thanks in advance
Oshi, can’t you just add the image in your page, or post, or theme template? Like this:
<img src="http://www.yoursite.com/path/to/author-image.jpg" />
How do I ORDER by the highest/top contributor? Thanks.
This is exactly what I was looking for. Thank you very much.
Is there also a way to show which authors are online/offline?
No, its not possible to show which author is online or offline.
Hello,
How to create a Contributors Page for a child Theme in Genesis?
Thanks
You would have to create a custom page template and then utilize this code. Alternatively, you can use this plugin:
https://www.wpbeginner.com/plugins/how-to-create-a-simple-staff-list-in-wordpress/
Its wonderful! you have given me exactly what I need, Thank you!
Thanks and see the WordPress plugin list-site-contributors plugin. Cheers.
For some reason – even though this works well functionally – my CSS isn’t panning out. The text/links is directly below the avatars. Any thoughts why? Nothing I do will change it – I’ve tried doing it in Firebug to test out changes but the CSS won’t even show up.
other than that, works great.
Can’t say without really analyzing your CSS code. But again, the issue is not with the PHP code. Most likely in your CSS.
Hi, I loved this tutorial. I had the same problem with Kate, the photo css does not apply (float to the left and sized) and I get this instead
class=”wp-user-avatar wp-user-avatar-96 avatar avatar-96 photo” height=”96″ width=”96″
I am not really sure where does that come from, possibly is there a way to clean css from the avatar and replace with your suggested css?
Great tutorial. I was wondering if anyone has any examples of how to also utilize this with pagination. I sort of new to wordpress, and I’m still trying to understand how custom templates work.
Thanks so much.
Is there a way to have the userphoto thumbnail pulled instead of the main photo?
Sure. Use this instead:
Hi, im doing it with your second script with twitter facebook and all. its work fine. But displaying all users. But i need to display only Administrators, Authors & contributors. with hide empty. How can i achieve that ?
ok – so I answered my child theme/main theme question on the other post, but I’m encountering another question regarding those pages when trying to do this part:
“Once you are done adding the function, now you would need to call it in your page-template. Open the contributors.php file or whatever you name the file. Follow the same page template as your page.php and in the loop, just add this function instead of displaying the content”
There is no page template in the page template file — (I’m using Genesis…)
I’m not sure what to copy into my “contributors” page…
First refer back to the other article where suggest that you add the page template in your child theme folder not your parent theme. We are not sure what you called the page template file, but whatever you called it, just paste the div php contributors(); text in that file.
Page template is what you created using the other tutorial. By adding: /* Template Name: WPBeginnerT1 */ in a php file, you have created a new page template.
thanks again for this useful tutorial :), now i have a list of contributor on my wordpress theme
@KayeBarnes I use the get_user function instead that came in with WP 3.1 which has the role and include(or exclude) parameters to filter only a certain role and users by their IDs…example:
function contributors() {
global $wpdb;
$blogusers = get_users(‘role=author&exclude=7,8,9’);
foreach ($blogusers as $user) {
echo “<li>”;
echo $user->user_email ;
echo $user->display_name;
echo “<a href=””.get_bloginfo(‘url’).”/author/”;
echo $user->user_nicename;
echo “/”>”;
echo get_avatar ($user->ID);echo “</a>”;
echo “</li>”;
}
}
In case anyone can help and needs reference to how to add the custom fields to the code in this tutorial, I’ve been doing it like this…
$order = get_cimyFieldValue($author->ID, ‘CHAIN_OF_COMMAND’);
echo cimy_uef_sanitize_content($order);
This is almost totally awesome, but I’m trying to order the authors (who are architects in a typically hierarchical firm) by a custom field (created with the Cimy User Extra Fields plugin) that has a number in it. So instead of this…
$authors = $wpdb->get_results(“SELECT ID, user_nicename from $wpdb->users WHERE display_name <> ‘admin’ ORDER BY ID”);
… I’d like to sort by a pecking order field that runs from 1-10. Any ideas out there in wpbeginner land?
Is there a way to exclude users by either name (such as the originating admin user) and role (subscribers)?
ok I found a very clean solution: http://www.youtube.com/watch?v=R-AQ_HBYZbc&feature=relmfu
hello guys, there are still new to impaginations? I am willing to pay if you want ..
this is good news ….. I look forward to updating …. thank you
ok thanks anyway.
You are welcome. Your suggestion is very good, and our developer liked the suggestion. According to him, we will be releasing a new tutorial soon that will do that
(No time estimates though)
ok thanks for answer you have been very kind, you have a solution to the problem of 10 users per page?
The code above was released on as is basis because it was something we did for our clients. We do not offer customizations as part of the tutorial.
but why my comments are never published?
You have to give it at least 24 hours or so to get your comments approved.
hello running on the internet I found this snipped http://xrl.in/7g52 it might be a good solution. this should be called in the custom page like this:
However, a page number is not set (Users per page) can you help? I’m sure it is useful to all. thanks
hello, thanks for the tutorial, I wanted to ask if you can enable custom paging in a custom page? virtually all users can write articles on my site and list of contributors is long. So I wanted to insert a function like wp-PageNavi ….. can you help me?
Silly question, but what URL does the contributors.php page show?
You need to create a page called Contributors and then select the custom page template that you made using this article.
Is there a way to order by last name instead of display name? I have the page working but it lists contributors in order of their first name, since I have the display name (for all) set to their first, then last names. But I’d prefer to sort the list by Last name instead.
When I change the “orderby” parameter from display_name to last_name, I get nothing – the list is blank. It will only display the list when I order by display_name.
Any suggestions would be greatly appreciated!
How to randomize it and limit the numbers to 6.
I want to show it on my homepage as “Suggested people”
use wp_list_authors function instead.
I was not able to find a way to list only users with a specific role (authors and admins, in my case). Can anyone offer any additional help?
Specify it in the WPDB query.
Sorry, another question so soon. I tried to implement the above solutions for allowing the contributor page function to deny displaying certain levels (in my case, I want to keep subscribers from showing up). But I was not able to make this work. Does anyone have any other ideas?
Yes, it is possible to do so. We were able to write a patch for one client which allowed us to show users only with posts. If you look at the function reference and see how the author.php core file is working, you should be able to figure it out.
Thanks. I’ve done a few hours of searching, but I can’t come up with the correct code. I’ve decided it might be easier to call based on # of posts (where having 0 posts will not display the author on the contributor page).
Based on the snippet:
$authors = $wpdb->get_results(“SELECT ID, user_nicename from $wpdb->users WHERE display_name ‘Admin’ ORDER BY display_name”);
It seems I would want to replace the –display_name ‘Admin’– line with something that calls the post count. However, nothing I see to do works. Any thoughts?
You would have to look in the post field to check how many does that author has. There is an example of that in author.php core file.
This is a fantastic tutorial. This is the first time I’ve messed with the function.php file, and I feel confident to keep going with it.
Is there a way to have the website, twitter, or facebook (or whatever else we choose to include) information no appear if that field in in the user’s profile page is not populated? Currently, the word “Twitter” will still appear on the webpage even if there is no Twitter url specified. Is there a way to change this?
Thank you!
Yes, you can run a if parameter and check to see if the field is populated or not.
Hi there, nice post, thanks for sharing.
Currently the functionality is set to show users alphabetically.
What would need to be amended to show recent authors, ie: by activity, or last logged in. I have tried to look in the codex but cant find anything that specific.
Many thanks,
Jim
How do you show contributor accounts only? I don’t want to show administrators or authors.
Whoa, awesome, thanks for this…
Hello, I thought the one that will appear is the author’s uploaded photo using the user-photo plugin but what is showing is their gravatar.
Love this tut. Exactly the type of function I am looking for.
Quick question.
Do you have an easy way to display the latest post authored by each author and have that be hyperlinked?
This is awesome! Thanks.
How do you set a maximum number of authors to show? This site has 10+ writers but in a particular area we only want to show 6.
Thanks in advance!
How can I create this to add to the sidebar and have a function where the author with the most recent post appears on top and the title of their recent blog post? Thanks for the help
You would call the function in your sidebar.php file. Change the order_by parameter to post count in descending order.
Hi, great tutorial! Thank you. I’m using this on one blog of a WPMU/BP installation so I can’t restrict the list by user role without getting other blog authors/admins listed. Is there a way to restrict by blog_ID? I’m searching around, but I’m not sure what to use.
I thought it’d be something where the (“SELECT ID, user_nicename from $wpdb->users WHERE display_name ‘admin’ ORDER BY display_name”) should be changed to something like “WHERE blog_id = ‘4’…” but that didn’t work. Any help would be appreciated! Thanks!
Nevermind, found a solution with :
$authors = $wpdb->get_results(“SELECT ID, user_nicename from $wpdb->users WHERE id IN (‘3′,’5′,’6’) ORDER BY user_login”);
If anyone has pointers for ordering the authors by last post date, that’s my ideal use.
I got it working!! Great code!
But i cant filter the list by user role (admin, subscriptor, editor, etc..) and filter the amount of user displayed.
Someone could? Any ideas?
Thanks in advance!
sorry me again, I’m assuming its adding the function and removing another.
Yes exactly right. You replace the function you don’t want and add the function that you want.
http://codex.wordpress.org/Author_Templates
Use the above link as a guide.
Hey guys! How can i call the Aurthur description and remove the, Visit (Aurthur) Profile Page link on the contributors page.
Hi,
I’m trying to limit the function by user level (I only want to show contributors, not authors). It seems like it shouldn’t be hard using user_level but I just can’t get it to work. Any ideas?
Thanks a million,
Martin
You just want to list all users on the site? Not just authors?
I’ve got a hierarchy set up where frequent writers are in the system as Authors, but one time submitters are in as Contributors. I did get this working using Justin Tadlock’s function and restricting the user_level there where the level for the authors list is >1 and the level for the contributors is 1.
Martin: Did you ever figure this out? I’m trying to do the same thing…
Great post, but do you know how to exclude users with no posts, or below a certain level?
Yes, you see in the second option, how we specify not to include admin. You can add a parameter like where display_name post count > 0 or something. And it should work.
Real Good tutorial..How would you make it so that the profiles display three across rather than all under each other
You would simply need to change the li values in the CSS to your needs. You might have to utilize inline-block technique to display these. But there is nothing on the php end, it is just CSS.
Great post as always man! I love finding neat little WordPress tricks like this, makes my day. Keep up the awesome work!
Good tutorial
it’s mike hyatt!
That is perfect for blogs that have multiple contributors! All my blogs are written by me, so it kind of defeats the purpose of having a contributor page.
You must have read my mind – I needed something like this today and saw your post before I started searching around for the info.
Thanks!
We are glad that you did not have to look around and this saved you sometime