Bootstrap 4 Pagination for Roots Sage 9
In WordPress, numeric pagination can be a pain in the a**. This was especially true when paginating custom queries using Bootstrap paired with Sage 9 and Laravel Blade - not to mention I also needed an accessible and screen reader friendly solution.
Place boot_pagination.php in your WordPress theme /wp-content/themes/your-theme
or /wp-content/themes/your-theme/resources/
in Sage 9.
Open your WordPress themes functions.php file /wp-content/themes/your-theme/functions.php
or /wp-content/themes/your-theme/resources/functions.php
in Sage 9 and add the following code:
// Register Bootstrap Pagination
require_once('wp_bootstrap_pagination.php');
Every theme is different, you can also just copy and paste the code into your themes functions.php file.
This function was written for Roots Sage 9 and uses the Laravel Blade Template Engine. When within the global/main query loop, you can call the boot_pagination() function with the following line of code: {!! boot_pagination() !!}
If your not using Blade, you can call the boot_pagination() function with regular ol’ php: <?php boot_pagination(); ?>
The first thing we want to do is add the “Paged” Parameter to our Custom Post Type Query. If WP_Query is altering the main loop and the “paged” parameter is not set you’ll need to add it with get_query_var()
. This is so WordPress knows exactly what page it’s on.
@php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('post_type' => 'work','posts_per_page'=>3, 'paged'=>$paged);
$work = new WP_Query($args);
@endphp
The next step is to setup our loop and do all the fun things we have planned.
@if($work)
@while($work->have_posts()) @php($work->the_post())
// fun stuff
@endwhile
@endif
Finally, we will add our boot_pagination()
function by setting the query argument via an array.
@php
$args = array(
'query' => $work,
);
boot_pagination( $args );
@endphp
Of course, remember to restore the global $post variable of the main query loop: @php(wp_reset_postdata())