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.
Leave your feedback and help us improve 🐶
We hope you found this article helpful! If you have any questions, feedback, or spot any errors, please let us know in the comments. Your input is valuable and helps us improve. If you liked this article, please consider sharing it with others. And if you really enjoyed it, you can show your support by buying us a cup of coffee ☕️.
Thank you for your feedback and support!
Your thoughts matter, leave a reply 💬