{"id":313,"date":"2021-12-23T19:38:48","date_gmt":"2021-12-23T14:08:48","guid":{"rendered":"https:\/\/hostkicker.com\/blog\/?p=313"},"modified":"2022-05-19T15:44:13","modified_gmt":"2022-05-19T10:14:13","slug":"display-an-author-list-with-avatars-on-wordpress","status":"publish","type":"post","link":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/","title":{"rendered":"How to Display an Author List with Avatars on WordPress Contributors Page"},"content":{"rendered":"<p><span data-preserver-spaces=\"true\">\u00a0<\/span><span data-preserver-spaces=\"true\">Today You will learn How to Display an Author List with Avatars on WordPress Contributors Page. Also, how you can make a contributors page that can display a list of authors with avatars or user photos and any other information you like.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">WordPress has a default feature to display a list of your site&#8217;s authors. But there is no option to display their avatars. You can only link the text list to the author&#8217;s page if you have an author.php file in your theme.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">If you want to show an author list page of your multi-author WordPress website, you need to make a customized WordPress authors page to list all the writers, team members, and contributors of your website. <\/span><span data-preserver-spaces=\"true\">You can show a list of authors in WordPress with their bio, photos (Gravatars), and social media links.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Basically, there are two manners to showcase authors on your WordPress website.<\/span><\/p>\n<p><strong>1. Plugin method<\/strong><\/p>\n<p><span data-preserver-spaces=\"true\">In this case, you can use a plugin that develops a shortcode to automatically bring data for a list of authors with their Gravatars, names, and other important details of their profiles. It is a fast way to do anything in WordPress.<\/span><\/p>\n<p><strong>2. Code method<\/strong><\/p>\n<p><span data-preserver-spaces=\"true\">You can create a manual code and place it wherever you need it. You can make a customized list of authors by manually adding photos, names, and other profile details. It will take more time, but it does not put an extra load on your website.<\/span><\/p>\n<h2>1. Plugin method-<span data-preserver-spaces=\"true\">\u00a0<\/span><strong><span data-preserver-spaces=\"true\">Author Avatars List\u00a0<\/span><\/strong><\/h2>\n<p><span data-preserver-spaces=\"true\">Let us move to our first method: The Plugin Method<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><strong><span data-preserver-spaces=\"true\">Author Avatars List Plugin<\/span><\/strong><\/p>\n<p><span data-preserver-spaces=\"true\">The Author Avatars List is a plugin based on the WordPress core template functions to bring data for a list of authors. This plugin will automatically show authors or team members using the existing data of your recorded WordPress users.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The plugin uses an easy and simple author avatars shortcode to paste, which creates a good author list page.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Now, Install and activate, The Author Avatars List Plugin. You can check our guide on <a href=\"https:\/\/hostkicker.com\/blog\/how-to-install-a-wordpress-plugin\">how to install Pugin<\/a> to take help.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">You do not have to do settings. The plugin adds new functions to the WordPress editor and a new widget.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-318\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AuthorAvatarsList.jpg\" alt=\"\" width=\"1024\" height=\"456\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AuthorAvatarsList.jpg 1024w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AuthorAvatarsList-300x134.jpg 300w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AuthorAvatarsList-768x342.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h3><span data-preserver-spaces=\"true\">How To Create WordPress Author List Page<\/span><\/h3>\n<p><span data-preserver-spaces=\"true\">You can add the author avatars to your different posts and pages in WordPress. We have to make Contributors page for your authors.<\/span><\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">Go to Pages &gt;&gt; click \u201cAdd New.\u201d &gt;&gt; click the \u201cauthor avatars\u201d icon.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-320\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AddNewPage-1.jpg\" alt=\"\" width=\"1024\" height=\"456\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AddNewPage-1.jpg 1024w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AddNewPage-1-300x134.jpg 300w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AddNewPage-1-768x342.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-322\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AuthorIcon.jpg\" alt=\"\" width=\"1024\" height=\"456\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AuthorIcon.jpg 1024w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AuthorIcon-300x134.jpg 300w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AuthorIcon-768x342.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">select between a single author or list of authors.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-324\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/ListUsersOption.jpg\" alt=\"\" width=\"1024\" height=\"456\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/ListUsersOption.jpg 1024w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/ListUsersOption-300x134.jpg 300w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/ListUsersOption-768x342.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">Now, you can select the options you want to show.\u00a0<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-326\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/ChooseAvatarOptions.jpg\" alt=\"\" width=\"1024\" height=\"456\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/ChooseAvatarOptions.jpg 1024w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/ChooseAvatarOptions-300x134.jpg 300w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/ChooseAvatarOptions-768x342.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">After selecting everything, click the &#8220;Insert&#8221; button.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-328\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/InsertShortcode.jpg\" alt=\"\" width=\"1024\" height=\"456\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/InsertShortcode.jpg 1024w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/InsertShortcode-300x134.jpg 300w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/InsertShortcode-768x342.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0A shortcode is created for you on the page.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-329\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AuthorShortcode.jpg\" alt=\"\" width=\"1024\" height=\"456\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AuthorShortcode.jpg 1024w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AuthorShortcode-300x134.jpg 300w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/AuthorShortcode-768x342.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">After that, you can publish or update the page. The author list will be available on your website.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-332\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/newsstand-theme.png\" alt=\"\" width=\"650\" height=\"379\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/newsstand-theme.png 650w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/newsstand-theme-300x175.png 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/p>\n<h2>2. Coding method<\/h2>\n<p><span data-preserver-spaces=\"true\">Let&#8217;s move further to our second method: the coding method<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">First, create a custom page on your WordPress website.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Then open\u00a0<\/span><em><span data-preserver-spaces=\"true\">the functions.php<\/span><\/em><span data-preserver-spaces=\"true\">\u00a0file in your themes and place the following code:<\/span><\/p>\n<pre><span data-preserver-spaces=\"true\"> function contributors() {<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">global $wpdb;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">\u00a0<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">$authors = $wpdb-&gt;get_results(\"SELECT ID, user_nicename from $wpdb-&gt;users ORDER BY display_name\");<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">\u00a0<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">foreach($authors as $author) {<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;li&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;a href=\\\"\".get_bloginfo('url').\"\/?author=\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo $author-&gt;ID;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"\\\"&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo get_avatar($author-&gt;ID);<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;\/a&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo '&lt;div&gt;';<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;a href=\\\"\".get_bloginfo('url').\"\/?author=\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo $author-&gt;ID;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"\\\"&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">the_author_meta('display_name', $author-&gt;ID);<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;\/a&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;\/div&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;\/li&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">}<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">}<\/span><\/pre>\n<p><span data-preserver-spaces=\"true\">WordPress will create a function that shows the author&#8217;s name and the author&#8217;s avatar from the above code. You can change the avatar to user photo by simply changing the following line:<\/span><\/p>\n<pre><span data-preserver-spaces=\"true\"> echo get_avatar($author-&gt;ID);<\/span><\/pre>\n<p><span data-preserver-spaces=\"true\">Replacing it with:<\/span><\/p>\n<pre><span data-preserver-spaces=\"true\"> echo userphoto($author-&gt;ID);<\/span><\/pre>\n<p><span data-preserver-spaces=\"true\">You can also add more features to this function. For example, displaying the author URL and other information from the profile by following the structure.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">You have to add the following lines to your CSS file:<\/span><\/p>\n<pre><span data-preserver-spaces=\"true\"> #authorlist li {<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">clear: left;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">float: left;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">margin: 0 0 5px 0;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">}<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">\u00a0<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">#authorlist img.photo {<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">width: 40px;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">height: 40px;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">float: left;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">}<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">\u00a0<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">#authorlist div.authname {<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">margin: 20px 0 0 10px;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">float: left;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">}<\/span><\/pre>\n<p><span data-preserver-spaces=\"true\">After adding all the functions, you have to bring them to your page template. Open the contributors.php file. Use the same page template as page.php and add this function instead of displaying the content:<\/span><\/p>\n<pre><span data-preserver-spaces=\"true\"> &lt;div id=\"authorlist\"&gt;&lt;ul&gt;&lt;?php contributors(); ?&gt;&lt;\/ul&gt;&lt;\/div&gt;<\/span><\/pre>\n<p><span data-preserver-spaces=\"true\">Now, you will have a more content-rich contributors page. This works excellent for Multi-Author blogs.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">You can have a look at how it is.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-506\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/contirbutorspageex.gif\" alt=\"\" width=\"520\" height=\"106\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Contributor page<\/strong><\/p>\n<p><span data-preserver-spaces=\"true\">If you want a contributors page with information like the example above, you have to make a few changes to the original function. We have an example code that will get you exactly everything displayed in the image above.<\/span><\/p>\n<pre><span data-preserver-spaces=\"true\"> function contributors() {<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">global $wpdb;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">\u00a0<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">$authors = $wpdb-&gt;get_results(\"SELECT ID, user_nicename from $wpdb-&gt;users WHERE display_name &lt;&gt; 'admin' ORDER BY display_name\");<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">\u00a0<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">foreach ($authors as $author ) {<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">\u00a0<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;li&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;a href=\\\"\".get_bloginfo('url').\"\/author\/\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">the_author_meta('user_nicename', $author-&gt;ID);<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"\/\\\"&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo get_avatar($author-&gt;ID);<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;\/a&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo '&lt;div&gt;';<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;a href=\\\"\".get_bloginfo('url').\"\/author\/\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">the_author_meta('user_nicename', $author-&gt;ID);<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"\/\\\"&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">the_author_meta('display_name', $author-&gt;ID);<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;\/a&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;br \/&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"Website: &lt;a href=\\\"\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">the_author_meta('user_url', $author-&gt;ID);<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"\/\\\" target='_blank'&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">the_author_meta('user_url', $author-&gt;ID);<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;\/a&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;br \/&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"Twitter: &lt;a href=\\\"http:\/\/twitter.com\/\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">the_author_meta('twitter', $author-&gt;ID);<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"\\\" target='_blank'&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">the_author_meta('twitter', $author-&gt;ID);<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;\/a&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;br \/&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;a href=\\\"\".get_bloginfo('url').\"\/author\/\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">the_author_meta('user_nicename', $author-&gt;ID);<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"\/\\\"&gt;Visit&amp;nbsp;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">the_author_meta('display_name', $author-&gt;ID);<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"'s Profile Page\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;\/a&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;\/div&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">echo \"&lt;\/li&gt;\";<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">}<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">}<\/span><\/pre>\n<p><span data-preserver-spaces=\"true\">The CSS, for the above example, would look like:<\/span><\/p>\n<pre><span data-preserver-spaces=\"true\"> #authorlist ul{<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">list-style: none;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">width: 600px;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">margin: 0;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">padding: 0;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">}<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">#authorlist li {<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">margin: 0 0 5px 0;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">list-style: none;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">height: 90px;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">padding: 15px 0 15px 0;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">border-bottom: 1px solid #ececec;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">}<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">\u00a0<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">#authorlist img.photo {<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">width: 80px;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">height: 80px;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">float: left;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">margin: 0 15px 0 0;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">padding: 3px;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">border: 1px solid #ececec;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">}<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">\u00a0<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">#authorlist div.authname {<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">margin: 20px 0 0 10px;<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">}<\/span><\/pre>\n<p><strong>wrapping up-<\/strong><\/p>\n<p><span data-preserver-spaces=\"true\">So, These were the ways to Display an Author List with Avatars on WordPress Contributors Page. You can go with any method from the above you like.\u00a0<\/span><\/p>\n<p>You can also check our another post on <a href=\"https:\/\/hostkicker.com\/blog\/how-to-list-all-authors-from-a-blog-post-in-wordpress\/\">How to list all authors from a blog in WordPress.<\/a><\/p>\n<p>we hope this has help you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0Today You will learn How to Display an Author List with Avatars on WordPress Contributors Page. Also, how you can make a contributors page that can display a list of authors with avatars or user photos and any other information you like. WordPress has a default feature to display a list of your site&#8217;s authors. [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":347,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-313","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wp-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v19.3 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Display an Author List with Avatars on WordPress<\/title>\n<meta name=\"description\" content=\"This article will tell you How to Display an Author List with Avatars on WordPress Contributors Page. You can code it manually or use plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display an Author List with Avatars on WordPress Contributors Page\" \/>\n<meta property=\"og:description\" content=\"This article will tell you How to Display an Author List with Avatars on WordPress Contributors Page. You can code it manually or use plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostkicker\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-23T14:08:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-19T10:14:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-featured-image-row13-01.png\" \/>\n\t<meta property=\"og:image:width\" content=\"693\" \/>\n\t<meta property=\"og:image:height\" content=\"511\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Olivia Smith\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olivia Smith\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-an-author-list-with-avatars-on-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-an-author-list-with-avatars-on-wordpress\\\/\"},\"author\":{\"name\":\"Olivia Smith\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/person\\\/f06306b595baa96c90a0491b941d7660\"},\"headline\":\"How to Display an Author List with Avatars on WordPress Contributors Page\",\"datePublished\":\"2021-12-23T14:08:48+00:00\",\"dateModified\":\"2022-05-19T10:14:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-an-author-list-with-avatars-on-wordpress\\\/\"},\"wordCount\":747,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-an-author-list-with-avatars-on-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/hostkicker-featured-image-row13-01.png\",\"articleSection\":[\"Wp tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-an-author-list-with-avatars-on-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-an-author-list-with-avatars-on-wordpress\\\/\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-an-author-list-with-avatars-on-wordpress\\\/\",\"name\":\"How to Display an Author List with Avatars on WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-an-author-list-with-avatars-on-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-an-author-list-with-avatars-on-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/hostkicker-featured-image-row13-01.png\",\"datePublished\":\"2021-12-23T14:08:48+00:00\",\"dateModified\":\"2022-05-19T10:14:13+00:00\",\"description\":\"This article will tell you How to Display an Author List with Avatars on WordPress Contributors Page. You can code it manually or use plugin.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-an-author-list-with-avatars-on-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-an-author-list-with-avatars-on-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-an-author-list-with-avatars-on-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/hostkicker-featured-image-row13-01.png\",\"contentUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/hostkicker-featured-image-row13-01.png\",\"width\":693,\"height\":511,\"caption\":\"How to Display an Author List with Avatars on WordPress Contributors Page\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/display-an-author-list-with-avatars-on-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Display an Author List with Avatars on WordPress Contributors Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/\",\"name\":\"Hostkicker\",\"description\":\"Blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#organization\",\"name\":\"Hostkicker\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/hostkicker-logo-01.png\",\"contentUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/hostkicker-logo-01.png\",\"width\":940,\"height\":218,\"caption\":\"Hostkicker\"},\"image\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/person\\\/f06306b595baa96c90a0491b941d7660\",\"name\":\"Olivia Smith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g\",\"caption\":\"Olivia Smith\"},\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/author\\\/olivia\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Display an Author List with Avatars on WordPress","description":"This article will tell you How to Display an Author List with Avatars on WordPress Contributors Page. You can code it manually or use plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Display an Author List with Avatars on WordPress Contributors Page","og_description":"This article will tell you How to Display an Author List with Avatars on WordPress Contributors Page. You can code it manually or use plugin.","og_url":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/","og_site_name":"Hostkicker","article_published_time":"2021-12-23T14:08:48+00:00","article_modified_time":"2022-05-19T10:14:13+00:00","og_image":[{"width":693,"height":511,"url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-featured-image-row13-01.png","type":"image\/png"}],"author":"Olivia Smith","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Olivia Smith","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/#article","isPartOf":{"@id":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/"},"author":{"name":"Olivia Smith","@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/person\/f06306b595baa96c90a0491b941d7660"},"headline":"How to Display an Author List with Avatars on WordPress Contributors Page","datePublished":"2021-12-23T14:08:48+00:00","dateModified":"2022-05-19T10:14:13+00:00","mainEntityOfPage":{"@id":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/"},"wordCount":747,"commentCount":0,"publisher":{"@id":"https:\/\/hostkicker.com\/blog\/#organization"},"image":{"@id":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-featured-image-row13-01.png","articleSection":["Wp tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/","url":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/","name":"How to Display an Author List with Avatars on WordPress","isPartOf":{"@id":"https:\/\/hostkicker.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-featured-image-row13-01.png","datePublished":"2021-12-23T14:08:48+00:00","dateModified":"2022-05-19T10:14:13+00:00","description":"This article will tell you How to Display an Author List with Avatars on WordPress Contributors Page. You can code it manually or use plugin.","breadcrumb":{"@id":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/#primaryimage","url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-featured-image-row13-01.png","contentUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-featured-image-row13-01.png","width":693,"height":511,"caption":"How to Display an Author List with Avatars on WordPress Contributors Page"},{"@type":"BreadcrumbList","@id":"https:\/\/hostkicker.com\/blog\/display-an-author-list-with-avatars-on-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hostkicker.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Display an Author List with Avatars on WordPress Contributors Page"}]},{"@type":"WebSite","@id":"https:\/\/hostkicker.com\/blog\/#website","url":"https:\/\/hostkicker.com\/blog\/","name":"Hostkicker","description":"Blog","publisher":{"@id":"https:\/\/hostkicker.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hostkicker.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hostkicker.com\/blog\/#organization","name":"Hostkicker","url":"https:\/\/hostkicker.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-logo-01.png","contentUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-logo-01.png","width":940,"height":218,"caption":"Hostkicker"},"image":{"@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/person\/f06306b595baa96c90a0491b941d7660","name":"Olivia Smith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g","caption":"Olivia Smith"},"url":"https:\/\/hostkicker.com\/blog\/author\/olivia\/"}]}},"jetpack_featured_media_url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-featured-image-row13-01.png","_links":{"self":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts\/313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":18,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts\/313\/revisions"}],"predecessor-version":[{"id":2039,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts\/313\/revisions\/2039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/media\/347"}],"wp:attachment":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/media?parent=313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/categories?post=313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/tags?post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}