How to display a list of authors with avatars on the WordPress contributors page

While working on a client's website, we realized that the built-in feature for list authors was not enough. We showed you how to display all the authors on your site, but that method was only good if you wanted a simple list to display in your sidebar. If you want to create a more content-rich and useful contributors page, then that feature is useless.

In this article, we'll show you how you can create a contributors page that will display a list of authors with avatars or user photo and any other information you want. This tutorial is intermediate level walkthrough.

The 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 theme folder and add the following code:

 contribuyentes de funciones () global $ wpdb; $ authors = $ wpdb-> get_results ("SELECT ID, user_nicename from $ wpdb-> users ORDER BY display_name"); foreach ($ autores como $ autor) echo "
"; echo" ID; echo "\"> "; echo get_avatar ($ author-> ID); echo" "; echo ''; echo" ID; echo "\"> "; the_author_meta ('display_name', $ author-> ID); echo" "; echo" "; echo"
"; 

By adding this function, you are telling WordPress to create a function that will display the author's name and the author's avatar. You can change the settings from avatar to user photo plugin simply by changing the following line:

echo get_avatar ($ autor-> ID);

and replacing it with:

echo userphoto ($ autor-> ID);

You can add more features to this function, such as displaying the author's URL and other profile information by following the structure used.

You should also add the following lines to your CSS file:

 #authorlist li claro: izquierda; flotador izquierdo; margen: 0 0 5px 0; #authorlist img.photo width: 40px; altura: 40px; flotador izquierdo; #authorlist div.authname margen: 20px 0 0 10px; flotador izquierdo; 

Once you're done adding the function, you'll now need to call it in your page template. Open the file contributors.php or whatever the file is called. Follow the same page template as your page.php and in the loop just add this function instead of displaying the content:

This will provide you with a more content rich contributors page. This trick is great for Multi-Author blogs.

Now here's an example of how we use it:

If you want to have a collaborators page with information like the one shown in the example above, you will need to make some changes to the original function. We have sample code that will give you exactly everything shown in the image above.

contribuyentes de funciones () global $ wpdb; $ author = $ wpdb-> get_results ("SELECT ID, user_nicename from $ wpdb-> users WHERE display_name 'admin' ORDER BY display_name"); foreach ($ autores como $ autor) echo "
"; echo" ID); echo "/ \"> "; echo get_avatar ($ author-> ID); echo" "; echo ''; echo" ID); echo "/ \"> "; the_author_meta ('display_name', $ author-> ID); echo" "; echo"
"; echo" Sitio web: ID); echo "/ \" target = "_ blank"> "; the_author_meta ('user_url', $ author-> ID); echo" "; echo"
"; echo" en Twitter: ID); echo "\" target = "_ blank"> "; the_author_meta ('twitter', $ author-> ID); echo" "; echo"
"; echo" ID); echo "/ \"> Visit "; the_author_meta ('display_name', $ author-> ID); echo" 's Página de Perfil "; echo" "; echo" "; echo"
";

This code is using the User Photo plugin. The Twitter field is displayed using the trick we mentioned in the article How to show the author's Twitter and Facebook on the profile page.

The CSS for example would look like this:

#authorlist ul estilo de lista: ninguno; ancho: 600px; margen: 0; relleno: 0; #authorlist li margin: 0 0 5px 0; estilo de lista: ninguno; altura: 90px; relleno: 15px 0 15px 0; borde inferior: 1px sólido #ecec; #authorlist img.photo width: 80px; altura: 80px; flotador izquierdo; margen: 0 15px 0 0; relleno: 3px; borde: 1px sólido #ececec; #authorlist div.authname margen: 20px 0 0 10px; 

You can display more information if you wish, using the advanced code as a guide.

Source of this function