Sillybean

Creating a user directory, part 2: Building the page template

In the first installment, we added some contact fields for our users. Now we’re going to build the page template that displays the user directory.

Make a copy of your theme’s page template (page-users.php) and give it a distinct name (“User Directory Template”). Replace its loop with this:

<br />
<?php if (have_posts()) : while (have_posts()) : the_post(); ?></p>
<div class="post" id="post-<?php the_ID(); ?>"></p>
<h2 class="pagetitle"><?php the_title(); ?></h2>
<p>	<?php<br />
        $blogusers = get_users_of_blog(); //get all registered users<br />
	    foreach ($blogusers as $bloguser) {<br />
			$user = get_userdata($bloguser->user_id); //get data about each user as an object<br />
				// create a flat array with only the fields we need<br />
				$allusers[$user->ID] = array(<br />
					'last' => $user->last_name,<br />
					'first' => $user->first_name,<br />
					'nicename' => $user->user_nicename,<br />
					'title' => $user->title,<br />
					'phone' => $user->phone,<br />
					'email' => $user->user_email<br />
				);<br />
		}<br />
		asort($allusers);   // sort the users by last name<br />
		?></p>
<table id="staff-directory" class="sortable">
<thead>
<tr>
<th>Name</th>
<th>Title</th>
<th>Phone</th>
<th>Email</th>
<th class="unsortable">Add</th>
</tr>
</thead>
<tbody>
		<?php<br />
		foreach ($allusers as $auser) {  ?></p>
<tr class="vcard" id="<?php echo $auser['nicename']; ?>"></p>
<td class="fn uid"><?php echo $auser['last'].", ".$auser['first']; ?></td>
<td class="title"><?php echo $auser['title']; ?></td>
<td class="tell"><?php echo $auser['phone']; ?></td>
<td class="email"><a href="mailto:<?php echo $auser['email']; ?>"><?php echo $auser['email']; ?></td>
<td><a href="http://h2vx.com/vcf/YOUR-URL/?p=<?php echo $post->ID.'#'.$auser['nicename']; ?>"><br />
                    <img src="/images/vcard.gif" title="Add <?php echo $auser['first'].' '.$auser['last']; ? /> to your address book"<br />
                    alt="Add <?php echo $auser['first'].' '.$auser['last']; ?> to your address book" /></a></td>
</tr>
<p>		<?php } ?><br />
		</tbody>
</table></div>
<p>    <?php comments_template(); ?><br />
    <?php endwhile; endif; ?><br />

Be sure to replace YOUR-URL with your site’s URL (without the http://) in the last table cell.

Let’s break that down a little.

First, you’ll see that we’re starting a typical loop. This lets us get the page title and comment settings. If you want some introductory content, you could add the_content(); after the title.

Here, instead of using the page’s content, we’re grabbing a list of users and looping through them to create a table. We use the get_users_of_blog() and get_userdata() WordPress functions to build an array of users. (I’ve included the user ID as the array key, but it’s not really needed unless you’re debugging something.) Once we have our array, we can use a simple asort() function to sort by last name, since that’s the first element in our array.

From here, everything should be straightforward — except, perhaps, those classes on the table rows and cells. If you haven’t worked with microformats before, this might look a little strange. The extra classes make up the hCard specification. With a little help from the H2VX service, each of those table rows can be turned into downloadable vCards that you can add to almost any address book application — and that’s exactly what the links in the last column do.

The sortable class on the table allows us to use the sortable, striped table script we wrote about a few days ago. You’ll notice that I added an unsortable class to the last column, since it wouldn’t make sense to sort the vCard links.

Here’s what the table looks like:

The completed directory

You’re not quite finished! You have to create a page in WordPress that uses this template. Add a new page. If you decided to use the_content(), go ahead an fill it in; otherwise, leave the content blank. In the Page Attributes area, choose the page you just created from the dropdown menu. Publish your post and view it. The table should appear.

And there you have it! With two loops and a little strange-looking HTML, we’ve created a complete directory of our site’s users, and even provided visitors with a way to add us to their address books.