Whereas engaged on a shopper’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 in order for you 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 are going to present you how one can create a contributors web page which can show a listing of authors with avatars or userphoto and another info that you just like. This tutorial is an intermediate stage tutorial.
Very first thing you must do is create a custom page utilizing this template.
Then you'll need to open capabilities.php file in your themes folder and add the next code:
perform contributors()
By including this perform you might be telling WordPress to create a perform that can show writer’s title, and writer’s avatar. You'll be able to 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'll be able to add extra options to this perform equivalent to displaying writer URL and different info from the profile by following the construction used.
You'll additionally want so as to add the next strains to your CSS file:
#authorlist li #authorlist img.picture #authorlist div.authname
As soon as you might be accomplished including the perform, now you would want to name it in your page-template. Open the contributors.php file or no matter you title the file. Comply with the identical web page template as your web page.php and within the loop, simply add this perform as an alternative of displaying the content material:
<div id="authorlist"><ul><?php contributors(); ?></ul></div>
This can offer you a extra content-rich contributors web page. This trick is great for Multi-Writer blogs.
Now right here is an instance of how we used it:
If you wish to have a contributors web page with info like displayed within the instance above, you'll need to make just a few adjustments to the unique perform. We've got an instance code that can get you precisely all the things displayed within the picture above.
perform contributors()
This code is using User Photo plugin. The twitter area 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'll be able to show extra info for those who like through the use of the superior code as your information.
