Implementing Post Pagination in WordPress

By creating a custom pagination function using paginate_links, you can divide content across multiple pages while providing intuitive navigation options for visitors.

To add pagination to your WordPress posts, follow these steps:

1. Create a Pagination Function

if (!function_exists('custom_post_pagination')) {
	function custom_post_pagination() {
		global $wp_query;
		$big = 999999999; // An unlikely integer
		$pagination_links = paginate_links(array(
			'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
			'format' => '?paged=%#%',
			'current' => max(1, get_query_var('paged')),
			'total' => $wp_query->max_num_pages,
			'type' => 'array',
			'prev_text' => __('Previous', 'text-domain'),
			'next_text' => __('Next', 'text-domain'),
			'show_all' => false,
			'end_size' => 10,
			'mid_size' => 10,
			'add_args' => false,
			'add_fragment' => '',
			'before_page_number' => '',
			'after_page_number' => ''
		));

	 	if ($pagination_links) {
		    echo '<ul class="custom_post_pagination">';
		    foreach ($pagination_links as $link) {
		    	if (strpos($link, 'current') !== false) {
		        	echo "<li class='active'>$link</li>";
		        } else {
		        	echo "<li>$link</li>";
		        }
		    }
		   	echo '</ul>';
		}
	}
}

Code Explanation for custom_post_pagination Function:

1. Function Check:
   • The code first checks if the function custom_post_pagination does not already exist using if (!function_exists('custom_post_pagination')).
2. Custom Pagination Function:
   • If the function does not exist, a new function custom_post_pagination is defined.
3. Global Variables:
   • It accesses the global variable $wp_query to work with the WordPress query.
   • Sets an unlikely large integer value $big for pagination functionality.
4. Pagination Links Generation:
   • Generates pagination links using paginate_links function with specific parameters:
     • 'base': Defines the structure of the link base.
     • 'format': Sets the format for the pagination link.
     • 'current': Retrieves the current page number.
     • 'total': Retrieves the total number of pages.
     • Other parameters like type, prev_text, next_text, show_all, end_size, mid_size, add_args, add_fragment, before_page_number, and after_page_number customize the pagination behavior.
5. Displaying Pagination Links:
   • Checks if pagination links exist with if ($pagination_links) before proceeding to output the pagination.
   • Opens a <ul> element with a class of custom_post_pagination to structure the pagination links.
   • Loops through each pagination link using foreach to customize the display:
     • If the link contains the word ‘current’, it is wrapped in a <li> element with a class of active.
     • Otherwise, the link is wrapped in a standard <li> element.
   • Closes the <ul> element after looping through all pagination links.

2. Display Pagination in Your Theme

Place the following code where you want the pagination links to appear in your theme template:

<?php custom_post_pagination(); ?>

3. Alternatively, use the pagination function with the new query.

To use the custom_post_pagination function with a WP_Query object in WordPress, follow these steps:

<?php
$custom_query = new WP_Query(array(
    'post_type' => 'post',
    'posts_per_page' => 5,
    'paged' => get_query_var('paged') ? get_query_var('paged') : 1 // Retrieve current page number
));

if ($custom_query->have_posts()) {
    while ($custom_query->have_posts()) {
        $custom_query->the_post();
        // Output your post content here
    }

    custom_post_pagination(); // Display pagination links for the custom query

    wp_reset_postdata(); // Reset post data
}
?>

3. Customize Pagination Styling

You can style the pagination links using CSS to match your website’s design and layout.

By incorporating post pagination using paginate_links in your WordPress site, you can optimize content presentation and user navigation, providing a seamless browsing experience for your audience. Or Instead of pagination, you can utilize Ajax post loading for a smoother browsing experience.