WordPress Pagination in Bootstrap 4 Style – Function

WordPress Pagination in Bootstrap 4 Style

I’m submitting a quite handy function to apply WordPress Pagination in Bootstrap 4 Style. This function contains First/Last, Previous/Next, Current and total number of pages. You can use the code for pagination in your Bootstrap 4 powered WordPress theme. It works with Custom Post Types and hides First/Last, Previous/Next texts on small devices (viewport width < 768 px)

The article Bootstrap 3 Pagination In WordPress contains same technique if you wish to apply pagination in WordPress Theme having version 3 of Bootstrap.

WordPress Pagination in Bootstrap 4 Style

The function is given in code block below and later I have described important terms.

I have made a little change here, If you want to let pagination number Page x of z appear as text below list and not with pagination itself, comment out line #21 and un-comment line #43. Also occurrence of five hidden-*  classes here are to comply with alpha version of Bootstrap 4. You’re free to remove those if using beta or upper versions.

Also on extra small devices (viewport width < 576px), I have reduced padding and font-size in pagination. You can place the rule in theme CSS if the list breaks the container size. You should also play with Bootstrap classes used in function to let the pagination fit within content-area of your theme. 

Also Read: A Bigger & Fixed Search Box With Dropdown In Bootstrap Navbar

Function call for Bootstrap WordPress Pagination

Now just call the function in your archive files to add Bootstrap style pagination.

If you’re using custom query (or Custom Post Types), you need to pass parameter during function call. Example provided in line number #5 in code above. The second parameter passed to function is range (Number of page links appear before and after the current page).

Now check pagination in your WordPress website with Bootstrap 4 theme. Here in the blog Fellow Tuts, we have utilizes WordPress Pagination in Bootstrap 4 Style with minor change.

You Might Interested In