get understrap pagination to work with custom query

I am using the excellent understrap WordPress boiler plate theme. It has a pagination function that works if you put inside a standard loop like so:

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
    <?php endwhile; ?>

    <?php else : ?>
    <?php endif; ?>
    <?php understrap_pagination(); ?>

<?php understrap_pagination(); ?>

The actual code for it is this:

 if ( ! function_exists( 'understrap_pagination' ) ) {
        /**
         * Displays the navigation to next/previous set of posts.
         *
         * @param string|array $args {
         *     (Optional) Array of arguments for generating paginated links for archives.
         *
         *     @type string $base               Base of the paginated url. Default empty.
         *     @type string $format             Format for the pagination structure. Default empty.
         *     @type int    $total              The total amount of pages. Default is the value WP_Query's
         *                                      `max_num_pages` or 1.
         *     @type int    $current            The current page number. Default is 'paged' query var or 1.
         *     @type string $aria_current       The value for the aria-current attribute. Possible values are 'page',
         *                                      'step', 'location', 'date', 'time', 'true', 'false'. Default is 'page'.
         *     @type bool   $show_all           Whether to show all pages. Default false.
         *     @type int    $end_size           How many numbers on either the start and the end list edges.
         *                                      Default 1.
         *     @type int    $mid_size           How many numbers to either side of the current pages. Default 2.
         *     @type bool   $prev_next          Whether to include the previous and next links in the list. Default true.
         *     @type bool   $prev_text          The previous page text. Default '«'.
         *     @type bool   $next_text          The next page text. Default '»'.
         *     @type string $type               Controls format of the returned value. Possible values are 'plain',
         *                                      'array' and 'list'. Default is 'array'.
         *     @type array  $add_args           An array of query args to add. Default false.
         *     @type string $add_fragment       A string to append to each link. Default empty.
         *     @type string $before_page_number A string to appear before the page number. Default empty.
         *     @type string $after_page_number  A string to append after the page number. Default empty.
         *     @type string $screen_reader_text Screen reader text for the nav element. Default 'Posts navigation'.
         * }
         * @param string       $class           (Optional) Classes to be added to the <ul> element. Default 'pagination'.
         */
        function understrap_pagination( $args = array(), $class="pagination" ) {

            if ( ! isset( $args['total'] ) && $GLOBALS['wp_query']->max_num_pages <= 1 ) {
                return;
            }

            $args = wp_parse_args(
                $args,
                array(
                    'mid_size'           => 2,
                    'prev_next'          => true,
                    'prev_text'          => __( '&laquo;', 'understrap' ),
                    'next_text'          => __( '&raquo;', 'understrap' ),
                    'type'               => 'array',
                    'current'            => max( 1, get_query_var( 'paged' ) ),
                    'screen_reader_text' => __( 'Posts navigation', 'understrap' ),
                )
            );

            $links = paginate_links( $args );
            if ( ! $links ) {
                return;
            }

            ?>

            <nav aria-labelledby="posts-nav-label">

                <h2 id="posts-nav-label" class="sr-only">
                    <?php echo esc_html( $args['screen_reader_text'] ); ?>
                </h2>

                <ul class="<?php echo esc_attr( $class ); ?>">

                    <?php
                    foreach ( $links as $key => $link ) {
                        ?>
                        <li class="page-item <?php echo strpos( $link, 'current' ) ? 'active' : ''; ?>">
                            <?php echo str_replace( 'page-numbers', 'page-link', $link ); ?>
                        </li>
                        <?php
                    }
                    ?>

                </ul>

            </nav>

            <?php
        }
    }

but the issue I’m having is the pagination function does nothing with a custom loop that looks like this:

 <?php
      $catquery = new WP_Query( array(
      'orderby' => date,
      'order' => 'DESC',
      'cat' => '6'
    ));
    ?>

    <?php if ( have_posts() ) : ?>
      <?php while($catquery->have_posts()) : $catquery->the_post(); ?>
       <?php endwhile;
      wp_reset_postdata();
      ?>

How do I modify this to work in that type of loop? Please let me know if I’m missing something to help you answer the question better. Thanks in advance.

the pagination function does nothing with a custom loop

That’s because for custom loops or secondary WP_Query instances like your $catquery variable, you need to explicitly tell the function how many pages are available for your custom query.

So the $total argument (see the function’s description) should be set to the max_num_pages property of the query object, i.e. the $catquery variable:

understrap_pagination( [
    'total' => $catquery->max_num_pages,
] );

It’s that simple and the above should work. 🙂