Static Frontpage Pagination - Custom loop

Question

I created a custom content template, assigned it to a page and coded the query.

Everything appears to be working as they should. The only issue I have is with the pagination. So, when I go the second page I get a "No posts were found."

What I've tried so far:

• I set another paginated grid (3rd party plugin) as a homepage. Fiddling with the pagination of that plugin gave me the same devastating result.

This is my source

            <?php
            if ( get_query_var('paged') ) {
                 $paged = get_query_var('paged');
                 } elseif ( get_query_var('page') ) {
                 $paged = get_query_var('page');
                 } else {
                 $paged = 1;
                 }
              $args=array(
                 'post_type' => 'gadget',
                 'post_status' => 'publish',
                 'posts_per_page' => 36,
                 'paged' => $paged,
                 'nopaging' => false
                );

              $fp_query = null;
              $fp_query = new WP_Query($args);

              if( $fp_query->have_posts() ) {

                $i = 0;
                while ($fp_query->have_posts()) : $fp_query->the_post();
                global $post;
                $postidlt = get_the_id($post->ID);

              // modified to work with 3 columns
              // output an open <div>
              if($i % 3 == 0) { ?> 

              <div class="vc_row prd-box-row">

              <?php
              }
              ?>
                <div class="vc_col-md-4 vc_col-sm-6 vc_col-xs-12 prd-box row-height">
                    <div class="prd-box-inner">
                    <div class="prd-box-image-container">
                      <a href="<?php the_permalink(); ?>">
                        <div class="prd-box-image" style ="background-image: url(
                            <?php $acf_header = get_field('header_image');
                                  if ($acf_header) {
                                    the_field('header_image');
                                  }
                                  else {
                                      echo types_render_field('headerimage', array("raw"=>"true", "url"=>"true","id"=>"$postidlt"));
                                  }
                            ?>);">
                          <div class="vc_col-xs-12 prd-box-date"><?php $short_date = get_the_date( 'M j' ); echo $short_date;?><span class="full-date">, <?php $full_date = get_the_date( 'Y' ); echo $full_date;?></span></div>
                          <div class="badges-container">
                            <!-- Discount Condition -->
                            <?php $discountbg = types_render_field("discount", array("style" => "FIELD_NAME : $ FIELD_VALUE", "id"=>"$postidlt")); if($discountbg) : ?>
                            <div class="vc_col-xs-2 discounted-badge">
                                <i class="fa fa-percent" aria-hidden="true"></i>
                            </div>
                            <?php endif; ?>
                            <!-- Video Condition -->
                            <div class="vc_col-xs-2 video-badge">
                                <i class="fa fa-play" aria-hidden="true"></i>
                            </div>
                            <!-- Crowdfunding Condition -->
                            <?php if ( has_term('crowdfunding', 'gadget-categories', $post->ID) ):  ?>
                            <div class="vc_col-xs-2 crowdfunding-badge">
                                <i class="fa fa-money" aria-hidden="true"></i>
                            </div>
                            <?php endif; ?>
                          </div>
                        </div>
                      </a>
                    </div>
                    <div class="prd-separator"></div>
                    <div class="vc_row prd-box-info">
                        <div class="vc_col-xs-12 prd-box-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
                    </div>
                    <div class="prd-separator"></div>
                    <div class="vc_row prd-box-info">
                        <div class="vc_col-md-12 vc_col-sm-12 vc_col-xs-12 ct-pr-wrapper">
                            <div class="prd-box-price">
                                <?php   $initalprice = types_render_field("initial-price", array("style" => "FIELD_NAME : $ FIELD_VALUE", "id"=>"$postidlt"));
                                        $discountedprice = types_render_field("discount", array("style" => "FIELD_NAME : $ FIELD_VALUE", "id"=>"$postidlt"));
                                        $tba = types_render_field("tba-n", array("output" => "raw", "id"=>"$postidlt"));
                                        $currency = types_render_field("currency", array());
                                        if ($initalprice && empty($discountedprice) && empty($tba)) {
                                            echo($currency),($initalprice);
                                        }
                                        elseif ($discountedprice && empty($tba)) {
                                            echo($currency),($discountedprice);
                                        }
                                        elseif ($tba) {
                                            echo("TBA");
                                        }
                                ?>
                            </div>
                          <div class="prd-box-category">
                             <?php
                                $terms = get_the_terms(  $post->ID , 'gadget_categories' );
                                    foreach ( $terms as $index => $term ) {
                                        if ($index == 0) {                                                                                                      
                                            // The $term is an object, so we don't need to specify the $taxonomy.
                                            $term_link = get_term_link( $term );

                                            // If there was an error, continue to the next term.
                                            if ( is_wp_error( $term_link ) ) {
                                                continue;
                                            }

                                            // We successfully got a link. Print it out.
                                            echo '<a class="first-ct" href="' . esc_url( $term_link ) . '">' . $term->name . '</a>';
                                        }
                                    }
                             ?>
                             <?php
                                $terms_rst = get_the_terms(  $post->ID , 'gadget_categories' );
                                echo '<div class="rest-categories">';
                                    foreach ( $terms_rst as $index => $term ) {
                                        if ($index > 0) {
                                            // The $term is an object, so we don't need to specify the $taxonomy.
                                            $term_link = get_term_link( $term );

                                            // If there was an error, continue to the next term.
                                            if ( is_wp_error( $term_link ) ) {
                                                continue;
                                            }

                                            // We successfully got a link. Print it out.
                                            echo '<a class="rest" href="' . esc_url( $term_link ) . '">' . $term->name . '</a>';
                                        }
                                    }
                                echo '</div>';
                             ?>
                          </div>
                        </div>
                    </div>
                    <div class="vc_row prd-box-share-wh-row">
                        <div class="prd-separator"></div>
                        <div class="prd-box-share-container">
                          <div class="vc_col-xs-1"></div>
                            <div class="vc_col-xs-4"><?php echo do_shortcode( '[addtoany]' );?></div>
                          <div class="vc_col-xs-1"></div>
                        </div>
                        <div class="prd-box-wishlist-container">
                          <div class="vc_col-xs-1"></div>
                            <div class="vc_col-xs-4">
                                <?php $arg = array ( 'echo' => true ); do_action('gd_mylist_btn',$arg); ?>
                            </div>
                          <div class="vc_col-xs-1"></div>
                        </div>
                    </div>
                    <div class="prd-separator"></div>
                    </div>
                </div>  

                <?php $i++; 
                 // Closing the grid row div   
                if($i != 0 && $i % 3 == 0) { ?>
                    </div><!--/.row-->
                    <div class="clearfix"></div>
                  <?php } ?>
                  <!-- Random Category Snippet Generation -->
                  <?php 
                        if( $i % 12 == 0 ) {
                            $max = 1; //number of categories to display
                            $taxonomy = 'gadget_categories';
                            $terms = get_terms($taxonomy, 'orderby=name&order= ASC&hide_empty=0');

                            // Random order
                            shuffle($terms);

                            // Get first $max items
                            $terms = array_slice($terms, 0, $max);

                            // Sort by name
                            usort($terms, function($a, $b){
                            return strcasecmp($a->name, $b->name);
                            });

                            // Echo random terms sorted alphabetically
                            if ($terms) {
                            foreach($terms as $term) {
                                $termID = $term->term_id;
                                echo '<div class="random-category-snippet" style="background-image: url('.types_render_termmeta("category-image", array( "term_id" => $termID, "output" =>"raw") ).')"><div class="random-snippet-inner"><a href="' .get_term_link( $term, $taxonomy ) . '" title="' .  sprintf( __( "View all gadgets in %s" ), $term->name ) . '" ' . '>' . $term->name.'</a><p>' . $term->description . '</p><br><br><a class="explore-category" href="'. esc_url( get_term_link( $term ) ) .'">Explore This Category</a></div></div> ';
                            }
                            }
                       }
                  ?>

                <?php  
                    endwhile;
                }
                    wp_reset_postdata(); ?>
                    <div class="pagination">
                        <div class="previous"><?php previous_posts_link( 'Older Posts' ); ?></div>
                        <div class="next"><?php next_posts_link( 'Newer Posts', $fp_query->max_num_pages ); ?></div>
                    </div>
                <!-- pagination -->
        </div><!--/.container-->  
    </div>          

