CSS WP.blogspot.com

The best way to Show an Creator Checklist with Avatars in WordPress Contributors Web page

The best way to Show an Creator Checklist with Avatars in WordPress Contributors Web page

Whereas engaged on a consumer’s web site, we realized that the built-in perform for itemizing authors was not sufficient. We confirmed you how to display all authors from your site, however that technique was solely good if you need a easy record to show in your sidebar. If you wish to create a extra content-rich and helpful contributors web page, then that perform is ineffective.

On this article we'll present you how one can create a contributors web page which can show a listing of authors with avatars or userphoto and another data that you just like. This tutorial is an intermediate stage tutorial.

Very first thing it is advisable to do is create a custom page utilizing this template.

Then you will have to open features.php file in your themes folder and add the next code:

perform contributors() 

By including this perform you're telling WordPress to create a perform that can show creator’s identify, and creator’s avatar. You possibly can change the avatar to userphoto plugin setting by merely altering the next line:

echo get_avatar($author->ID);

and changing it with:

echo userphoto($author->ID);

You possibly can add extra options to this perform equivalent to displaying creator URL and different data from the profile by following the construction used.

You'd additionally want so as to add the next traces to your CSS file:

#authorlist li 

#authorlist img.picture 

#authorlist div.authname 

As soon as you're finished including the perform, now you would want to name it in your page-template. Open the contributors.php file or no matter you identify the file. Comply with the identical web page template as your web page.php and within the loop, simply add this perform as a substitute of displaying the content material:

<div id="authorlist"><ul><?php contributors(); ?></ul></div>

This may offer you a extra content-rich contributors web page. This trick is superb for Multi-Creator blogs.

Now right here is an instance of how we used it:

Example of a Contributors Page with Author List and other Info

If you wish to have a contributors web page with data like displayed within the instance above, you will have to make just a few modifications to the unique perform. We have now an instance code that can get you precisely every thing displayed within the picture above.

perform contributors() 

This code is using User Photo plugin. The twitter discipline is being displayed utilizing the trick we talked about within the article How to Display Author’s Twitter and Facebook in the Profile page.

The CSS for instance would appear to be:

#authorlist ul
#authorlist li 

#authorlist img.picture 

#authorlist div.authname 

You possibly can show extra data in case you like through the use of the superior code as your information.

Source of this Function

Tutorials