WordPress – list users with odd/even system

1 Views

The title may be misleading, as I’m not entirely sure how to phrase that I’m trying to accomplish.

I want to list the users of a WordPress-run website on a Meet the Team page, and I’ve worked out that this is the best code for the job:

Read More
function contributors() {
global $wpdb;

$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name");

foreach($authors as $author) {
echo "<li>";
echo "<a href="".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div>';
echo "<a href="".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "">";
the_author_meta('display_name', $author->ID);
echo "</a>";
echo "</div>";
echo "</li>";
}
}

This works well, and lists the users as required. However, my client would like the users to be laid out like so:

[Name] [Image]
[Description]

[Image] [Name]
[Description]

[Name] [Image]
[Description]

and so on. So, odd numbers have the image on the right, and even numbers have the image on the left. The idea is to break up the design a bit, and make it look less rigid. (Hope that makes sense)

Any ideas as to how I can achieve this, using the code given at the beginning?

Many thanks 🙂

(Note – I am aware that the vanilla code given doesn’t have any image calls or anything like that, I just know that that is the starting point, it terms of the PHP functions. I’ll add the image calls, descriptions and names afterwards )

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. To me you have two options.

    Option #1

    use a variable to add an odd/even class to the image that you can then target with css and float the image to the appropriate side

    Here is an example.

    <?php
function contributors() {
    global $wpdb;

    $authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name");

    $count = 1;
    $class = "odd";
    foreach( $authors as $author ) : ?>
        <li class="<?php echo $class; ?>">
            <a href="<?php echo get_author_posts_url( $author->ID ); ?>">
                <?php echo get_avatar( $author->ID ); ?>
            </a>
            <div>
                <a href="<?php echo get_author_posts_url( $author->ID ); ?>">
                    <?php echo get_the_author_meta( 'display_name', $author->ID ); ?>
                </a>
            </div>
        </li>
        <?php 
        $count = $count * -1;

        if( $count == 1) {
            $class = "even";
        } else {
            $class = "odd";
        }

    endforeach;
}
?>

    And the css

    .odd img {
    float: right;
}

.even img {
   float: left;
}

    Option #2

    use the nth-child() css selector to control which side the image floats to.

    Example:

    ul li:nth-child(odd) img {
    float: right;
}

ul li:nth-child(even) img {
   float: left;
}

    Also you may want to check out the built-in author functions
    https://codex.wordpress.org/Template_Tags#Author_tags