Pagination not working on main page

I’m having the weirdest problem which is actually being really hard to debug. So, my pagination is working alright in my category pages, but when it comes to my main page it just returns as not found (I’m using Ajax for the pagination). If I try to access the page directly by the link mywebsite/page/2 the query actually return the posts right, but the title remains Page Not Found.

Here’s my main query code:

<div id="posts-portfolio">
   <div id="posts-portfolio-in">

    <div class="pagination-container">
    <div id='Pagination'>
        $category = get_category(get_query_var('cat'))->name;
        $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
        $args = array( 'post_type' => 'portfolio', 'posts_per_page' => 6, 'category_name' => 'viagem', 'paged' => $paged);
        $loop = new WP_Query( $args );
        previous_posts_link('<i class="fa fa-angle-left"></i>');
        next_posts_link('<i class="fa fa-angle-right"></i>', $loop->max_num_pages); ?>

    <div class="masonry-grid row row-width">

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

      <div class="grid col-md-4 col-sm-6">

        <div class="portfolio-post">
           <a href="#post-<?php the_ID();?>" data-target="#post-<?php the_ID();?>" data-toggle="modal">
           <?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?>

      <?php $current_id = get_the_ID() ?>

      <div id="post-<?php the_ID();?>" class="modal fade" tabindex="-1" role="dialog">

        <a class="arrow arrow-modal arrow-right" href="#post-<?php echo get_previous_post_id( $current_id );  ?>"  data-target="#post-<?php echo get_previous_post_id( $current_id );  ?>" data-toggle="modal" data-dismiss="modal"><i class="fa fa-angle-right"></i></a>

        <a class="arrow arrow-modal arrow-left" href="#post-<?php echo get_next_post_id( $current_id );?>"  data-target="#post-<?php echo get_next_post_id( $current_id );?>" data-toggle="modal" data-dismiss="modal"><i class="fa fa-angle-left"></i></a>

        <div class="modal-dialog" role="document">

          <div class="modal-content">

            <div class="modal-body">
                <div class="btn-close">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="fechar"> FECHAR</span> <span aria-hidden="true">&times;</span></button>
              <?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?>


          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

    <?php endwhile; ?>

And here’s the Ajax code (totally functional for the categories pages)

      jQuery(document).on('click','#Pagination a', function(e){
        var link = jQuery(this).attr('href');
        jQuery('#posts-portfolio').html('<div class="loading-img text-center"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div>');
        jQuery('#posts-portfolio').load(link+' #posts-portfolio-in');


Any clues on what’s possibly going wrong?

Read more here: Pagination not working on main page

Leave a Reply

Your email address will not be published. Required fields are marked *