Latest Tech and Tips

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

2

While working with a customer’s web site, we understood that the developed-in feature for detailing writers was insufficient. We revealed you how to display all writers from your website, however that approach was just great if you desire a basic list to display in your sidebar. If you desire to develop an even more content-rich and also beneficial contributors page, then that feature is ineffective.

In this write-up we will certainly reveal you how you can develop a contributors page which will certainly display a list of writers with avatars or userphoto and also any kind of various other info that you such as. This tutorial is an intermediate degree tutorial.

First point you require to do is develop a customized page utilizing this layout.

Then you will certainly require to open functions.php documents in your motifs folder and also include the adhering to code:

feature contributors() {
worldwide $wpdb;.

$ writers = $wpdb->> get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name");.

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

By including this feature you are informing WordPress to develop a feature that will certainly display author’s name, and also author’s character. You can transform the character to userphoto plugin setup by merely transforming the adhering to line:

 resemble get_avatar($ author->> ID);

and also changing it with:

 resemble userphoto($ author->> ID);

You can include even more attributes to this feature such as showing author URL and also various other info from the account by adhering to the framework made use of.

You would certainly additionally require to include the adhering to lines to your CSS documents:

#authorlist li {
clear: left;.
float: left;.
margin: 0 0 5px 0;.
}

#authorlist img.photo {
size: 40px;.
elevation: 40px;.
float: left;.
}

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

Once you are done including the feature, currently you would certainly require to call it in your page-template. Open the contributors.php documents or whatever you call the documents. Follow the very same page layout as your page.php and also in the loophole, simply include this feature as opposed to showing the web content:

<< div id ="authorlist"><> < ul><>