How to display a list of authors in bootstrap grid?

Question

Basically I am struggling to display the author list in a grid:

<div class="container">
<div class="row">
<div class="col-lg-4">
<?php 

wp_list_authors( array(
    'show_fullname' => 1,
    'optioncount'   => 1,
    'exclude' => 4,
    'orderby'       => 'post_count',
    'order'         => 'DESC',
    'number'        => 60
) ); ?>
</div>
</div>
</div>

Should I use the user table instead of is there a loop I can use against the author list?

Thank you

Answer 1

Not many ways to style the wp_list_author but you can use the style => 'list' argument to display authors in <li> and then style your <ul>as wanted. https://developer.wordpress.org/reference/functions/wp_list_authors/

    <div class="container">
<div class="row">
<div class="col-lg-4">
    <ul class="d-flex">
<?php 

wp_list_authors( array(
    'exclude' => 4,
    'show_fullname' => 1,
    'optioncount'   => 1,
    'orderby'       => 'post_count',
    'order'         => 'DESC',
    'number'        => 60,
    'style'         => 'list',
) ); ?>

    </ul>
</div>
</div>
</div>  

For example adding the d-flexclass to your <ul>

You could also use the get_usersfunction.

https://developer.wordpress.org/reference/functions/get_users/

I update my code below with this query you can have the bootstrap grid ;)

<?php 
$users    = get_users('');
$query    = get_users( [ 'role__in' => [ 'author', 'editor' ],
                        'number'=> 60,
    'exclude' => 4,
    'orderby'       => 'post_count',
    'order'         => 'DESC', ]);

?>
 <div class="container">
<div class="row">
    <?php
foreach($query as $q) { ?>


<div class="col-lg-4">
          <?php echo get_the_author_meta('display_name', $q->ID);?>
</div>

<?php } ?>
</div>
</div>

Answer 2

It looks like this can be achieved easily using Visual Composer plugin.

Take a look at this link with brief instructions.

https://wpexplorer-themes.com/total/docs/display-users/

Here's a link to the plugin: https://wordpress.org/plugins/visualcomposer/