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.
A little new to WP…
So when i implement the code in the list displayed, it doesn’t link back to the actual profiles, it links back to /?author=1 instead of /authors/author-name
How would I go about fixing this?
i need to get an sepcial author info with his avatar and bio in a page, not related with his posts
How can I show only authors who has posts to display? Can’t find any solution to do so. Thanks a lot!
Nice Tutorial. A great solution to display list of authors with their pictures and bio, exploring more and more.
Thanks
A-Salam!
I want to show top three users by posts how this possible ?
thanks
1. How to Display Top 10 Author List with Avatars in WordPress..?
2. how to make this system..?
Please, how may i get only avatars diferent the default avatars from wordpress ? thank you
thank you so much, i looking for this on internet many many time and ive never found this code, thank you.
hi there! thanks about quicly answer.
I have another question.
How can I display the field “twitter:” only if the area isn’t empty?
thanks again.
Please take a look at SEO Friendly URL Structure for WordPress.
hello, thank you for the tut, I have a little question. its works great, only the link of the user is going to direction “authors/nicname”…but if I use a diffrent way of links like “p=?ID” how can i change the href?
Thank you.
Hi there!
First of all, this code is great. Thanks for helping my site.
I’m trying to add a post count to the code you wrote, but really don’t know anything useful about php, i added this code but it didn’t work.
echo wp_list_authors(‘optioncount=1’, $author->ID);
Have you got any advice to help me add this in? It’s a shame there isn’t an author_meta tag for counting posts!
Thanks in advance. Keep up the good work.
how to add just 4 authors ? tnx
I have a CHILD THEME > function.php and included this code.
Calling the usual — — is giving me a white-screen. I can see the problem, this refrences the function.php in the mother-theme.
How do I make the call, so that this calls the function.php from child-theme
Edit update: I removed the function.php from child theme folder, and site loaded back just fine
How do get a count of the no of posts each author has written?
Hi,
How can I include only users from a certain role?
Thanks alot!
For that you will need a little different code, particularly the query part:
Is there a way of writing that where the user is above a certain role (e.g. Contributor level or above)?
Hi, how can i add avatar to author in wp_list_authors?
Or add this:
(‘exclude_admin=0&optioncount=1&show_fullname=0&hide_empty=1
&feed_image=mylinktoimagehere.png’)
to contributors?
Hi There,
This tutorial is really great. How woulkd one achieve to exclude multiple users from the list? I tried using array (admin, etc) or ‘admin’ , ‘other_user’ but that doesnt work.
Thanks in advance!
Hi,
who can i sort by last Name instead of display_name.
This is a nice script.
change to ORDER BY SUBSTRING_INDEX(display_name, ‘ ‘, -1) ASC
Who can i exclude the admin of the List ?
Try changing SQL Query on line 4 like this:
Hi,
And how can i exclude multiple authors from this query?
$authors = $wpdb->get_results(“SELECT ID, user_nicename from $wpdb->users WHERE user_nicename != ‘admin’ ORDER BY display_name”);
Thanks in advance!
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.