• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Blog
  • About
  • Contact
  • Newsletter
  • Membership
  • Login
Home ยป How to add Pagination to the Archive of Custom Post Type in any WordPress Theme

How to add Pagination to the Archive of Custom Post Type in any WordPress Theme

Pagination function

Create a file named pagination.php in yout child theme and include it in your functions.php

<?php 
// numbered pagination
function pagination($pages = '', $range = 4)
{  
     $showitems = ($range * 2)+1;  
  
     global $paged;
     if(empty($paged)) $paged = 1;
  
     if($pages == '')
     {
         global $the_query;
         $pages = $the_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }   
  
     if(1 != $pages)
     {
         echo "<div class=\"archive-pagination pagination\">";
         echo "<ul>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'> 
         <span class='double-chevron-wrapper'>
                <i class='fas fa-chevron-left first'></i>
                <i class='fas fa-chevron-left second'></i>
         </span>
            </a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'> <i class='fas fa-chevron-left prev'></i></a>";
  
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<li><span class=\"current\">".$i."</span></li>":"<li><a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a></li>";
             }
         }
  
         if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\"><i class='fas fa-chevron-right next'></i></a>";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>
            <span class='double-chevron-wrapper'>
                <i class='fas fa-chevron-right first'></i>
                <i class='fas fa-chevron-right second'></i>
            </span>
            </a>";
         echo "</ul>\n";
         echo "</div>\n";
          
         echo "<div class='all_pages'><small>Current page: ".$paged." All pages ".$pages."</small></div>";
     }
}

?>

Create the WordPress Loop

Add the name of your terms

Set the posts_per_page value in the args

<?php
wp_reset_postdata();

$terms_name = 'YOUR_TERMS_NAME';

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
  
$args = array(
    'post_type' => 'YOUR_POST_TYPE',
    'posts_per_page' => 2,
    'paged' => $paged,
    'tax_query' => array(
               array(
                   'taxonomy' => 'YOUR_TAXONOMY',
                   'field'    => 'slug',
                   'terms'    => $terms_name
               ),
           ),
);
  
$the_query = new WP_Query( $args ); ?>

    <!--YOUT CUSTOM CONTENT-->
    
    <h2><?php the_title(); ?></h2>

<?php echo pagination($the_query->max_num_pages); ?>

Add some line of CSS

.archive-pagination.pagination li {
	margin-left: 0 !important;
	margin-right: 10px !important;
}
.current {
	padding: 0.9rem 1.2rem;
	background: #124e84;
    color: white;
}

Filed Under: Free Tagged With: WordPress

About Gabor Flamich

I'm a web developer and designer based in Budapest, Hungary. In recent years, I've documented hundreds of solutions I came across during development. This site is an archive for useful code snippets on WordPress, Genesis Framework and WooCommerce. If You have any questions related to WordPress development, get in touch!

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress and WooCommerce.

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
UpdraftPlus Premium

Tags

ACF Ajax Analytics API Bootstrap Breadcrumb category CPT CSS fetch Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP SASS SEO SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Webpack Wholesale WooCommerce WordPress WPML

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy / Terms of Service
© 2023 WP Flames - All Right Reserved