0

My loop returns five posts and the HTML should look like this..

<ul>
    <li class="topfive"> ... </li>
    <li class="topfive"> ... </li>
    <li class="topfive"> ... </li>
    <li class="topfive"> ... </li>
    <li class="topfive"> ... </li>
</ul>

And, I need to programmatically add classes to them according to the order of appearance, something like this..

<ul>
    <li class="topfive first"> ... </li>
    <li class="topfive second"> ... </li>
    <li class="topfive third"> ... </li>
    <li class="topfive fourth"> ... </li>
    <li class="topfive fifth"> ... </li>
</ul>

Here is the code I am using to create the loop:

function custom_top_products() {
    $args = array (
                'post_type' => 'products',
                'post_status' => 'publish',
                'orderby' => 'comment_count',
                'posts_per_page' => 5
            );
        $posts = new WP_Query( $args );

        ?>
        <div id="topproducts" class="ratingbox">
            <h3 class="rbh3">Top 5 Products</h3>
            <div class="topproductcontainer">
        <?php
            if ( $posts->have_posts() ) {
                while ( $posts->have_posts() ) {
                $posts->the_post();
            ?>
                <li class="topfive"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>          
            <?php               
            } else {
                echo '<p class="trc">Sorry, No Popular Products Found</p>';
            }
            wp_reset_postdata();
        ?>
            </div>
        </div>      
        <?php
}

Please help

1 Answer 1

1

Just create an array with your classes and loop through alongside with the main loop:

function custom_top_products() {
    $classes = array( 'first', 'second', 'third', 'fourth', 'fifth' );
    $classes_count = count( $classes );

    $posts = new WP_Query( array(
        'post_type' => 'products',
        'post_status' => 'publish',
        'orderby' => 'comment_count',
        'posts_per_page' => 5
    ) );

    $i = 0;

    ?><div id="topproducts" class="ratingbox">
        <h3 class="rbh3">Top 5 Products</h3>
        <div class="topproductcontainer"><?php
            if ( $posts->have_posts() ) {
                while ( $posts->have_posts() ) {
                    $posts->the_post();
                    ?><li class="topfive <?php echo $classes[$i++ % $classes_count] ?>">
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
                    </li><?php
                }

                wp_reset_postdata();
            } else {
                echo '<p class="trc">Sorry, No Popular Products Found</p>';
            }
            ?></div>
    </div><?php
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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