10.06.2012 in Tutorials, Wordpress

A Better WordPress Authors Page

Recently I had the opportunity to help a friend with a website that is supplied content by authors/contributors. Because of the social status of some of these authors, he wanted the site to have an authors page. Completely understandable, and a must have for any site that is backed by a slew of well-known local individuals.

There are an infinite amount of resources that instruct you on how to make this possible, and one in particular that grabbed my attention. At WPBeginner, they approached this task in a very unique way that I hadn’t seen before, so I wanted to give it a shot.

The solution gives you a highly stylable authors page without having to construct a custom page template, but lacked some room for exceptions when it came to an authors personal information, such as links to his/her Website, Twitter, or Facebook. While it would not display this information if it were not present, it would present empty fields for these areas. With a little tinkering I was able to achieve a setup I was comfortable with.

Firstly, you need to add the custom fields to your User Profile page by adding the code below to your functions.php file.

You have no successfully added two fields, one for your authors Facebook Profile URL and one for their Twitter ID.

I would highly suggest you go and read what WPBeginner wrote on this topic, but to make things easier I will show the code before my changes, and the code after.

This code, from WPBeginner, should be put into your functions.php file.

The problem I came upon, using this code, was that not all authors have Twitter or Facebook, and even if they do, may not want these shared with visitors. Ok great, so what about it? Well, if the author does not have either of these, or a website, there is still an area for these displayed. I wanted a link to these services to show, and an area for them, ONLY if they were present.

I also wanted to rule out authors, who had not actually made a post yet, were not admins, and did not have a specific ID. The ID part was just for good measure, but you can take any of these out of you don’t need them.

Before I move on, let me say that I am by no means a SQL expert, and there is sure to be a more resource friendly way of going about this. If you have an improvement please let me know so I can update this code.

Here is what I came up with in place of what WPBeginner provides. Again, it should go in your functions.php.

Let me explain. First we query the users from our database and display their author name, accept for admins, and the user with the ID of “57″.

/* Authors List Function */
function contributors() {
global $wpdb;

$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users WHERE display_name <> 'admin' AND ID <> '57' ORDER BY display_name");
$post_count = get_usernumposts($author->ID);

We then make sure the authors returned have at least one published post and print out their avatar and display name.

foreach ($authors as $author )

{

	if (get_usernumposts($author->ID) >= 1){

	echo "<li>";

	echo get_avatar($author->ID);

	echo '<div>';
	echo "<span class=\"authname\">";
	the_author_meta('display_name', $author->ID);
	echo "</span>";
	echo "<br /><div class=\"authdet\">";

Now here is where I had to make some changes to compensate for the authors Facebook, Twitter, or website information if nothing was returned. We make exceptions for every scenario. If one, two, or all three of the fields are present, we will return only those results in a link format rather than the “Website: http://yourwebsite.com” format.

if (get_the_author_meta('user_url', $author->ID) != '' AND get_the_author_meta('twitter', $author->ID) != '' AND get_the_author_meta('facebook', $author->ID) != '')
	{
		echo "<a href=\"";
		the_author_meta('user_url', $author->ID);
		echo "\" target=\"new\">Website</a>";

		echo " | <a href=\"http://twitter.com/";
		the_author_meta('twitter', $author->ID);
		echo "\" target=\"new\">Twitter</a>";

		echo " | <a href=\"";
		the_author_meta('facebook', $author->ID);
		echo "\" target=\"new\">Facebook</a><br />";
	}
	elseif (get_the_author_meta('user_url', $author->ID) != '' && get_the_author_meta('twitter', $author->ID) != '')
	{ 
		echo "<a href=\"";
		the_author_meta('user_url', $author->ID);
		echo "\" target=\"new\">Website</a>";

		echo " | <a href=\"http://twitter.com/";
		the_author_meta('twitter', $author->ID);
		echo "\" target=\"new\">Twitter</a><br />";
	}
	elseif (get_the_author_meta('user_url', $author->ID) != '' && get_the_author_meta('facebook', $author->ID) != '')
	{ 
		echo "<a href=\"";
		the_author_meta('user_url', $author->ID);
		echo "\" target=\"new\">Website</a>";

		echo " | <a href=\"";
		the_author_meta('facebook', $author->ID);
		echo "\" target=\"new\">Facebook</a><br />";
	}
	elseif (get_the_author_meta('twitter', $author->ID) != '' && get_the_author_meta('facebook', $author->ID) != '')
	{ 
		echo "<a href=\"http://twitter.com/";
		the_author_meta('twitter', $author->ID);
		echo "\" target=\"new\">Twitter</a>";

		echo " | <a href=\"";
		the_author_meta('facebook', $author->ID);
		echo "\" target=\"new\">Facebook</a><br />";
	}
	elseif (get_the_author_meta('user_url', $author->ID) != '')
	{ 
		echo "<a href=\"";
		the_author_meta('user_url', $author->ID);
		echo "\" target=\"new\">Website</a><br />";
	}
	elseif (get_the_author_meta('twitter', $author->ID) != '')
	{ 
		echo "<a href=\"http://twitter.com/";
		the_author_meta('twitter', $author->ID);
		echo "\" target=\"new\">Twitter</a><br />";
	}
	elseif (get_the_author_meta('facebook', $author->ID) != '')
	{ 
		echo "<a href=\"";
		the_author_meta('facebook', $author->ID);
		echo "\" target=\"new\">Facebook</a><br />";
	}
	else
	{

We then continue on and print out a link to the authors profile page, which in my case contains a library of their posts and an extended biography.

}
	echo "<a href=\"".get_bloginfo('url')."/author/";
	the_author_meta('user_nicename', $author->ID);
	echo "/\">";
	echo "Biography and Archives";
	echo "</a>";
	echo "</div></div>";
	echo "</li>";
	}
	}
}

In case you didn’t read the entire post over at WPBeginner, and wish to use my authors page code. Here is the CSS you will need to format the listings. Adjust them to fit your needs.

Once you have done all of this, you can create a page, and while in HTML editing mode, paste the following. And there you have it, a better WordPress Authors page.

<ul class="author-list">
    <?php contributors(); ?>
</ul>

Lastly, a huge shoutout to WPBeginner and all of the great work that they do! I can’t count how many times I have referred a beginner to their site.