Pagination doesn't work on static front page

Question

Static front page pagination working fine on localhost. but when i uploaded the to server online its not working. i am using infinite scroll. the issue is only with static front page, when i don't use static front page then it works. here is my code, help will be really appreciated!

<?php
/*
Template Name: Layout 1 
*/
?>
<?php get_header(); ?>

<div class="main">


  <div class="container">
  <div class="sixteen columns">
  <div class="portfolio-all-main">


<?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' => 'portfolio', 'posts_per_page' => 3, 'paged' => $paged );

$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query( $args );

   while ($wp_query->have_posts()) : $wp_query->the_post();
?>    



   <div class="portfolio-itemv2">
     <div class="pfolio-item-fixer">

                <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">

               <?php the_post_thumbnail(''); ?>
         </a>
        </div>


        <div class="pwhites">
            <h2 class="portfolio-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
        </div>
        </div>


        <?php endwhile; ?>        
                    <div class="pagi">
<div id="page-nav"><?php next_posts_link(__('')) ?></div>

            </div>
<?php
  $wp_query = null;
  $wp_query = $temp;
?>
         <div class="clear"></div>
        </div></div>

          </div>  </div>
<script>
  $(function(){

    var $container = $('.portfolio-all-main');

    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.portfolio-itemv2'

      });
    });

    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.portfolio-itemv2',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: '',
          img: '<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );

  });
</script>        

<?php get_footer(); ?>

Answer 1

Use https://codex.wordpress.org/Pagination#static_front_page

And https://codex.wordpress.org/Creating_a_Static_Front_Page

Other solutions https://stackoverflow.com/questions/20644991/wordpress-static-page-pagination

the query is diferent on static front pages ... one hack after of your while

<?php if ($the_query->max_num_pages > 1) : // custom pagination  ?>
      <?php
        $orig_query = $wp_query; // fix for pagination to work
        $wp_query = $the_query;

            echo '<div class="both"></div>';
            understrap_pagination(); //your pagination

        $wp_query = $orig_query; // fix for pagination to work
      ?>
    <?php endif; ?>