WordPress Tips: Displaying Author Lists with Pagination

In brief, the template tag is a simple way of querying information from the database and displaying it at the front side of your website. For example, we can display the name of the post author by using the_author(); and using the_title(); to display the post or page title.

WordPress template tags are quite extensive, allowing us to fully customize our website without needing third party plugins. In this tutorial, we are going to show you how to create a custom page that display a list of users using a set of these template tags.

In addition, we will also apply pagination to display those users in a number of pages. Such a page might be required for certain websites.

Creating Custom Page Template

First, create a new PHP file in your activated theme directory. In this example, I’m using a TwentyTwelve theme. Add the following comment tag to register it as a page template.

<?php
/*
Template Name: User Page
*/

In the WordPress page editor, set it as the template for your author page.

Note that you shouldn’t name the file as author.php as it has been reserved by WordPress to display the author post archive.

The Query and Formula

Let’s set the formula. Open the new template we have just created in a code editor.

First, we need to specify the number of users we want to show per page. We set this number in a variable named $number. Anytime you want to change the amount of users displayed on the page, change the value in this variable.

$number = 10;

Add the following code snippet to pinpoint the current pagination number.

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

Then, using the following code, we count the number of users that should be passed over in the pages (offset) – this will take effect at the second page onwards.

$offset = ($paged - 1) * $number;

We need to get the registered users in our website, and count the total number using the PHP count() function, as follows.

$users = get_users();
$total_users = count($users);

We also count the total number of queried user per our specifications, which include the number of users that will be displayed, and the offset number.

$query = get_users('&offset='.$offset.'&number='.$number);

Then, we count the total pages that should be created. We can count it based on the total registered users and the number of users displayed per page, as follows.

$total_pages = intval($total_users / $number) + 1;

Displaying the Users

As we have set the required formula, now we will display the results on the page.

In this example, we will display a few things from the user: the avatar, the full name, and the short biography (description). These information can be retrieved respectively using the following template tags: get_avatar, and get_the_author_meta

echo '<ul id="users">';
foreach($query as $q) { ?>
				
	<li class="user clearfix">
		<div class="user-avatar">
			<?php echo get_avatar( $q->ID, 80 ); ?>	
		</div>
		<div class="user-data">

			<h4 class="user-name">
				<a href="<?php echo get_author_posts_url($q->ID);?>">
					<?php echo get_the_author_meta('display_name', $q->ID);?>
				</a>
			</h4>

			<?php if (get_the_author_meta('description', $q->ID) != '') : ?>
				<p><?php echo get_the_author_meta('description', $q->ID); ?></p>
			<?php endif; ?>

		</div>
	</li>

<?php } 
echo '</ul>';

Creating Pagination

Certainly we don’t want to display hundreds of users in a single page. So, we are going to create the pagination link and split the results in multiple pages. In addition, we will only display the pagination if the total registered user number is greater than the users being displayed per page.

Fortunately, WordPress has a template tag that allows us to create pagination easily, called paginate_links().

<?php
	if ($total_users > $total_query) {
		echo '<div id="pagination" class="clearfix">';
		echo '<span class="pages">Pages:</span>';
		  $current_page = max(1, get_query_var('paged'));
		  echo paginate_links(array(
				'base' => get_pagenum_link(1) . '%_%',
				'format' => 'page/%#%/',
				'current' => $current_page,
				'total' => $total_pages
				'prev_next'    => false,
				'type'         => 'list',
		    ));
		echo '</div>';
	}
?>

All the Codes

For a shortcut, here are all the codes that you can copy and paste into your page template.

<?php 
$number 	= 10;
$paged 		= (get_query_var('paged')) ? get_query_var('paged') : 1;
$offset 	= ($paged - 1) * $number;
$users 		= get_users();
$query 		= get_users('&offset='.$offset.'&number='.$number);
$total_users = count($users);
$total_query = count($query);
$total_pages = intval($total_users / $number) + 1;

echo '<ul id="users">';

foreach($query as $q) { ?>
	
	<li class="user clearfix">
		<div class="user-avatar">
			<?php echo get_avatar( $q->ID, 80 ); ?>	
		</div>
		<div class="user-data">

			<h4 class="user-name">
				<a href="<?php echo get_author_posts_url($q->ID);?>">
					<?php echo get_the_author_meta('display_name', $q->ID);?>
				</a>
			</h4>

			<?php if (get_the_author_meta('description', $q->ID) != '') : ?>
				<p><?php echo get_the_author_meta('description', $q->ID); ?></p>
			<?php endif; ?>

		</div>
	</li>

<?php } 

echo '</ul>';

?>

<?php
if ($total_users > $total_query) {
echo '<div id="pagination" class="clearfix">';
echo '<span class="pages">Pages:</span>';
  $current_page = max(1, get_query_var('paged'));
  echo paginate_links(array(
		'base' => get_pagenum_link(1) . '%_%',
		'format' => 'page/%#%/',
		'current' => $current_page,
		'total' => $total_pages,
		'prev_next'    => false,
		'type'         => 'list',
    ));
echo '</div>';
?>

With a few tweaks in CSS, you can make the page look much nicer.

Any questions? Let us know in the comment box below.

• Download Source

Resources:

• WordPress Template Tags – WordPress Codex
• WordPress Page Template – WordPress Codex
• WordPress Paginate Links – WordPress Codex
• Function Reference: Get Users – WordPress Codex