How to Add Pagination in WordPress Custom Post Type

Published by gurjit singh on February 10, 2024
Categories: BLOG WORDPRESS

This article will give you a better understanding of pagination in WordPress custom post types. Explain the techniques that will enable you to efficiently break down your content into pages.

Pagination alters how users interact with your custom post types list, resulting in a more streamlined and accessible version of your WordPress website content.

Table of Contents

How to Implement WP_Query Pagination Custom Post Type

In WordPress, we use a default loop to display posts or pages of type post. If you add a custom post type to your WordPress you have to use the WP_Query class to create a custom query. With a custom query, you need to add some extra code for pagination.

How to Add Pagination in WordPress Custom Post Type

Explanation to add pagination in WordPress custom post type

1. Here is code for WP_Query query to get posts of product type custom post.

Set the number of posts per page. ‘posts_per_page’=>4 ( we have set 4 post per page)

<?php

         $args = array( 'post_type' => 'product', 'posts_per_page' => 4,

         'paged' => get_query_var('paged') ? get_query_var('paged'): 1);

            $the_query = new WP_Query( $args );

        if ( $the_query->have_posts() ) :

        while ( $the_query->have_posts() ) : $the_query->the_post();
     
             the_title(); 
             the_content();
                      
             echo get_post_meta(get_the_ID(), 'gsta_product_price', true); 
             echo get_post_meta($post->ID, 'gsta_product_model', true); 

         endwhile; 
         endif;
        wp_reset_postdata(); 
?>

2. Code for pagination

 
   <?php

echo paginate_links( array(

'base' => str_replace( 999999999, '%#%', get_pagenum_link( 999999999 ) ),

'format' => '?paged=%#%',

'current' => max( 1, get_query_var('paged') ),

'total' => $the_query->max_num_pages

) );

?>

3. Add the following code to the function.php file, To set post per page.

The number of posts per page should be the same as the number of posts you set for WP_Query object initialization.

We have set the post per page for the product archive page.

For that add code $query->is_post_type_archive(‘product’) to get the custom product archive page.

Now set post per page as: (‘posts_per_page’=>4)

add_action( 'pre_get_posts',  'set_posts_per_page'  );

function set_posts_per_page( $query ) {

    if ( ( ! is_admin() ) && ( $query === $GLOBALS['wp_the_query'] ) && ( $query->is_post_type_archive('product') ) ) {

    $query->set( 'posts_per_page', 4 );

  }

  return $query;

}

Complete Code For WP_Query Pagination Custom Post Type

Here is full code for archive-product.php page. we have added css for front end display.

<?php
/**
 * The template pages for custom post type for products.
 * Pagination for custom post type? 
 * 
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

get_header(); ?>


<style>
.post_box_wapper {
    display: flex;
    width: 100%;
}

.entry-content {
    margin: 10px;
    padding: 10px;
    width: 25%;

    border: 1px solid #aaa;
    border-radius: 5px;
}

.entry-content h2 {
    min-height: 75px;
}

.entry-content p {
    min-height: 105px;
}
</style>
<div class="container">
    <div class="post_box_wapper">
        <?php
          $args = array( 'post_type' => 'product', 'posts_per_page' => 4,
          'paged' => get_query_var('paged') ? get_query_var('paged') : 1);
         $the_query = new WP_Query( $args );
        if ( $the_query->have_posts() ) :
        while ( $the_query->have_posts() ) : $the_query->the_post();
    ?>
        <div class="entry-content">
            <h2><?php  the_title(); ?></h2>
            <?php  the_content(); ?>
            <h4>
<b> Price Range: </b><?php echo get_post_meta(get_the_ID(), 'gsta_product_price', true); ?>
           </h4>
           <h4>
 <b>Uses : </b><?php echo get_post_meta($post->ID, 'gsta_product_model', true); ?>
           </h4>
        </div>
        <?php endwhile; ?>
        <?php endif; ?>
        <?php wp_reset_postdata(); ?>
    </div>

    <?php
echo paginate_links( array(
'base' => str_replace( 999999999, '%#%', get_pagenum_link( 999999999 ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $the_query->max_num_pages
) );
?>

</div>

<?php get_footer(); ?>

Why Add Pagination in WordPress Custom Post Type

Pagination provides users with a structured and navigable method of accessing information when a website has a significant amount of content. The ease of moving between pages to find content makes overall navigation more intuitive for users.

Server resources can be affected when loading a large page with lots of posts, especially images and multimedia elements. This load is distributed across multiple pages through pagination, which reduces server demand and improves overall website performance.

Users are encouraged to explore different sections of your website through pagination. By spreading posts across multiple pages, you can create a more inviting and interactive experience for users. This strategy increases the chance that users will explore your site more.

To ensure inclusivity, websites must follow accessibility standards. By providing an organized structure, pagination contributes to the creation of accessible websites. Users with disabilities receive assistance in navigation and comprehend more easily.

Conclusion

Pagination is very useful for website design and content management in WordPress. It not only enhances the speed and user-friendliness of the experience. It helps in SEO activities, scalability, and the overall structuring of content on your website. Paginating is a best practice to optimize WordPress website content, whether you’re running a blog or an e-commerce site.

In this article, we have explained how to add pagination in WordPress custom post type. We hope this will help you to add custom WP_Query Pagination in WordPress.