When using WordPress, you probably already know about managing a user list in the Admin panel. This is also one of the needs that many people are interested in. Especially, people seem to have a higher demand to display users only when they want to publish their accounts.

So today, I will show you how to display the user list on the frontend with Meta Box plugin and publish the user accounts only when they are allowed by the owners, besides, hide the accounts that users don’t want to publish.

Before Getting Started

To show the user list on the frontend and set up it as I mentioned above, you will need to have these tools:

  1. Meta Box: This is a free WordPress plugin that provides a framework for creating custom fields, so you definitely need to install and activate it. You can download the Meta Box plugin on WordPress.org.
  2. Meta Box Builder: This is a paid premium extension of Meta Box so it helps you create custom fields with an intuitive user interface (UI) with easy drag-and-drop manipulations on the backend. If you can code to create a custom field, you can skip this extension. But there is another free tool if you still want to use UI, which is the Online Generator.

  3. DataTables: It is a library that uses jQuery to add advanced features to tables in HTML. It helps you display and create functions with tables more easily.

Display a User List on the Frontend with Meta Box Plugin

Step 1: Create a New Custom Field for Users to Choose their Account Display Mode

To create a user listing page that has only accounts published by their users, I need to create a custom field for users to choose whether their account is private or public. Hence, I will use the Meta Box plugin to create this custom field.

First of all, go to Meta Box/Add new to create a new Field Group. Then, click Add Fields button, choose Radio for the field type.

Create a new custom field for users to choose whether their account is private or public

You can see that I created two selections Yes/No in the Choices section, which means Publish/not Publish the user accounts. Also, I set the Default value of this field to Yes. I also named this field "Publish or not?" and use it to refer to this field in the next section. Depending on your demand, you can customize it as needed.

Let move to the Settings tab and choose User for the Show For section to display this field group on the User page.

Set up to display the custom field on the User page

Then, click Save and turn to the User page to check. If you do it properly, you can see the custom field look like this:

the custom field

In addition, you can create other fields for users to fill in more information similarly. For example:

Create other custom fields for users to fill in more information

Step 2: Create a New Page on the Front End

In this step I will create a new page on the frontend without any content (I haven’t included the user list yet). At the same time, I will create a template for it.

First, go to the theme directory, create a new file named users-listing-page.php. Then, add the following code to it:

<?php
/*
*    Template Name: Users Listing Page
*/
?>
<?php get_header(); ?>
<h1>Users List</h1>
<table id="Userslist">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
<tbody>
        </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>
<?php get_footer(); ?>

Next, go to Page/Add new and create a new page called Users List. Now look at the Page Attributes section, you can see the Template tab. In this tab, select Users Listing Page. This is the Template Name that I created for the file above.

Create the Users List page
Create the Users List page

Step 3: Import the Library and JavaScript File to the Website

First, import the DataTables library prepared in step 1. Here, I didn’t download it but use it directly by CDN on jsDelivr.

To import the library and script file, you need to add this code to the functions.php file.

