0

I'm looking for a way to display Wordpress users on a page in a grid. Ideally with an image and a name. It's for a face book page (not Zuckerberg's blue version) on a company's intranet.

In my current situation I have:

  • A Wordpress instance
  • Users added with filled profiles
  • Users are assigned to a department (Marketing, logistics, etc.)

On a page I'd like to show the users by group. Preferably by the use of a shortcode ([wpusers group="logistics"]) or a pagebuilder element.

How can I get this to work? Are there plugins for this (that I've been unable to find)? Or is it possible by some semi pro coding?

I'm looking forward to you answers/suggestions.

EDIT - 20181101:

==========================================================

I think I skipped some essential information in my initial question:

  • The site is used as an intranet by the use of the BuddyPress plugin.
  • I need to output the the members image, profile link and name.
  • You could use the get_users() function and add_shortcode() function to put that in a shortcode. – Bas van Dijk Oct 11 '18 at 15:06
1

The first thing you have to do is create the shortcode you need:

function wpusers_shortcode( $atts ) {
    // Attributes
    $atts = shortcode_atts(
        array(
            'group' => 'logistics',
        ),
        $atts
    );
    // code here
}
add_shortcode( 'wpusers', 'wpusers_shortcode' );

Now you have a self-closing shortcode. Now it's time to consult the database to get all registered users:

$args = array(
    'role'           => 'Subscriber',
    'order'          => 'ASC',
    'orderby'        => 'id',
    'fields'         => 'all_with_meta',
);

// The User Query
$users = new WP_User_Query( $args );

// The User Loop
if ( ! empty( $users->results ) ) {
    foreach ( $users->results as $user ) {
        // do something
    }
} else {
    // no users found
}

With this code you can get all users of type "Subscriber" that are registered. You can change the type of user (role) by the following: "Super Admin", "Administrator", "Editor", "Author", "Contributor", "Subscriber" or even your own custom role: "teachers".

Assuming you are using Bootstrap, the following structure is enough to make the column:

<div class="container">
   <div class="row users">
       <div class="col-xs-12 col-sm-4 col-md-3 user">
           <div class="user-photo">
               <img src="..." width="" height="" />
           </div>
           <div class="user-info">
               <h6>User name</h6>
               <p>User job</p>
           </div>
       </div>
   </div>
</div>

If we put everything together it would look like this:

function wpusers_shortcode( $atts ) {

    // Attributes
    $atts = shortcode_atts(
        array(
            'group' => 'logistics',
        ),
        $atts
    );

    $args = array(
        'role'           => 'Subscriber',
        'order'          => 'ASC',
        'orderby'        => 'id',
        'meta_query'     => array(
                'relation' => 'AND',
                array(
                      'key'     => 'group', // custom field here
                      'value'   => $atts["group"],
                      'compare' => '=',
                      'type'    => 'CHAR',
                ),
        ),
        'fields'         => 'all_with_meta',
    );

    // The User Query
    $users = new WP_User_Query( $args );

    ob_start(); // Start buffer ?>

    <div class="container"> <?php
        if ( ! empty( $users->results ) ) { ?>
            <div class="row users"> <?php
                foreach ( $users->results as $user ) {
                    $user_photo = ...;
                    $user_name = ...;
                    $user_job = ...; ?>
                    <div class="col-xs-12 col-sm-4 col-md-3 user">
                        <div class="user-photo">
                            <img src="<?= $user_photo["url"] ?>" width="<?= $user_photo["width"] ?>" height="<?= $user_photo["height"] ?>" />
                        </div>
                        <div class="user-info">
                            <h6><?= $user_name ?></h6>
                            <p><?= $user_job ?></p>
                        </div>
                    </div> <?php
                } ?>
            </div> <?php
        } else { ?>
            <div class="row user-no-result">
                <div class="col">
                    <div class="alert alert-warning">
                        <p><?= __("No users found.", "theme") ?></p>
                        <a class="btn btn-link"><?= __("Return to home", "theme") ?></a>
                    </div>
                </div>
            </div> <?php
        } ?>
    </div> <?php

    $output = ob_get_contents(); // Get buffer content
    ob_end_clean(); // Clear buffer
    return $output; // Return generated html
}
add_shortcode( 'wpusers', 'wpusers_shortcode' );

I hope you help, greetings!

  • 1
    Shortcodes should return output, not echo it. This shortcode would need output buffering to display correctly. – Jacob Peattie Oct 11 '18 at 15:19
  • 1
    Hello! thank you for the correction. Actually that has not given me any problems with that, but I'll still correct the code just in case. – JessHilario Oct 11 '18 at 15:53
  • Thanks @JesúsMagallón for this detailed answer! The code is returning "no users found" at the moment though. I think I set the department wrong (it is now set in a buddypress extended profile). Firstly: Are there other ways to add a department attribute to a user so that the code will return users? Secondly: Do I have to add this code to the functions.php for every single department (about 15 or so)? – Rick Oct 31 '18 at 9:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.