You can see a live representation of the issue by visiting this link and clicking on "Newer Posts" at the bottom of the page.

EDIT

You can see that at the moment there is a lazyloader at the bottom of the page. Using this template I almost achieved the desired result here. However, I still get nothing on the frontpage (keep in mind that the frontpage and the page I provided before are using the same exact template.

Answer 1

Please, update your loop part with following code:

<?php

$page = (get_query_var('page') ? get_query_var('page') : 1);
$args=array('post_type' => 'gadget', 'post_status' => 'publish', 'posts_per_page' => 36, 'page' => $page);

$wp_query = new WP_Query($args);
if( $wp_query->have_posts() ) {

    $i = 0;
    while ($wp_query->have_posts()) : $wp_query->the_post();
    $postidlt = $post->ID;

Reason before using page instead of paged. page (int) - number of page for a static front page. Show the posts that would normally show up just on page X of a Static Front Page.

Answer 2

I am not entirely sure if this will work, but I remember struggling with a similar issue before. It's worth a try, and I took this from my own (working) code.

Please note that this is my own vague understanding of the issue.

I think the general idea is that your pagination is working off the main WordPress query for displaying the front page or custom page. This is why it does not work with your custom (additional) query inside the Main query.

To circumvent this, we first store the main $wp_query object inside the $temp_query object. Then we reset the main $wp_query, and replace it with our own custom query.

After looping through our posts, we restore the main $wp_query object from our $temp_query.

global $wp_query

$custom_query_args = array(
    'post_type' => 'gadget',
    'post_status' => 'publish',
    'posts_per_page' => 36
);

// Get the pagination
$custom_query_args['paged'] = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;  

// Create the WP_Query object
$custom_query = new WP_Query( $custom_query_args );

// Store the existing $wp_query object
$temp_query = $wp_query;

// Clear the $wp_query object
$wp_query = NULL;

// Replace with our custom query object
$wp_query = $custom_query;

// Run our query
if ( $custom_query->have_posts() ) {

    while ( $custom_query->have_posts() ) {

        $custom_query->the_post();

    }

    // Display pagination links before resetting the $wp_query object to the original
    ?>
    <div class="pagination">
        <div class="previous"><?php previous_posts_link( 'Older Posts' ); ?></div>
        <div class="next"><?php next_posts_link( 'Newer Posts', $custom_query->max_num_pages ); ?></div>
    </div>
    <?php

}

// Reset postdata
wp_reset_postdata();

// Restore main query object
$wp_query = NULL;
$wp_query = $temp_query;