How To Create WordPress Pagination Using Bootstrap

Building a WordPress theme using Bootstrap framework? Then you might already face the issue to configure the pagination for the Bootstrap framework. WordPress Bootstrap Pagination is simply a helper function that uses bootstrap’s pagination component to output the HTML.

WordPress provides a function called paginate_links to return the pagination details for a multi-page query. We will use that to build our own pagination markup using Bootstrap 4. This function can also handle custom queries, all you need to do is pass the query variable to it.

Copy this code to your theme’s functions.php file. Call it after the loop, but before resetting the post data and you are done.

function pixelnet_bootstrap_pagination( $wp_query = false, $echo = true, $args = array() ) {
    //Fallback to $wp_query global variable if no query passed
	if ( false === $wp_query ) {
        global $wp_query;
    }
	
	//Set Defaults
	$defaults = array(
		'base'         => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
        'format'       => '?paged=%#%',
        'current'      => max( 1, get_query_var( 'page' ) ),
        'total'        => $wp_query->max_num_pages,
        'type'         => 'array',
        'show_all'     => false,
        'end_size'     => 2,
        'mid_size'     => 1,
        'prev_text'    => __( '« Prev' ),
        'next_text'    => __( 'Next »' ),
        'add_fragment' => '',
	);
	
	//Merge the defaults with passed arguments
	$merged = wp_parse_args( $args, $defaults );
	
	//Get the paginated links
	$lists = paginate_links($merged);

    if ( is_array( $lists ) ) {
		
        $html = '<nav><ul class="pagination justify-content-center">';

        foreach ( $lists as $list ) {
            $html .= '<li class="page-item' . (strpos($list, 'current') !== false ? ' active' : '') . '"> ' . str_replace('page-numbers', 'page-link text-dark', $list) . '</li>';
        }

        $html .= '</ul></nav>';

        if ( $echo ) {
            echo $html;
        } else {
            return $html;
        }
    }
	
    return false;
}

Instruction for using WordPress Bootstrap Pagination

1. $wp_query: The first parameter, $wp_query, is the query to be used. It uses global $wp_query (main query) by default, but if you are using it on a custom query, pass the query variable here.

To use with global $wp_query (For Ex: Archive pages, Blog pages)

if ( have_posts() ) :
	/* Start the Loop */
	while ( have_posts() ) :
	the_post();
	
	//Loop staffs goes here
	
	endwhile;
	
	//Pagination goes here
	pixelnet_bootstrap_pagination();
	
endif;

To use with custom queries

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

//The Custom Query
$posts = new WP_Query(array(
	'post_type' => 'post',
	'post_status' => 'publish',
	'posts_per_page' => 12,
	'paged' => $paged,
));

if ( $posts->have_posts() ) {
	
	/* Start the Loop */
	while ( $posts->have_posts() ) {
	$posts->the_post();
	
	//Loop staffs goes here
	
	}
	
	//Pagination goes here
	pixelnet_bootstrap_pagination( $posts );
	
	//Reset the post data
	wp_reset_postdata();
}

2. $echo: The second parameter lets you either echo the HTML or just return it to store in a variable. Setting it true will echo the HTML and false will return it.
3. $args: If you want to override the arguments passed to the paginate_links function, pass it here. For example, if you want to change the Next and Previous texts, pass an array with the proper key value pair

//Create Args
$args = array(
    'prev_text'    => __( 'Go To Previous Page' ),
    'next_text'    => __( 'Go To Next page' ),
);
//Pass Args
pixelnet_bootstrap_pagination( false, true, $args );

Similarly, if you want pass a query variable to the paginated links, pass it to the function using the add_args key.

//Create Args
$args = array();
if ( isset($_GET['sortby']) ) {
	$args['add_args']['sortby'] = $_GET['sortby'];
}
//Pass Args
pixelnet_bootstrap_pagination( false, true, $args );

That’s it. Don’t forget to shoot a comment if you find this resource helpful.