Categories Tw. Bootstrap, WordPress

WordPress Pagination in Bootstrap 4 Style – Function

Updated: Comments Link22 Comments

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

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

22 COMMENTS

LEAVE A REPLY
    1. Amit Sonkhiya says:

      Hello @knoxhomesandrealty:disqus

      Remove “hidden-md-down d-none d-lg-block” from line number 21. It will always display the Page X of Z text. Do let me know if you have any further concern.

      Reply
  2. Leon Wakker says:

    On a static front page the active state is always 1 instead of the current page. How to fix this?
    I know that pagination was not intended to be used on (static ) front pages.

    Reply
    1. Amit Sonkhiya says:

      @leonwakker:disqus

      I believe that you’re using a custom query to display paginated posts on the front page. In that case, retrieve the $paged argument and pass it as the query argument. Like this below:

      if ( get_query_var( ‘paged’ ) ) { $paged = get_query_var( ‘paged’ ); }
      elseif ( get_query_var( ‘page’ ) ) { $paged = get_query_var( ‘page’ ); }
      else { $paged = 1; }
      $args=array(‘post_type’ => ‘POST_TYPE’,’ posts_per_page’ => 6, ‘paged’ => $paged);

      $the_query = new WP_Query($args);
      OR
      query_posts($args);

      It is referred in WordPress Codex under section Static Front Page.

      If it’s not the question then provide me a bit of your code and explain the question so that I can help you.

      Reply
      1. Leon Wakker says:

        https://uploads.disquscdn.com/images/4a494cc6c4e18e8cd3038786076d67c71d41d02b3eded3c68ecb3102af9d65ad.jpg

        This is de code I used. Pagination is working but the active state of the current page is always set to page number 1 when going to the next page. (see image for illustration)

        if ( get_query_var( ‘paged’ ) ) { $paged = get_query_var( ‘paged’ ); }
        elseif ( get_query_var( ‘page’ ) ) { $paged = get_query_var( ‘page’ ); }
        else { $paged = 1; }

        $arg = (array(
        ‘post_type’ => $instance[ ‘selected_posttype’],
        ‘cat’ => $instance[ ‘selected_category’ ] ,
        ‘post_status’ => ‘publish’,
        ‘order’ => ‘ASC’,
        ‘posts_per_page’ => $instance[ ‘post_per_page’],
        ‘paged’ => $paged
        ));
        $the_query = new WP_Query( $arg );

        ?>

        have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

        // output

        endwhile;

        if (function_exists(“fellowtuts_wpbs_pagination”))
        {
        //fellowtuts_wpbs_pagination();
        fellowtuts_wpbs_pagination($the_query->max_num_pages);
        };

        else :

        // no posts found message goes here…

        endif;
        }

        wp_reset_query();

        Reply
        1. Amit Sonkhiya says:

          @leonwakker:disqus

          Would you try with replacing the line no #5 in the fellowtuts_wpbs_pagination() function with

          if(empty($paged)) {
          if ( get_query_var( ‘paged’ ) ) { $paged = get_query_var( ‘paged’ ); }
          elseif ( get_query_var( ‘page’ ) ) { $paged = get_query_var( ‘page’ ); }
          else { $paged = 1; }
          }

          And do let me know.

          Reply
  3. Robert Andrews says:

    Something is going weird with this. For a page with 220 paginated posts at 40 posts_per_page, it should capping out at 6 paginated-page links – but it is giving me 22. All of them after 6 have no content. The same problem for other pages, where the problem is amplified according to post count.

    Am I doing something wrong?

    Here is my version of your function https://pastebin.com/j5xLH2JG and here is my template https://pastebin.com/sV2QGwvK (see circa line 128). Thanks.

    Reply
    1. Amit Sonkhiya says:

      @disqus_dNllO3GqNb:disqus

      You’re calling wp_reset_postdata(); at line #154, before calling the pagination function.

      Also, at line #162, you need to write it as:
      fellowtuts_wpbs_pagination($the_query->max_num_pages);

      Reply
        1. Amit Sonkhiya says:

          @disqus_dNllO3GqNb:disqus

          I’m glad you did it.
          PS.: I sent you a message at your Twitter account. Hope it’s fine and would get the reply.

          Reply
  4. Robert Andrews says:

    Shouldn’t this be hidden if nopaging is true? I have commented-out posts_per_page and paged, though not fellowtuts_wpbs_pagination(); Whilst all posts are now showing on my page, hence no need for a paginator, the code is still pumping out a pagination stepper.

    Reply
    1. Amit Sonkhiya says:

      @disqus_dNllO3GqNb:disqus

      I understand your concern. The nopaging parameter is by default set as false so I think you are using the standard loop with changing the parameter to true.

      In this case, I would suggest you to create another function that calls this fellowtuts_wpbs_pagination() function only after checking the nopaging parameter from the WP_Query object. Interfering with the function that displays pagination is neither a good idea nor I wish to complicate the code for users feasibility.

      Reply
      1. Robert Andrews says:

        How about this… ?

        // Pagination
        if ( false === $query->query_vars[‘nopaging’] ) {
        fellowtuts_wpbs_pagination();
        }

        Reply
        1. Amit Sonkhiya says:

          @disqus_dNllO3GqNb:disqus
          It doesn’t need strict type comparison and I would prefer to write in a function in the theme’s functions.php file. It will keep me free from caring the name of WP_Query object like $the_query or $qry or $query.

          function fellowtuts_apply_paging($nopaging, $mnp, $range = 2) {
          if(!$nopaging)
          fellowtuts_wpbs_pagination($mnp, $range);
          }

          And call this function like:
          fellowtuts_apply_paging($the_query->nopaging, $the_query->max_num_pages, 4);

          Reply
          1. Robert Andrews says:

            Seems a little complex for me. Going to stick with the conditional where I call the function. Thanks for this.

          2. Amit Sonkhiya says:

            Not a problem,

            Just use the condition like this:
            if ( ! $query->nopaging ) {
            fellowtuts_wpbs_pagination($query->max_num_pages);
            }

Leave a Reply

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.