function libs_import() {
           wp_enqueue_style( 'datatable-style', 'https://cdn.jsdelivr.net/npm/datatables@1.10.18/media/css/jquery.dataTables.min.css', '1.10.18', true );
           wp_enqueue_script( 'datatable-script', 'https://cdn.jsdelivr.net/npm/datatables@1.10.18/media/js/jquery.dataTables.min.js', array( 'jquery' ) );
wp_enqueue_script( theme-script', get_template_directory_uri() . '/js/script.js' );
}
add_action( 'wp_enqueue_scripts', 'libs_import' );

After that, create a script.js file in the js folder of theme to write JavaScript.

Step 4: Display User List on the Front End

Now, open the users-listing-page.php file that we made in step 2 and follow these steps.
Use the following function to get users’ data only when the value of the "Publish or not?" field (the field’s ID is publish_account) is Yes:

$users = get_users( [
    'meta_key'   => 'publish_account',
    'meta_value' => 'yes',
] );

Next, we will use the foreach loop to get the users’ information and output html.

<?php
        foreach ($users as $user) { $user_id = $user->ID; ?>
        <tr>
                <td><?php echo $user->display_name; ?></td>
                <td><?php echo rwmb_meta( 'position', array( 'object_type' => 'user' ), $user_id ); ?></td>
                <td><?php echo rwmb_meta( 'office', array( 'object_type' => 'user' ), $user_id ); ?></td>
                <td><?php echo rwmb_meta( 'age', array( 'object_type' => 'user' ), $user_id ); ?></td>
                <td><?php echo rwmb_meta( 'start_date', array( 'object_type' => 'user' ), $user_id ); ?></td>
                <td>$<?php echo number_format(rwmb_meta( 'salary', array( 'object_type' => 'user' ), $user_id ),3,",","."); ?></td>
</tr>
<?php } ?>

Explanation:

  • $user_id = $user->ID: this function helps to get user ID and assign it to $user_id.
  • rwmb_meta( 'position', array( 'object_type' => 'user' ), $user_id ): this function is to get the value of the field with the position ID from user’s ID.

You will see the user list display on the frontend like this:

the user list display on the frontend

There is a problem that my list just has under 100 users but it looks pretty long. So, if the number of users on your website is much more than that, you will not be able to display it in just one page like this. That's why I need to use the DataTables library. This tool will help me paging, sorting, and searching data in tables more easily.

To use this library, you have to add this code to the script.js file.

$(document).ready(function() {
    $('#Userslist').DataTable();
} );

Note: #Userslist is the ID of the table I created from users-listing-page.php file before. You just need to replace your file’s ID when setting up this part.

In order not to set up more, I used the datatable under the form of Zero configuration. There are also many other customization options. You can refer to the library here to customize based on your needs!

And here is the final result:

the final result

Visit here to see the full source code:

https://github.com/wpmetabox/tutorials/tree/master/list-users

Final Words

After reading this tutorial, you can display the user list on the frontend with the support of Meta Box plugin, Meta Box Builder extension and Datatable jQuery. It is not complicated if you follow the steps, right?

In addition, Meta Box plugin also has many other applications, you can go here to learn more about the applications of this plugin in building useful features for your website.

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. Display the Latest Products Section - P4 - Using Meta Box + Zion
  12. Display the Most Viewed Posts - P1 - using MB Views
  13. How to Add Custom Fields to Display Banners using Meta Box Plugin
  14. How to Add Guest Author in WordPress using Meta Box (Part 1)
  15. How to Add Guest Author in WordPress using Meta Box (Part 2)
  16. How to Add Related Posts to WordPress Using Meta Box
  17. How to Build a Hotel Booking Website Using Meta Box - P1
  18. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  19. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  20. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  21. How to Create a Classified Ads Website using Meta Box
  22. How to Create a Product Page - P2 - Meta Box + Oxygen
  23. How to Create a Product Page - P3 - Using Meta Box + Bricks
  24. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  25. How to Create a Product Page using Meta Box Plugin
  26. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  27. How to Create a Recipe - P3 - Using Meta Box and Elementor
  28. How to Create a Recipe - P4 - Using Meta Box and Bricks
  29. How to Create a Recipe - P5 - Using Meta Box and Zion
  30. How to Create a Recipe with Meta Box Plugin
  31. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  32. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  33. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  34. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  35. How to Create a Team Members Page - P4 - Just Meta Box
  36. How to Create ACF Flexible Content Field with Meta Box
  37. How to Create an Auto-Updated Cheat Sheet in WordPress
  38. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  39. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  40. How to Create an FAQs Page -P3- Using Meta Box
  41. How to Create Buttons with Dynamic Link using Custom Fields
  42. How to Create Category Thumbnails & Featured Images Using Custom Fields
  43. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  44. How to Create Menu for a Restaurant - P1 - Using Meta Box and Elementor
  45. How to Create Online Admission Form for School or University
  46. How to Create Online Reservation Form for Restaurants using Meta Box
  47. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  48. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  49. How to Display Images from Cloneable Fields - P2 - with Oxygen
  50. How to Display Images from Cloneable Fields - P3 - with Elementor
  51. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  52. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  53. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  54. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  55. How to Manually Reorder Posts with Meta Box
  56. How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
  57. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

5 thoughts on “Display a User List On the Frontend with Meta Box

  1. There's a tiny typo in one of the codeblocks (step 4):

    `$users = get_users(array(
    'meta_key' => publish_account',
    'meta_value' => 'yes'
    ));`

    There's a quote missing right before publish_account.

  2. Hi. I want to display users with profile custom in the frontend. I can see when I login in the site but I wish that everyone else watch.

  3. hello i want to display image in my front page using metabox
    here, is the code if any mistakes help me to get solution for this.....

    add_action( 'add_meta_boxes', 'multi_media_uploader_meta_box' );

    function multi_media_uploader_meta_box() {
    add_meta_box( 'my-post-box', 'Media Field', 'multi_media_uploader_meta_box_func', 'post', 'normal', 'high' );
    }

    function multi_media_uploader_meta_box_func($post) {
    $banner_img = get_post_meta($post->ID,'post_banner_img',true);
    ?>

    .multi-upload-medias ul li .delete-img {
    position: absolute;
    right: 3px;
    top: 2px;
    background: aliceblue;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    color: red;
    }
    .multi-upload-medias ul li {
    width: 120px;
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    position: relative;
    }
    .multi-upload-medias ul li img {
    width: 100%;
    }

    Banner Image

    jQuery(function($) {

    $('body').on('click', '.wc_multi_upload_image_button', function(e) {
    e.preventDefault();

    var button = $(this),
    custom_uploader = wp.media({
    title: 'Insert image',
    button: { text: 'Select Image' },
    multiple: true
    }).on('select', function() {
    var attech_ids = '';
    attachments
    var attachments = custom_uploader.state().get('selection'),
    attachment_ids = new Array(),
    i = 0;
    attachments.each(function(attachment) {
    attachment_ids[i] = attachment['id'];
    attech_ids += ',' + attachment['id'];
    if (attachment.attributes.type == 'image') {
    $(button).siblings('ul').append('');
    } else {
    $(button).siblings('ul').append('');
    }

    i++;
    });

    var ids = $(button).siblings('.attechments-ids').attr('value');
    if (ids) {
    var ids = ids + attech_ids;
    $(button).siblings('.attechments-ids').attr('value', ids);
    } else {
    $(button).siblings('.attechments-ids').attr('value', attachment_ids);
    }
    $(button).siblings('.wc_multi_remove_image_button').show();
    })
    .open();
    });

    $('body').on('click', '.wc_multi_remove_image_button', function() {
    $(this).hide().prev().val('').prev().addClass('button').html('Add Media');
    $(this).parent().find('ul').empty();
    return false;
    });

    });

    jQuery(document).ready(function() {
    jQuery(document).on('click', '.multi-upload-medias ul li i.delete-img', function() {
    var ids = [];
    var this_c = jQuery(this);
    jQuery(this).parent().remove();
    jQuery('.multi-upload-medias ul li').each(function() {
    ids.push(jQuery(this).attr('data-attechment-id'));
    });
    jQuery('.multi-upload-medias').find('input[type="hidden"]').attr('value', ids);
    });
    })

    Add Media';
    $image_str = '';
    $image_size = 'full';
    $display = 'none';
    $value = explode(',', $value);

    if (!empty($value)) {
    foreach ($value as $values) {
    if ($image_attributes = wp_get_attachment_image_src($values, $image_size)) {
    $image_str .= '';
    }
    }

    }

    if($image_str){
    $display = 'inline-block';
    }

    return '' . $image_str . '<a href="#" class="wc_multi_upload_image_button button' . $image . 'Remove media';
    }

    // Save Meta Box values.
    add_action( 'save_post', 'wc_meta_box_save' );

    function wc_meta_box_save( $post_id ) {
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
    return;
    }

    if( !current_user_can( 'edit_post' ) ){
    return;
    }

    if( isset( $_POST['post_banner_img'] ) ){
    update_post_meta( $post_id, 'post_banner_img', $_POST['post_banner_img'] );
    }
    // Use below code to show metabox values from anywhere
    $id = get_the_ID();
    $banner_img = get_post_meta($post_id->$id, 'post_banner_img', true);
    $banner_img = explode(',', $banner_img);
    if(!empty($banner_img)) {
    ?>

    <img src="">

    <?php
    }
    }

Leave a Reply