Custom Pagination is Broken

Question

Good Afternoon!

I am working on adding pagination to a website and currently it is working fine but for some reason the function loads an extra page. We have 7 posts, and I set it to display 4 posts per page. How ever the issue is that the pagination loads a third page that displays no posts. I was just wondering why this was and how I can fix it?

Here is a live example of what I mean:

• http://weightcreative.com/blog
• http://weightcreative.com/blog/page/2
• http://weightcreative.com/blog/page/3

Here is the code from my posts page:

<?php
/**
 *
 * 
 * Date: 2017-08-31
 * Time: 11:30 AM
 */

    get_header();
?>


<!-- Site HERO Section -->
<?php include get_template_directory() . '/sections/hero.php'; ?>


<!-- Latest Updates -->
<div class="latest-updates flex flex-column flex-centered">

  <center><h2><?php echo get_field('latest_update_title', get_option('page_for_posts')); ?></h2></center>
  <p><?php echo get_field('latest_update_description', get_option('page_for_posts')); ?></p>

</div>


<!-- Blog Posts -->
<div id="postsContainer" class="blog-posts flex flex-column">
  <?php

    $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;

    $query_args = array(
      'post_type' => 'post',
      'posts_per_page' => 4,
      'paged' => $paged,
    );

    $the_query = new WP_Query( $query_args );

    if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();

      get_template_part( 'template-parts/content', get_post_type() );

    endwhile; endif;
    wp_reset_postdata();
  ?>

</div>

  <nav class='custom-pagination flex flex-centered'>
    <?php echo custom_pagination(); ?>
  </nav>

<!-- TESTIMONIALS Section -->
<?php
if ( get_field( 'testimonials_section_visible', get_option( 'page_for_posts' ) ) ):
    include get_template_directory() . '/sections/testimonials.php';
endif;
?>



<!-- SERVICES Section -->
<?php
if ( get_field( 'services_section_visible', get_option( 'page_for_posts' ) ) ):
    include get_template_directory() . '/sections/services.php';
endif;
?>



<!-- START PROJECT Section -->
<?php
if ( get_field( 'start_project_section_visible', get_option( 'page_for_posts' ) ) ):
    include get_template_directory() . '/sections/start-project.php';
endif;
?>



<!-- CLIENT LOGOS Section -->
<?php
if ( get_field( 'client_logos_visible', get_option( 'page_for_posts' ) ) ):
    include get_template_directory() . '/sections/clients.php';
endif;
?>



<!-- GET IN TOUCH Section -->
<?php
if ( get_field( 'get_in_touch_section_visible', get_option( 'page_for_posts' ) ) ):
    include get_template_directory() . '/sections/get-in-touch.php';
endif;
?>



<!-- INSTAGRAM Section -->
<?php
if ( get_field( 'instagram_section_visible', get_option( 'page_for_posts' ) ) ):
    include get_template_directory() . '/sections/instagram.php';
endif;
?>

<!-- Footer Section -->
<?php
get_footer();
?>

And here is the PHP code for the custom_pagination function:

/*
 * Custom Pagination
 */
function custom_pagination($numpages = '', $pagerange = '', $paged='') {

    if (empty($pagerange)) {
        $pagerange = 2;
    }

    /**
     * This first part of our function is a fallback
     * for custom pagination inside a regular loop that
     * uses the global $paged and global $wp_query variables.
     *
     * It's good because we can now override default pagination
     * in our theme, and use this function in default quries
     * and custom queries.
     */
    global $paged;
    if (empty($paged)) {
        $paged = 1;
    }
    if ($numpages == '') {
        global $wp_query;
        $numpages = $wp_query->max_num_pages;
        if(!$numpages) {
            $numpages = 1;
        }
    }

    /**
     * We construct the pagination arguments to enter into our paginate_links
     * function.
     */
    $pagination_args = array(
            'base'            => get_pagenum_link(1) . '%_%',
            'format'          => 'page/%#%',
            'total'           => $numpages,
            'current'         => $paged,
            'show_all'        => False,
            'end_size'        => 1,
            'mid_size'        => $pagerange,
            'prev_next'       => True,
            'prev_text'       => __('«'),
            'next_text'       => __('»'),
            'type'            => 'plain',
            'add_args'        => false,
            'add_fragment'    => ''
    );

    $paginate_links = paginate_links($pagination_args);


    if ($paginate_links) {
        echo "<nav class='reviews-pagination-links flex flex-centered'>";
        echo $paginate_links;
        echo "</nav>";
    }
}

I believe the issue is in the custom pagination function but I am not able to located it and fix it for the life of me. Any help is greatly appreciated!

Answer 1

Chances are your pager is getting the count of all posts, regardless of whether they are published. In your query, you should add a filter for only published posts.

    $query_args = array(
        'post_type' => 'post',
        'posts_per_page' => 4,
        'paged' => $paged,
        'post_status' = 'publish', 
    );

Then the results count and number of pager links should match what you actually see rendered.