Custom User Listing with Numbered Pagination in WordPress

If you’re building a custom page in WordPress and want to display a user listing with numbered pagination, you’ve come to the right place. In this tutorial, we’ll guide you through two methods to achieve this functionality: using a custom WordPress template or employing a shortcode.

Method 1: Using a Custom WordPress Template

Step 1: Make a WordPress Template

Create a new file inside your active WordPress theme with any name (e.g., userListing.php).
Add the following code to the newly created file:

<?php
/*
Template Name: User listing(TPL)
*/

Step 2: Create a Page in WordPress Admin

Go to the WordPress admin and create a new page.
In the right panel, select the template name from “Page Attributes.”

Step 3: Add User Listing Code

Add the following code to the userListing.php file:

<?php
$args = array(
   'role'         => 'um_member',
   'orderby'      => 'login',
   'order'        => 'ASC',
); 
$number   = 48;
$paged    = (get_query_var('paged')) ? get_query_var('paged') : 1;
$offset   = ($paged - 1) * $number;
$users    = get_users($args);
$query    = get_users('&offset='.$offset.'&number='.$number.'&role=um_member');
$total_users = count($users);
$total_query = count($query);
$total_pages = intval($total_users / $number) + 1;
?>
<div class="container">
   <div class="row">
       <?php
       foreach($query as $q) { ?>
           <div class="col-lg-1 col-sm-6 mb-1 minheight">
               <div class="card">
                   <div class="card-body">
                       <?php echo get_avatar( $q->ID, 80 ); ?>
                       <h5 class="card-title"><?php echo get_the_author_meta('display_name', $q->ID)?get_the_author_meta('display_name', $q->ID):'No name' ; ?></h5>
                   </div>
               </div>
           </div>
       <?php } ?>
   </div>
</div>
<?php
if ($total_users > $total_query) {
   echo '<div id="dcsdemopagination" class="clearfix">';
   $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>';
}

Method 2: Using Shortcode

Shortcodes in WordPress provide a convenient way to execute a set of codes with a specific syntax. Follow these steps:

Step 1: Add a New WordPress Page

In the WordPress admin, create a new page.
Paste the following code inside the description section: [dcsUserslistWithPagination]

Step 2: Add Shortcode to functions.php

Paste the following code into the functions.php file of your active WordPress theme:

<?php
add_shortcode('dcsUserslistWithPagination','dcsUserslistWithPagination');
function dcsUserslistWithPagination(){
   $args = array(
       'role'         => 'um_member',
       'orderby'      => 'login',
       'order'        => 'ASC',
   ); 
   $number   = 48;
   $paged    = (get_query_var('paged')) ? get_query_var('paged') : 1;
   $offset   = ($paged - 1) * $number;
   $users    = get_users($args);
   $query    = get_users('&offset='.$offset.'&number='.$number.'&role=um_member');
   $total_users = count($users);
   $total_query = count($query);
   $total_pages = intval($total_users / $number) + 1;
   ?>
   <div class="container">
       <div class="row">
           <?php
           foreach($query as $q) { ?>
               <div class="col-lg-1 col-sm-6 mb-1 minheight">
                   <div class="card">
                       <div class="card-body">
                           <?php echo get_avatar( $q->ID, 80 ); ?>
                           <h5 class="card-title"><?php echo get_the_author_meta('display_name', $q->ID)?get_the_author_meta('display_name', $q->ID):'No name' ; ?></h5>
                       </div>
                   </div>
               </div>
           <?php } ?>
       </div>
   </div>
   <?php
   if ($total_users > $total_query) {
       echo '<div id="dcsdemopagination" class="clearfix">';
       $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>';
   }
}

Your page is now ready to display a custom user listing with numbered pagination. Choose the method that suits your needs and enhance the functionality of your WordPress site!

Conclusion

In this tutorial, we explored two methods to create a custom user listing with numbered pagination in WordPress. Whether you prefer using a custom WordPress template or leveraging shortcodes, these approaches offer flexibility based on your development preferences.

Method 1: Using a Custom WordPress Template

Step 1: Created a new WordPress template file (e.g., userListing.php).
Step 2: Created a page in the WordPress admin, selecting the template from “Page Attributes.”
Step 3: Added code to userListing.php to fetch user data, display it with a custom layout, and implement numbered pagination.

Method 2: Using Shortcode

Step 1: Created a new WordPress page in the admin.
Step 2: Added a shortcode ([dcsUserslistWithPagination]) in the page description.
Step 3: Added shortcode handling code to the theme’s functions.php file to generate the user listing and pagination.

Both methods provide a seamless way to showcase a custom user listing with an organized, numbered pagination system. The choice between the two depends on your project’s structure and your coding preferences.

Feel free to customize the provided code to match your specific requirements. Whether you’re building a membership directory, showcasing team members, or displaying any other user-related information, these methods empower you to create a tailored user listing experience on your WordPress site.