wordpress pagination return blank page on page 2(building a theme from scratch)

Question

to learn wordpress development, I'm building a wordpress theme from scratch . Now i want to add pagination on my category page but the problem is: when i click on older-post-link the url change from " http://localhost/wordpress4/category/bloc1/ " to " http://localhost/wordpress4/category/bloc1/page/2/ " but it take me to a blank page instead of showing the other posts.

this is the code on the category.php

    <?php get_header(); ?>

     <div class="container">
  <?php
  $counter = 1; //start counter

  $grids = 3; //Grids per row

  global $query_string; //Need this to make pagination work


  /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
  query_posts($query_string . '&caller_get_posts=1&posts_per_page=4');


  if(have_posts()) :   while(have_posts()) :  the_post(); 
  ?>
  <?php
  //Show the left hand side column
  if($counter == 1) :
  ?>
  <div class="row">
           <div class="col-md-4">
             <div class="center">
              <div class="postimage">
                 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_custom_logo(); ?></a>
              </div>
                  <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                  <h4><?php the_category(); ?></h4>
           </div>
           </div>
  <?php

  elseif($counter == 2) :
  ?>
  <div class="col-md-4 border2">
     <div class="center">
              <div class="postimage">
                 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_custom_logo(); ?></a>
              </div>
                  <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                  <h4><?php the_category(); ?></h4>
           </div>
           </div>

  <?php
  elseif($counter == $grids) :
  ?>
  <div class="col-md-4">
     <div class="center">
              <div class="postimage">
                 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_custom_logo(); ?></a>
              </div>
                  <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                  <h4><?php the_category(); ?></h4>
           </div>
           </div>
  </div>
  <div class="clear"></div>
  <?php
  $counter = 0;
  endif;
  $counter++;
  endwhile;
  ?>


      <div class="row">
      <div class="col-xs-6 text-left">
         <?php next_posts_link('<< Older post'); ?>
      </div>
      <div class="col-xs-6 text-right">
         <?php previous_posts_link('Newer post >>'); ?>
      </div>


  <?php
  endif;
  ?>

  </div>
  </div>

  <?php get_footer(); ?>

I noticed that if i add the code below to my index.php the pagination work also on the category page. but the second category page(" http://localhost/wordpress4/category/bloc1/page/2/ ") will take the markup of index.php so the posts will not be in a grid format like the first category page.

global $query_string; //Need this to make pagination work


  /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
  query_posts($query_string . '&caller_get_posts=1&posts_per_page=4');

also on the category page the older post-link show up between rows instead of showing at the bottom of the pages.

finally this is the code on my index.php

<?php get_header(); ?>
<div class="container">
   <div class="row">
      <div class="col-xs-12 col-sm-8">  
         <?php 



         if(have_posts()):
                while(have_posts()): the_post(); ?>



                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">

                        <h3><?php the_title(); ?></h3>
                     <small><?php the_category(); ?></small>

                    </a>            

                    <p><?php the_content(); ?></p>
                    <hr/>


            <?php   endwhile;
            endif;

          ?>
      </div>

      <div class="col-xs-12 col-sm-4">
      <?php get_sidebar(); ?>
      </div>

   </div>
</div>



<?php get_footer(); ?>

Thank You.

Answer 1

Use this code, may be it will solve your problem

<?php 
// the query to set the posts per page to 3
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 3, 'paged' => $paged );
query_posts($args); ?>
<!-- the loop -->
<?php if ( have_posts() ) : while (have_posts()) : the_post(); ?>
        <!-- rest of the loop -->
        <!-- the title, the content etc.. -->
<?php endwhile; ?>
<!-- pagination -->

<div class="row">
  <div class="col-xs-12>"
    <div class="col-xs-6 text-left"><?php next_posts_link(); ?></div>
    <div class="col-xs-6 text-right"><?php previous_posts_link(); ?></div>
  </div>
</div>
<?php else : ?>
<!-- No posts found -->
<?php endif; wp_reset_postdata(); ?>

for more details, check this link https://codex.wordpress.org/Pagination

Answer 2

After a lot of searching i was able to find a solution . The problem was that the The "Blog pages show at most" in the wordpress reading settings was interfering with the "posts_per_page=4" that i declared through the query_posts(). The solution :

I deleted the "query_posts()" because it is best to use the WP_Query() or the pre_get_posts filter. for me even with using wp_query i couldnt get the pagination to work so i tried using the pre_get_posts filter and it worked . so in the category.php i deleted the query_posts and used just the normal loop.

this is my new code in the category.php

<?php get_header(); ?>

     <div class="container">
  <?php
  $counter = 1; //start counter

  $grids = 3; //Grids per row



  if(have_posts()) :  
     while(have_posts()) :  the_post(); 


  ?>
  <?php
  //Show the left hand side column
  if($counter == 1) :
  ?>
  <div class="row">
           <div class="col-md-4">
             <div class="center">
              <div class="postimage">
                 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_custom_logo(); ?></a>
              </div>
                  <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                  <h4><?php the_category(' '); ?></h4>
           </div>
           </div>
  <?php

  elseif($counter == 2) :
  ?>
  <div class="col-md-4 border2">
     <div class="center">
              <div class="postimage">
                 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_custom_logo(); ?></a>
              </div>
                  <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                  <h4><?php the_category(' '); ?></h4>
           </div>
           </div>

  <?php
  elseif($counter == $grids) :
  ?>
  <div class="col-md-4">
     <div class="center">
              <div class="postimage">
                 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_custom_logo(); ?></a>
              </div>
                  <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                  <h4><?php the_category(' '); ?></h4>
           </div>
           </div>
  </div>
  <div class="clear"></div>
  <?php
  $counter = 0;
  endif;
  ?>

  <?php
  $counter++;
  endwhile;
   ?>

              <div class="row">

                  <div class="col-xs-12 text-left ">
                     <?php next_posts_link('<< Older post'); ?>
                  </div>
                  <div class="col-xs-12 text-right ">
                     <?php previous_posts_link('Newer post >>'); ?>
                  </div>

              </div>



  <?php
  endif;
  ?>
     </div>

  <?php get_footer(); ?>

Then I added the pre_get_posts action on my function.php this is the code:

add_action( 'pre_get_posts', function ( $q )
{
    if (        !is_admin() // Very important, otherwise back end queries will be affected as well
          && $q->is_main_query() // Very important, we just need to modify the main query
          && $q->is_category() // Only target category pages
    ) {

                  $q->set( 'posts_per_page', 2 );


    }
});

I hope my answer will help someone who have the same problem i had even if my answer is not so well explained. for more info search for something like this: using pagination with the wp_query using pre_get_posts to set pagination for a custom page.

It will be so nice if a developer could explain my solution in more details and give us more information about using pre_get_posts to set pagination for a custom page.