WordPress pagination for custom page template for custom query

Question

I am pulling all the default posts in a custom page template using a custom query and custom loop. Things to mention here is that I have several custom query on the same page. All those queries are querying data from the same post type which is ‘post’.

I’ve searched on the internet and found some of the pagination functions to add to the functions.php file. Those custom pagination functions and all those default pagination functions of WordPress seem not to be working in this custom template. It is working fine with the default post template. But I am really in dilemma now why these things are not working in this custom template. for the word limitation, I wouldn’t be able to add the functions.php file. But if the default pagination works here that’s fine for me.

I am listing the template page’s code and functions.php file’s code here.

blog.php

<?php 

// Template name: Blog
 get_header('page');?>

<!-- Latest Blog Mobile -->

<div class="container space-top-2 position-relative latest-blog-holder mt-xl-3 d-block d-lg-none">
      <!-- Title -->
      <div class="row align-items-md-center mb-4">
        <div class="col-md-6 mb-md-0">
          <h2 class="section- mb-0">Laatste blogberichten</h2>
        </div>
      </div>
      <!-- End Title -->

      <!-- Slick Carousel -->
      <div class="js-slick-carousel slick slick-gutters-3 z-index-2" data-hs-slick-carousel-options='{
    "prevArrow": "<span class="fal fa-angle-left slick-arrow slick-arrow-soft-white slick-arrow-top-1 ml-sm-2 ml-xl-4"></span>",
    "nextArrow": "<span class="fal fa-angle-right slick-arrow slick-arrow-soft-white slick-arrow-top-2 mr-sm-2 mr-xl-4"></span>",
     "slidesToShow": 4,
     
     "responsive": [{
       "breakpoint": 1200,
         "settings": {
           "slidesToShow": 3
         }
       }, {
       "breakpoint": 992,
       "settings": {
         "slidesToShow": 3
         }
       }, {
       "breakpoint": 768,
       "settings": {
         "slidesToShow": 2
         }
       }, {
       "breakpoint": 554,
       "settings": {
         "slidesToShow": 1
       }
     }]
   }'>
        <div class="js-slide mb-2" data-aos="fade-up">
          <!-- Card Block -->
          <a href="#" class="card h-100 transition-3d-hover shadow-hover bg-hover latest-blog-items">
            <div class=" position-relative">
              <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/img/project-img1.png" alt="Image Description">
              <div class="blog-date d-flex align-items-center">
                
                <span class="ml-2">01/08/20</span>
              </div>
            </div>

            <div class="card-body pb-2">
              <h3>Lorem ipsum dolot sit amet lorem ipsum</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
            </div>

            <div class="card-footer border-0 pt-0 bg-transparent">
              <span>Lees verder <i class="fal fa-angle-right fa-lg ml-1"></i></span>
            </div>
          </a>
          <!-- End Card Block -->
        </div>

        <div class="js-slide mb-2" data-aos="fade-up" data-aos-delay="100">
          <!-- Card Block -->
          <a href="#" class="card h-100 transition-3d-hover shadow-hover bg-hover latest-blog-items">
            <div class=" position-relative">
              <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/img/project-img1.png" alt="Image Description">
              <div class="blog-date d-flex align-items-center">
                
                <span class="ml-3">01/08/20</span>
              </div>
            </div>

            <div class="card-body pb-2">
              <h3>Lorem ipsum dolot sit amet lorem ipsum</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
            </div>

            <div class="card-footer border-0 pt-0 bg-transparent">
              <span>Lees verder <i class="fal fa-angle-right fa-lg ml-1"></i></span>
            </div>
          </a>
          <!-- End Card Block -->
        </div>

        <div class="js-slide mb-2" data-aos="fade-up" data-aos-delay="200">
          <!-- Card Block -->
          <a href="#" class="card h-100 transition-3d-hover shadow-hover bg-hover latest-blog-items">
            <div class=" position-relative">
              <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/img/project-img1.png" alt="Image Description">
              <div class="blog-date d-flex align-items-center">
                
                <span class="ml-3">01/08/20</span>
              </div>
            </div>

            <div class="card-body pb-2">
              <h3>Lorem ipsum dolot sit amet lorem ipsum</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
            </div>

            <div class="card-footer border-0 pt-0 bg-transparent">
              <span>Lees verder <i class="fal fa-angle-right fa-lg ml-1"></i></span>
            </div>
          </a>
          <!-- End Card Block -->
        </div>

        <div class="js-slide mb-2" data-aos="fade-up">
          <!-- Card Block -->
          <a href="#" class="card h-100 transition-3d-hover shadow-hover bg-hover latest-blog-items">
            <div class=" position-relative">
              <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/img/project-img1.png" alt="Image Description">
              <div class="blog-date d-flex align-items-center">
               
                <span class="ml-3">01/08/20</span>
              </div>
            </div>

            <div class="card-body pb-2">
              <h3>Lorem ipsum dolot sit amet lorem ipsum</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
            </div>

            <div class="card-footer border-0 pt-0 bg-transparent">
              <span>Lees verder <i class="fal fa-angle-right fa-lg ml-1"></i></span>
            </div>
          </a>
          <!-- End Card Block -->
        </div>

        <div class="js-slide mb-2" data-aos="fade-up">
          <!-- Card Block -->
          <a href="#" class="card h-100 transition-3d-hover shadow-hover bg-hover latest-blog-items">
            <div class=" position-relative">
              <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/img/project-img1.png" alt="Image Description">
              <div class="blog-date d-flex align-items-center">
                
                <span class="ml-3">01/08/20</span>
              </div>
            </div>

            <div class="card-body pb-2">
              <h3>Lorem ipsum dolot sit amet lorem ipsum</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
            </div>

            <div class="card-footer border-0 pt-0 bg-transparent">
              <span>Lees verder <i class="fal fa-angle-right fa-lg ml-1"></i></span>
            </div>
          </a>
          <!-- End Card Block -->
        </div>
      </div>
      <!-- End Slick Carousel -->


    </div>


    <!-- End Latest Blog Mobile -->
    <!-- Latest Blog -->

    <div class="container space-top-2 latest-blog-top mt-xl-4 d-none d-lg-block">
      <div class="row">
        <div class="col-lg-6">

        <?php 
            $labels = [
              'post_type'      => 'post',
              'posts_per_page' => 1,
            ];
            $loop = new WP_Query($labels);
            while ($loop->have_posts()) {
              $loop->the_post();
        ?>
          <a href="<?php the_permalink(); ?>" class="mb-6 transition-3d-hover d-block">
            <div class=" position-relative">
            <?php 
        
                if(has_post_thumbnail( $_post->ID ) ){
                    the_post_thumbnail( 'thumbnailone', array('class' => 'img-fluid') );
                }else {
                ?>
                    <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/img/single-blog-image.png" alt="Image Description">
                <?php
                }
            ?>              
              <div class="blog-date blog-date-2 d-flex align-items-center">
                
                <span class="ml-2"><?php the_date('d/m/y'); ?></span>
              </div>
            </div>

            <div class="p-5 pt-xl-6 pr-11">
              <h4 class="mb-3"><?php the_title() ?></h4>
              <p><?php the_excerpt(); ?></p>
              <span>Lees verder <i class="fal fa-angle-right fa-lg ml-1"></i></span>
            </div>
          </a>
        
        <?php } wp_reset_query();?>

        </div>
        <div class="col-lg-6 pl-xl-11">
            <?php 
                $labels = [
                'post_type'      => 'post',
                'posts_per_page' => 3,
                ];
                $loop = new WP_Query($labels);
                while ($loop->have_posts()) {
                $loop->the_post();
            ?>
          <a href="<?php the_permalink(); ?>"
            class="latest-blog-item d-flex align-items-start align-items-lg-center mb-5 mb-xl-7 transition-3d-hover">
            <?php 
        
                if(has_post_thumbnail( $_post->ID ) ){
                    the_post_thumbnail( 'thumbnail', array('class' => 'img-fluid mr-3 mr-xl-4') );
                }else {
                ?>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/single-blog-image-3.png" alt="blog-thumb" class="img-fluid mr-3 mr-xl-4">
                <?php
                }
            ?>
            
            <div>
              <div class="d-flex align-items-center mb-2 date">
                
                <span><?php echo get_the_date('d/m/y',$post->ID); ?></span>
              </div>
              <h5><?php the_title(); ?></h5>
              <span>Lees vender <i class="fal fa-angle-right fa-lg ml-1"></i></span>
            </div>
          </a>
          <?php } wp_reset_query();?>
        </div>

      </div>
      <hr>
    </div>
    <!-- End Latest BLog -->

    <!-- Latest Blog Thumbs -->
    <div class="container space-2">
      <div class="row align-items-center mb-5 mb-lg-2 space-bottom-lg-2 fitler-option">
        <div class="col-md-2 d-none d-lg-block">
          <span><?php the_field('filter_title', 'option'); ?>:</span>
        </div>
        <div class="col-lg-8 col-xl-7 d-none d-lg-block">
          <ul class="list-inline mb-0" id="blogfilter">
            <li class="list-inline-item"><a href="#" class="btn btn-primary" data-name="*">Alle</a></li>
            <?php $faqcat = get_field('chooser_filter_category', 'option');  
              if($faqcat){
                foreach($faqcat as $faqcategory){?>
                <li class="list-inline-item"><a href="#" class="btn btn-primary" data-name=".<?php echo str_replace(' ', '', trim(strtolower($faqcategory->name))); ?>"><?php echo $faqcategory->name; ?></a></li>
            <?php }}else{echo 'nothing found';} ?>
          </ul>

        </div>
        <!-- Unfold (Dropdown) -->
        <div class="col-6 d-block d-lg-none" id="sortenmobile">
          <select class="btn btn-sm w-100 custom-select-2">
            <option selected data-order="serial">Sorteren op:</option>
            <option value="asc" data-order="serial">ASC</option>
            <option value="desc" data-order="serial">DESC</option>
          </select>
        </div>
        <!-- End Unfold (Dropdown) -->
        <div class="col-lg-2 col-xl-3 col-6" id="sortenpc">
          <select class="btn btn-sm w-100 custom-select-2">
            <option selected data-order="serial">Sorteren op:</option>
            <option value="asc" data-serial="serial">ASC</option>
            <option value="desc" data-serial="serial">DESC</option>
          </select>
        </div>
      </div>
      <?php 
         $paged = ( get_query_var('paged') ) ? get_query_var( 'paged' ) : 1;
         $labels = [
         'posts_per_page' => 8,
         'paged'          => $paged
         ];
         $loop = new WP_Query($labels);
         if($loop){
      ?>
      <div class="row all-blogs">
       <?php
              $i = 0;
              while ($loop->have_posts()) {
              $loop->the_post();
              $categories = get_the_category(); 
              $i++;
         
         ?>
        <div class="col-md-6 col-lg-3 mb-5 blogitem  <?php 
          
          if($categories && count($categories) > 1){
            foreach($categories as $category){
              echo str_replace(' ', '', trim(strtolower($category->name))).' ';
            }
          }else {
            echo str_replace(' ', '', trim(strtolower($categories[0]->cat_name))); 
          }
        
        ?>" data-inline="<?php echo $i; ?>">
          <a href="<?php the_permalink( ); ?>" class="card h-100 transition-3d-hover shadow-hover bg-hover latest-blog-items">
            <div class="position-relative blogImageHolder">
              <!-- <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/img/project-img1.png" alt="Image Description"> -->
              <?php 
        
                if(has_post_thumbnail( $_post->ID ) ){
                    the_post_thumbnail( 'thumbnail', array('class' => 'img-fluid img-fix') );
                }else {
                ?>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/single-blog-image-3.png" alt="blog-thumb" class="img-fluid img-fix">
                <?php
                }
            ?>
              <div class="blog-date d-flex align-items-center">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6666 1.33331V3.99998" stroke="white" stroke-linecap="square" />
                  <path d="M5.33333 1.33331V3.99998" stroke="white" stroke-linecap="square" />
                  <path d="M2 6.00002H14" stroke="white" stroke-linecap="square" />
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M12.6667 2.66669H3.33333C2.59667 2.66669 2 3.26335 2 4.00002V12.6667C2 13.4034 2.59667 14 3.33333 14H12.6667C13.4033 14 14 13.4034 14 12.6667V4.00002C14 3.26335 13.4033 2.66669 12.6667 2.66669Z"
                    stroke="white" stroke-linecap="square" />
                  <path
                    d="M4.67532 8.486C4.58332 8.486 4.50865 8.56067 4.50932 8.65267C4.50932 8.74467 4.58399 8.81934 4.67599 8.81934C4.76799 8.81934 4.84265 8.74467 4.84265 8.65267C4.84265 8.56067 4.76799 8.486 4.67532 8.486"
                    stroke="white" stroke-linecap="square" />
                  <path
                    d="M8.00869 8.486C7.91669 8.486 7.84203 8.56067 7.84269 8.65267C7.84269 8.74467 7.91736 8.81934 8.00936 8.81934C8.10136 8.81934 8.17603 8.74467 8.17603 8.65267C8.17603 8.56067 8.10136 8.486 8.00869 8.486"
                    stroke="white" stroke-linecap="square" />
                  <path
                    d="M11.342 8.486C11.25 8.486 11.1753 8.56067 11.176 8.65267C11.176 8.74467 11.2507 8.81934 11.3427 8.81934C11.4347 8.81934 11.5093 8.74467 11.5093 8.65267C11.5093 8.56067 11.4347 8.486 11.342 8.486"
                    stroke="white" stroke-linecap="square" />
                  <path
                    d="M4.67532 11.1527C4.58332 11.1527 4.50865 11.2274 4.50932 11.3194C4.50932 11.4114 4.58399 11.486 4.67599 11.486C4.76799 11.486 4.84265 11.4114 4.84265 11.3194C4.84265 11.2274 4.76799 11.1527 4.67532 11.1527"
                    stroke="white" stroke-linecap="square" />
                  <path
                    d="M8.00869 11.1527C7.91669 11.1527 7.84203 11.2274 7.84269 11.3194C7.84269 11.4114 7.91736 11.486 8.00936 11.486C8.10136 11.486 8.17603 11.4114 8.17603 11.3194C8.17603 11.2274 8.10136 11.1527 8.00869 11.1527"
                    stroke="white" stroke-linecap="square" />
                </svg>
                <span class="ml-2"><?php echo get_the_date('d/m/y',$post->ID); ?></span>
              </div>
            </div>

            <div class="card-body pb-2">
              <h3><?php the_title(); ?></h3>
              <p><?php the_excerpt(); ?></p>
            </div>

            <div class="card-footer border-0 pt-0 bg-transparent">
              <span>Lees verder <i class="fal fa-angle-right fa-lg ml-1"></i></span>
            </div>
          </a>
        </div>
        
        <?php } ?>
      </div>
      <div class="row mt-5">
        <div class="col-md-12">
          <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                  <span aria-hidden="true"><svg width="8" height="12" viewBox="0 0 8 12" fill="none"
                      xmlns="http://www.w3.org/2000/svg">
                      <path d="M6.35693 0.785645L1.42837 5.71421L6.35693 10.6428" stroke="white" stroke-width="2" />
                    </svg>
                  </span>
                  <span class="sr-only">Previous</span>
                </a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                  <span aria-hidden="true"><svg width="8" height="12" viewBox="0 0 8 12" fill="none"
                      xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.07129 0.785645L5.99986 5.71421L1.07129 10.6428" stroke="white" stroke-width="2" />
                    </svg>
                  </span>
                  <span class="sr-only">Next</span>
                </a>
              </li>
            </ul>
            <div class="postnavigation">
              <?php
                  wpbeginner_numeric_posts_nav();
                  the_posts_pagination();
                  next_posts_link();
                  previous_posts_link('Newer &raquo;');
                  next_posts_link('&laquo; Older');
                  wp_reset_query();
              ?>
            </div>
          </nav>
        </div>
      </div>
      <?php } ?>
    </div>
    <!-- End Latest Blog Thumbs -->





    <!-- End Latest Blog -->


<?php get_footer('page');?>

Thanks in advance for the help.

0
Liban leo 2 months 0 Answers 12 views 0

Leave an answer