Add a unique class to last row of a bootstrap 4 wordpress theme

I've been researching ways to add a unique class to the last row of a bootstrap 4 grid layout. I found many examples of how to identify the last post in a wordpress query, but identifying the start of the last row so I could add a unique class was harder to locate.

In the end, I did some (in retrospect) basic math to calculate which loop in a while statement contained the first post of the last row, and inserted the desired 'last' class at that point.

This code is working ($project_columns is an integer between 1 and 12) but I was wondering if my solution has any performance issues or could have been done "better".

    <!-- Project Thumbnails -->
    <?php if ( $show_project_thumbnails === true ) : ?>

        <?php
            $args = array(
                'post_type' => 'projects',
                'orderby' => $project_orderby,
                'order' => $project_order,
            );

            $the_query = new WP_Query($args);
            if ( $the_query->have_posts ()) :
                $counter = 0;
                $post_count = $the_query->post_count; 
                $total_rows = (ceil) ( $post_count / $project_columns );
                $first_post_last_row = ( $total_rows - 1 ) * $project_columns;
        ?>
        <div id="projects">

            <div class="row content-area bg-light projects">

                <div class="col projects-title">

                    <h1 class="text-center display-3">Recent Projects.</h1>
                    <hr class="separator"></span>

                </div><!-- .col end -->

            </div><!-- .row end -->

                <?php
                    while ( $the_query->have_posts ()) : $the_query->the_post();
                        if ($counter % $project_columns == 0) :
                            echo $counter > 0 ? "</div>" : ""; // close div if it's not the first   
                            echo $counter == $first_post_last_row ? "<div class=\"row content-area bg-light last\">" : "<div class=\"row content-area bg-light\">";
                        endif;

                ?>

                            <div class="col-md projects-thumbnails">

                                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"">

                                    <?php

                                        the_post_thumbnail();
                                        echo $items;

                                    ?>
                                </a>

                            </div><!-- .col-md end -->

                <?php $counter++;
                        endwhile;
                    endif;
                    wp_reset_postdata();
                ?>

            </div><!-- .row end -->

        </div><!-- #projects end -->

    <?php endif; ?>
    <!-- /Project Thumbnails -->

2 answers

  • answered 2018-04-14 15:16 Mădălin

    I think that the easiest way to select the last row is to use CSS :last-child selector.

  • answered 2018-04-14 15:46 mooga

    you can access last row by something like that

    <?php 
        $last_key = count($array) - 1;
        if(key($array) == $last_key){
           // do something
        }
    ?>
    

    or if they key is not number

     <?php 
            $last_key = count($array) - 1;
            $last_row = $array[$last_key];
            if(key($array) == $last_row){
               // do something
            }
        ?>