Page Pagination not working with custom query on custom template page

[lauren_olsen17]

I’ve been Googling this topic for a bit now, but I’m officially stumped! My page pagination works on normal pages with the normal WP loop such as the blog post page, but it doesn’t seem to work with a custom WP query loop on a custom template page.

Below is my code:

functions.php where I’m calling a function to display the paged pagination.

function page_pagination_nav() {
    global $wp_query;
 
    $total_pages = $wp_query->max_num_pages;
 
    if ($total_pages > 1){
        $current_page = max(1, get_query_var('paged'));
 
        echo paginate_links(array(
            'base' => get_pagenum_link(1) . '%_%',
            'format' => '/page/%#%',
            'current' => $current_page,
            'total' => $total_pages,
            'prev_text'    => __('« prev'),
            'next_text'    => __('next »'),
            'add_args'  => array()
        ));
    }
}

and the custom template page with the custom query:

<?php

/***
 * 
 * 
 * Template Name: Popular How-To Tutorials
 * Description: This template is for displaying all of the tutorials.
 * 
 * @package theme name here
 * 
 * 
 */
get_header();
?>

<article <?php post_class();?> id="post-<?php the_ID();?>" >
    <main>
    <!-- custom tutorials will go here -->

     <!-- start customs tutorials here -->
    <?php
        $paged = get_query_var('paged') ? get_query_var('page') : 1;

        $args = array( 
            'post_type' => 'tutorials',
            'posts_per_page' => 2,
            'paged' => $paged,  
        );
        //$paged = ( get_query_var('page') ) ? get_query_var('paged') : 1;
        $the_query = new WP_Query( $args ); 
    ?>

        <div class="container">
            <div class="row">
                <?php if ( $the_query->have_posts() ) : ?>
                    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                        <div class="card-layout col-md-3">
                            <header>
                                <div class="aspect-ratio-box">
                                    <?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>
                                </div>
                                <a href="<?php the_permalink(); ?>"><?php the_title('<h3 class="card-title">', '</h3>'); ?></a>
                            </header>
                            <div class="card-content">
                                <?php the_excerpt(); ?> 
                            </div>
                            <footer>
                            <?php  $card_footer = get_field('card_footer'); ?>
                            <?php if($card_footer) : ?>
                                <div class="left-content">
                                    <p><?php echo  $card_footer['author']; ?></p>
                                    <p><?php echo  $card_footer['date']; ?></p> 
                                </div>
                                <div class="right-content">
                                <?php
                                        // if( has_category() ){
                                        //     //display the category
                                        //  print_r( the_category() );
                                        // }
                                       
                                    ?>
                                    <?php
                                        $term = $card_footer['taxonomy']; 
                                            if( $term ) {
                                                foreach($term as $t) {
                                                    $t = get_term($t);
                                                   print_r('<a href="' . get_the_permalink() . '"> ' .$t->name .'</a>'); // this can be changed to slug if necessary
                                                }
                                            }
                                    ?>  
                                </div>
                            <?php endif; ?>
                            </footer>
                        </div>
                    <?php endwhile; ?>
                        <?php page_pagination_nav(); ?>
                    <?php wp_reset_postdata(); ?>
                    <?php else : ?>
                    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
                <?php endif; ?>
            </div>
        </div>
   
    </main>
</article>

<!-- display the footer -->
<?php get_footer(); ?>

Please note, I’ve tried moving and displaying the pagination( <?php page_pagination_nav(); ?>) after the .container class (after the loop) and as you can see just after the endwhile;

Any feedback or suggestions would be greatly welcomed!

Please let me know if you need anything else.

Thank you in advance!

[janndelmark]

You could use this code:

Paste this code below on functions.php:

function generate_pagination($pages = '', $range = 1)
{ 
     $showitems = ($range * 2)+1;  
 
     global $paged;
     if(empty($paged)) $paged = 1;
 
     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }   
 
     if(1 != $pages)
     {
         echo "<div class=\"pagination\">";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";
 
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+4 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
             }
         }
 
         if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\" class=\"next-page\">Next &rsaquo;</a>";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."' class=\"last-page\">Last &raquo;</a>";
         echo "</div>\n";
     }
}

Then add this code after the endwhile;

                        <?php if (function_exists(generate_pagination)) {
    generate_pagination($the_query->max_num_pages);
}?>
                    <?php wp_reset_postdata(); ?>
            </div>
        </div>