Bootstrap 3 Pagination in WordPress

The function below will assist you to smoothly add pagination in your WordPress theme using Twitter Bootstrap 3 pagination style. This function is easy to read and to customize as well as contains features like:

  • Bootstrap Styling
  • First and Last Button
  • Previous and Next Button
  • Current page & total number of pages
  • First/Last text invisible on small devices
  • Previous/Next text invisible on small devices
  • Works with custom post types by passing parameters to function

Bootstrap 3 Pagination in WordPress

Note: This navigation function requires that you have already included bootstrap theme or CSS in your WordPress blog or website.

Bootstrap 3 Pagination in WordPress

Add the following function to your ‘functions.php‘ file in WordPress theme.

In your archive files wherever you want to show pagination, call the function: 

The line #4 in the code above is an example to apply pagination if you are using custom query and if you wish to let pagination appear to its default position (not at center of the column), delete line number #41 and #73 from function. Now all is done! Check your WordPress website with Bootstrap theme to see Pagination live.

Like this Post? Share
  • Jonny

    hi!
    Works great but I have a problem. It works only with the default Permalink.
    Any hints ?

    • Amit Sonkhiya

      Hi Jonny,
      I’m using this code with custom permalink %category%/%postname% & custom post types and everything is working smooth.
      You can try to check the query variable and compare this code with any working code (may be non-bootstrap) and check what does that return.

  • priceha

    thanks.
    working for me…

  • Andrea Garza

    Completely works, except I want it to output like your example and not like mine. Mine is listing out all 9 pages and doesn’t have the <> or First / Last .. your sample has 4 pages listed then the arrows and first last etc. How do I output that? See attached image

    • Amit Sonkhiya

      Hi Andrea,

      You should inspect page source code in browser if the missing links are available there. Also ensure that the range parameter value in function is 4 as well as click on 2nd/3rd link on navigation menu just to check. If you are still unable to rectify then let us provide a link of url to check.

      Thanks

      • Andrea Garza

        The site is in maintenance mode. The missing elements are not in the source either. I copied your functions and template snippets exactly as you posted in the blog post above.

        I even disabled my UberMenu plugin thinking it was affecting the but, that didn’t change anything.

        I tried to post the code here, but disqus keeps stripping out half of it 🙁

        • Amit Sonkhiya

          Hi Andrea,

          Sorry for my late reply, actually I was not being notified in email.

          I am sorry as I’m clueless and to suggest you something. Would you drop us an email with url and required information at support@fellowtuts.com to let us rectify the issue.

          Thanks

          • Andrea Garza

            no worries, I’ll just do something else. Thanks for all your help! You rock.

    • Thad

      Thanks! Worked great for me.

    • Hello Andrea!

      I think this is because you only have 9 items and they all appear as links in your pagination. If you decrease the value for $range (e.g. to 2), then you will have your navigation buttons. An other possibility is, to cut out the parts from the if-conditions where this case is checked.

      Heiko

  • Luis Gómez

    Excelent tutorial, it works perfect. Thanks a lot AMIT!!!

  • Awesome, this works perfectly, really thanks!

  • Kiryl

    Thank! Perfect!

  • Suba Levi

    Nice. Thank you!

  • slrcsanpablo

    this is great. thank you