How to Implement Custom Pagination for a Custom Post Type in WordPress

In this tutorial, we will guide you through the process of implementing custom pagination for a custom post type in WordPress without relying on plugins. Pagination is a crucial feature for websites that have a large number of custom post type entries. By following this tutorial, you will learn how to create a books.php template file that displays a paginated overview of your custom post type entries.

Always remember to work with a child theme when modifying template files in WordPress to ensure your changes are preserved during theme updates.

Create the books.php Template File

To implement custom pagination for your custom post type, we need to create a books.php template file. Open your child theme directory and create a new file named books.php.

Set Up the Custom Query

Inside the books.php file, we need to set up a custom query to retrieve the custom post type entries. Add the following code snippet:

<?php
$args = array(
    'post_type' => 'books', // Replace 'books' with your custom post type slug
    'posts_per_page' => 9, // Set the number of posts to display per page
    'paged' => get_query_var('paged') ? get_query_var('paged') : 1,
);

$custom_query = new WP_Query($args);
?>
Code language: PHP (php)

Determine the Total Number of Pages and Current Page

After setting up the custom query, we can determine the total number of pages and the current page. Add the following code snippet after the custom query:

<?php
$total_pages = $custom_query->max_num_pages;
$current_page = max(1, get_query_var('paged'));
?>
Code language: PHP (php)

Display the Custom Post Type Entries

Now, let’s display the custom post type entries within the books.php file. Insert the following code snippet:

<?php
if ( $custom_query->have_posts() ) {
	while ( $custom_query->have_posts() ) {
		$custom_query->the_post();
		?>
		<article>
			<h2><?php the_title(); ?></h2>
			<!-- Display other post fields or content here -->
		</article>
		<?php
	}
} else {
	?>
	<p>No books found.</p>
<?php } ?>
Code language: PHP (php)

Display Pagination Links

To add custom pagination links, insert the following code snippet after the loop section:

<?php
echo '<div class="pagination">';
echo paginate_links(array(
    'base' => get_pagenum_link(1) . '%_%',
    'format' => '/page/%#%', // Change to match your URL structure if needed
    'current' => $current_page,
    'total' => $total_pages,
));
echo '</div>';
?>
Code language: PHP (php)

Highlight the Current Page

To highlight the current page in the pagination links, you can add a CSS class to your theme’s stylesheet. Add the following code:

.pagination .current {
    font-weight: bold;
}
Code language: CSS (css)

Test and Refine

Save the changes made to the books.php file and upload it to your child theme directory. Now, visit the page that corresponds to the books.php template. You should see a paginated overview of your custom post type entries with the custom pagination links.

Full code example

<?php
/**
 * Template Name: Books Template
 * Description: Custom template for displaying paginated books.
 */

get_header();

$args = array(
	'post_type'      => 'books', // Replace 'books' with your custom post type slug.
	'posts_per_page' => 9, // Set the number of posts to display per page.
	'paged'          => get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1,
);

$custom_query = new WP_Query( $args );

$total_pages  = $custom_query->max_num_pages;
$current_page = max( 1, get_query_var( 'paged' ) );
?>

<main id="primary" class="site-main">

	<?php
	if ( $custom_query->have_posts() ) {
		while ( $custom_query->have_posts() ) {
			$custom_query->the_post();
			?>
			<article>
				<h2><?php the_title(); ?></h2>
				<!-- Display other post fields or content here -->
			</article>
			<?php
		}
	} else {
		?>
		<p>No books found.</p>
	<?php } ?>

	<div class="pagination">
		<?php
		echo paginate_links(
			array(
				'base'    => get_pagenum_link( 1 ) . '%_%',
				'format'  => '/page/%#%', // Change to match your URL structure if needed.
				'current' => $current_page,
				'total'   => $total_pages,
			)
		);
		?>
	</div>

</main>

<?php get_footer(); ?>

Code language: PHP (php)

That’s it! You have successfully implemented custom pagination for your custom post type using the books.php template file. By following this tutorial, you’ve learned how to create a custom template that displays a paginated overview of your custom post type entries without relying on plugins. Custom pagination enhances user experience by allowing easy navigation through your custom post type entries.

Feel free to further customize the books.php template file according to your specific design preferences and additional content requirements.