November 4, 2016

List site users and add custom fields to user profiles.

Wouldn’t it be nice to list all your authors and blog contributors on one page. And even have the control of filtering and displaying the key players, vs just the authors? Wouldn’t it be cool to have the person’s bio, and any associated links come up in that same list?

Here you go:

add_action( 'show_user_profile', 'my_show_extra_profile_fields' );
add_action( 'edit_user_profile', 'my_show_extra_profile_fields' );

function my_show_extra_profile_fields( $user ) { ?>

	<h3>Leadership (Meet Us) Section</h3>
	<p>The following section is only for the senior leadership team. Leave it blank to reduce this profile's prominence.</p>
	<table class="form-table">

			<th><label for="job">Job Title</label></th>

				<input type="text" name="job_title" id="job_title" value="<?php echo esc_attr( get_the_author_meta( 'job_title', $user->ID ) ); ?>" class="regular-text" /><br />
				<span class="description">Please enter your Job Title.</span>
			<th><label for="job">Order</label></th>

				<input type="text" name="order_by" id="order_by" value="<?php echo esc_attr( get_the_author_meta( 'order_by', $user->ID ) ); ?>" class="regular-text" /><br />
				<span class="description">Place users in order of this number.</span>

<?php }
add_action( 'personal_options_update', 'my_save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );

function my_save_extra_profile_fields( $user_id ) {

	if ( !current_user_can( 'edit_user', $user_id ) )
		return false;

	/* Copy and paste this line for additional fields. Make sure to change 'twitter' to the field ID. */
	update_usermeta( $user_id, 'job_title', $_POST['job_title'] );
	update_usermeta( $user_id, 'order_by', $_POST['order_by'] );
  /* Template Name: Contributors Page */
<?php get_header(); ?>
<section class="cb-content">
  <div class="container-fluid">
      <div class="row">            
        <div class="cb-main col-sm-12">
      <?php if ( have_posts() ) :  
          while ( have_posts() ) : the_post(); 
          get_template_part( 'content','page');
            if ( comments_open() || '0' != get_comments_number() ) :
          endif; wp_reset_query();?>

<section class="cb-content">
  <div class="container-fluid">
      <div class="row">            
        <div class="cb-main col-sm-12">
$args = array('fields' => 'all_with_meta');
$blogusers = get_users($args);
// We'll need a custom comparison function to order by the custom field
//function order_by($a, $b){
  //return ($a->order < $b->order) ? -1 : 1;
// Sort using our custom comparison function
//usort($blogusers, "order_by");
// Array of stdClass objects.
echo '<div id="leadership">';
foreach ( $blogusers as $user ) {
  if(get_the_author_meta( 'job_title',$user->id)){
  echo '<div class="profile leader" data-sort="'.get_the_author_meta( 'order_by', $user->ID ).'">'.get_avatar( $user, 225 );
  echo '<div class="info">' . esc_html( $user->display_name ) . ':<br><span class="title">'.get_the_author_meta( 'job_title',$user->id).'</span></div><div class="description">' . esc_html( $user->description ) . '</div></div>';
echo '</div><div id="contributors">';
foreach ( $blogusers as $user ) {
if(!get_the_author_meta( 'job_title',$user->id)){
  echo '<div class="profile contributor">'.get_avatar( $user, 225 );
  echo '<div class="info">' . esc_html( $user->display_name ) . '</div></div>';
echo '</div>';
        <div id="overlay">
          <div id="modal">
            <div class="over-close">X</div>
            <img src="">
            <div class="over-name"></div>
            <div class="over-desc"></div>
(function($) {
  function sort_profiles(a,b){
    return ($(b).data('sort')) < ($(a).data('sort')) ? 1 : -1;
    var image = $(this).children('img').attr('src');
    var oName = $(this).children('.info').html();
    var oDesc = $(this).children('.description').text();
    $('#modal img').attr('src',image);
    $('#modal .over-name').html(oName);
    $('#modal .over-desc').text(oDesc);
<?php get_footer(); ?>