Creating a custom pagination in WordPress is one of the most effective ways to improve navigation on your website. Whether you are building a blog, portfolio, or eCommerce store, pagination helps users easily browse through posts or products without getting lost. Instead of just using the default “Next” and “Previous” buttons, custom pagination gives you full control to display page numbers, navigation links, and improve SEO.
In this article, we will explain how to create custom pagination in WordPress with examples, code snippets, and tips for optimization. By the end, you’ll know how to implement pagination in a WordPress custom template and make your site more user-friendly.
Why Use Custom Pagination in WordPress?
WordPress comes with built-in pagination, but it’s usually limited to just Next and Previous buttons. Custom pagination allows you to:
- Display page numbers for better navigation.
- Improve user experience (UX) by helping visitors jump to specific pages.
- Boost SEO since search engines can crawl multiple paginated posts.
- Customize the design and layout according to your theme.
- Handle custom post types or queries with ease.
👉 For example, if you run a blog with hundreds of articles, showing page numbers instead of just “Older Posts” or “Newer Posts” makes navigation much easier.
Default WordPress Pagination vs Custom Pagination
By default, WordPress themes use the the_posts_navigation() or the_posts_pagination() functions. While these are easy to use, they often don’t give developers enough flexibility.
Custom pagination, on the other hand, allows you to:
- Use
paginate_links()for numbered pagination. - Add pagination to custom loops using
WP_Query. - Control the style and placement of pagination.
Step-by-Step Guide: Creating Custom Pagination in WordPress
Here’s the full code example of creating custom pagination in WordPress.
<?php
if ( get_query_var(‘paged’) ) {
$paged = get_query_var(‘paged’);
} elseif ( get_query_var(‘page’) ) {
// ‘page’ is used instead of ‘paged’ on Static Front Page
$paged = get_query_var(‘page’);
} else {
$paged = 1;
}
$custom_query_args = array(
‘post_type’ => ‘offers’, // Replace with your post type
‘posts_per_page’ => get_option(‘posts_per_page’),
‘paged’ => $paged,
‘post_status’ => ‘publish’,
‘ignore_sticky_posts’ => true,
‘category_name’ => ‘custom-cat’,
‘order’ => ‘DESC’,
‘orderby’ => ‘date’// Options: date | title | name | ID | rand
);
$custom_query = new WP_Query( $custom_query_args );
if ( $custom_query->have_posts() ) :
while( $custom_query->have_posts() ) : $custom_query->the_post();
?>
<div<?phppost_class(); ?>>
<h2><?phpthe_title(); ?></h2>
<p><?phpthe_excerpt(); ?></p>
<?phpif ( has_post_thumbnail() ) : ?>
<imgsrc=”<?phpechoget_the_post_thumbnail_url(get_the_ID()); ?>”alt=”<?phpthe_title(); ?>”>
<?phpendif; ?>
</div>
<?php
endwhile;
echopaginate_links( array(
‘total’ => $custom_query->max_num_pages,
‘current’ => $paged,
‘prev_text’ => __(‘« Prev’),
‘next_text’ => __(‘Next »’)
) );
endif;
?>
Breaking Down the Code
get_query_var('paged')→ Detects the current page number.WP_Query()→ Creates a custom query for posts.paginate_links()→ Generates numbered pagination links.max_num_pages→ Ensures pagination works based on total posts.
👉 This code can be placed inside your custom template page (e.g., page-custom.php) or directly in your theme file.
Styling Custom Pagination with CSS
You can style your pagination with CSS to match your theme:
.pagination {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
.paginationa,
.paginationspan {
margin: 05px;
padding: 8px12px;
border: 1pxsolid#ddd;
text-decoration: none;
color: #333;
}
.pagination .current {
background-color: #0073aa;
color: #fff;
border-color: #0073aa;
}
Best Practices for WordPress Pagination
When implementing custom pagination in WordPress, keep these tips in mind:
- Always use
paginate_links()instead of justnext_posts_link()for better UX. - Place pagination below the loop.
- Use semantic HTML (
<nav>,<ul>,<li>) for accessibility. - Optimize your queries to avoid performance issues.
- Style your pagination to match the theme’s UI/UX.
Internal & External References
- 📌 Check our guide on How to Create Custom WordPress Templates for more customization tips. (Internal link)
- 📌 Learn more about WP_Query on WordPress Codex (External trusted source)
- 📌 Explore our tutorial on Optimizing WordPress Speed for better performance. (Internal link)
Conclusion
Adding custom pagination in WordPress improves navigation, SEO, and overall user experience. By using the WP_Query and paginate_links() functions, you can display numbered pagination that fits perfectly with your theme design. Whether you’re building a blog, news site, or eCommerce store, custom pagination makes browsing content much easier.
