WP-Pagenavi can be said to be the most popular paging plug-in in WordPress. WP-Pagenavi plug-in has its own basic CSS style, which we can modify by customizing CSS. If your theme is customized based on Bootstrap, can we directly use Bootstrap’s digital paging style? Comparing the HTML structure of WP-Pagenavi with that of Bootstrap digital paging component, we find that their structures are different. To use the paging style of Bootstrap, we only need to modify the paging structure of WP-Pagenavi to be the same as that of Bootstrap digital paging component.
bootstrap-wordpress-pagination
WP-Pagenavi provides us with the wp_pagenavi filter function for us to modify the HTML content of WP-Pagenavi paging. With this filter function, everything becomes much easier.
//Mount the custom function on the wp_pagenavi filter function.
add_filter( ‘wp_pagenavi’, ‘ik_pagination’, 10, 2 );
//Replace the custom html structure with a string before output.
function ik_pagination($html) {
$out = ”;
//wrap a’s and span’s in li’s
$out = str_replace(“
$out = str_replace(“