How to Display an Author List with Avatars in WordPress Contributors Page

While running on a shopper’s website online, we discovered that the built-in serve as for list authors used to be now not sufficient. We confirmed you the way to show all authors out of your website online, however that way used to be most effective just right if you need a easy checklist to show in your sidebar. If you need to create a extra content-rich and helpful individuals web page, then that serve as is pointless.

In this newsletter we will be able to display you the way you’ll create a individuals web page which is able to show an inventory of authors with avatars or userphoto and every other knowledge that you simply like. This educational is an intermediate degree educational.

First factor you want to do is create a customized web page the use of this template.

Then you’re going to want to open purposes.php record in your subject matters folder and upload the next code:


serve as individuals() {
world $wpdb;

$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->customers ORDER BY display_name");

foreach($authors as $writer) {
echo "<li>";
echo "<a href="".get_bloginfo('url')."/?writer=";
echo $author->ID;
echo "">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div>';
echo "<a href="".get_bloginfo('url')."/?writer=";
echo $author->ID;
echo "">";
the_author_meta('display_name', $author->ID);
echo "</a>";
echo "</div>";
echo "</li>";
}
}

By including this serve as you’re telling WordPress to create a serve as that can show writer’s identify, and writer’s avatar. You can exchange the avatar to userphoto plugin surroundings by way of merely converting the next line:

echo get_avatar($author->ID);

and changing it with:

echo userphoto($author->ID);

You can upload extra options to this serve as similar to showing writer URL and different knowledge from the profile by way of following the construction used.

You would additionally want to upload the next traces to your CSS record:


#authorlist li {
transparent: left;
go with the flow: left;
margin: Zero Zero 5px 0;
}

#authorlist img.picture {
width: 40px;
top: 40px;
go with the flow: left;
}

#authorlist div.authname {
margin: 20px Zero 0 10px;
go with the flow: left;
}

Once you’re achieved including the serve as, now you could possibly want to name it in your page-template. Open the individuals.php record or no matter you identify the record. Follow the similar web page template as your web page.php and in the loop, simply upload this serve as as a substitute of showing the content material:

<div identification="authorlist"><ul><?php individuals(); ?></ul></div>

This will supply you with a extra content-rich individuals web page. This trick is superb for Multi-Author blogs.

Now here’s an instance of ways we used it:

If you need to have a individuals web page with knowledge like displayed in the instance above, you’re going to want to make a couple of adjustments to the unique serve as. We have an instance code that can get you precisely the whole lot displayed in the picture above.

serve as individuals() {
world $wpdb;

$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->customers WHERE display_name <> 'admin' ORDER BY display_name");

foreach ($authors as $writer ) {

echo "<li>";
echo "<a href="".get_bloginfo('url')."/writer/";
the_author_meta('user_nicename', $author->ID);
echo "/">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div>';
echo "<a href="".get_bloginfo('url')."/writer/";
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 "/" goal="_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 "" goal="_blank">";
the_author_meta('twitter', $author->ID);
echo "</a>";
echo "<br />";
echo "<a href="".get_bloginfo('url')."/writer/";
the_author_meta('user_nicename', $author->ID);
echo "/">Visit&nbsp;";
the_author_meta('display_name', $author->ID);
echo "'s Profile Page";
echo "</a>";
echo "</div>";
echo "</li>";
}
}

This code is using User Photo plugin. The twitter box is being displayed the use of the trick we discussed in the object How to Display Author’s Twitter and Facebook in the Profile web page.

The CSS as an example would appear to be:

#authorlist ul{
list-style: none;
width: 600px;
margin: 0;
padding: 0;
}
#authorlist li {
margin: Zero Zero 5px 0;
list-style: none;
top: 90px;
padding: 15px 0 15px 0;
border-bottom: 1px forged #ececec;
}

#authorlist img.picture {
width: 80px;
top: 80px;
go with the flow: left;
margin: 0 15px Zero 0;
padding: 3px;
border: 1px forged #ececec;
}

#authorlist div.authname {
margin: 20px Zero 0 10px;
}

You can show additional information when you like by way of the use of the complex code as your information.

Source of this Function

Recent Articles

Fix-iPhone Hotspot Not Working

Network related issues are the common problems that we all encounter while using a smartphone. Are you facing a problem using your...

Snapchat streak Made Easy for Beginners with the Best Tips

Snapchat streak won’t help you with all your life problems, but will surely give you a strange sense of accomplishment. Unlike streaks...

Facebook Messenger Alternatives that Keep Your Chat Private

Facebook might be the king of social media ever since its launch 16 years ago, but it is not entirely safe. If...

How to use iOS 14’s new Headphone Audio Customization feature

Apple’s iOS14 comes with several new features. Among them, the most useful feature is it allows to customize iPhone headphone for a...

How to limit third party access to Photos app in iPhone – iOS 14

The new iOS 14 has introduced several new features related to security and privacy. If you are more concerned about your privacy then...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here