Styling the WordPress Pagination with Bootstrap CSS classes

In this tutorial you will learn how to style your WordPress starter theme pagination. We will use the Bootstrap CSS classes to style both the post and page pagination by editing the different functions. Update If you decide not to download the Starter Theme that I provided in the first premium tutorial, this is where […]

You need to have an active subscription to view this content.

Register Here!
  • Unsurpassed simplicity and confident instruction. You know exactly what you are doing.

  • Guy

    i dont know why but i dont have this function.
    ive got

    no paging nav..
    tried to copy&paste nothing seems to work.
    maybe they changed something..
    thanks…

    • Yeah, Underscores changed the names a bit. You will still be able apply the styling to the newly named functions. Jump in the support forums if you nee further help.

      • Mark

        Did this ever get resolved? Would like to know the same thing? Can you point me to the related post?

  • Declan

    I’m trying to add sr-only to the h2 tag which is there with the latest WordPress, and no matter what I type it isn’t changing anything on the front end, the class is still screen-reader-text. I have no idea why it won’t let me change the class, I tried changing the text too and it did nothing

    • Declan

      I checked the forums and saw that it is actually referencing to a core wordpress file, great to see I wasn’t the only person experiencing it! Liking the tutorials so far

      • Glad you found the forum post about this. Underscore and WordPress made some changes recently.

  • I’m in the same boat as Declan was. I have taken care not to change the posts_navigation and post_navigation names and only modified the inside code, but I cannot get it to change on the front end and have not found the forum post that explains how I can do so. Any help here?

      • yes, that returns a fatal error Call to undefined function. it says it hasn’t been identified at the close of the posts_navigation closing bracket.

        • Sounds like you didn’t rename the function then.. Lets move this discussion out of the comments and into the support forum.

          • I double checked the function, it was done properly, but for some reason it took a while to clear the cache because now it works. Thanks for the help!

          • Perfect!

      • Dominic High

        Brad, Great tutorial. This is what I was looking for to learn this material.
        As for the pagination problem, definitely renaming the function in index.php and inc/template-tags.php did the trick!

  • mwolda

    Hi Brad,
    I’ve been going through these tutorials and following along seamlessly and then I ran into this one and my template-tags.php file looks completely different. I don’t see any bootstrap code at all. This is what lines 10-40 looks like on mine. Did I miss a step?

    • I answered your support topic in the forum.

      • disqus_E6cRevrlrr

        Hi i am new to the site and was enjoying the tut thus far. However, I have the same situation as mwolda. Where in the forum did you address this? I just downloaded the latest version of wordpress. Hope to hear from you soon. Thanks

    • samsher

      hi, if you are using the new underscore theme than process is different.

      you need to edit wordpress core file link-template.php at location /opt/lampp/htdocs/wordpress/wp-includes.

      there you need have to edit two functions,

      function get_the_posts_navigation and function _navigation_markup.

      dig around it and make changes needed. only html markup of bootstap needs to be updated there.

  • Howard Clements-Gilbert

    You really, really, need to update the tutorial…

    • If you use the starter theme files that I provide at the beginning of the series, then this tutorial works perfectly.

      The Bootstrap 4 WordPress theme tutorials that will be published in the near future will use the latest version of Underscores.me and I will also provide the files I start with incase they change something down the road.

      If you are worried about using the version of Underscores that I started with, check out this article: http://themeshaper.com/2013/10/11/dont-update-your-theme/

      • Tuan Le

        Hi Brad,if I am using latest version of underscorer then what should I do,I am stuck here,please help.thank you.

  • Ahmad Bagwi Rifai

    how to make pagination with number which better next & previous or number?

  • Alejandro Duarte

    Hi, first of all, congratulations for your very helpful course. Anyway, I have a big problem.
    I
    think I’ve tried all sorts of instructions, but pagination seems to be a
    dark science that I can’t understand. I think I followed all the steps,
    but it seems I miss something. I have tried bootstrapwp_post_nav() and
    bootstrapwp_paging_nav() functions, but only works for me php
    the_post_navigation() in single posts. I am using custom post types and
    seems to work fine this instruction, not the one referred to archive
    pages. I have read the forum but there’s no solution for me there Am I missing something?

    Thank you

  • Jakob Bennemann

    if I click on the “older posts” link, i get redirected to /page/2. But this page is empty and my sites /page/3 and so on as well.
    I set the maximum articles per page to 4 articles – just for testing.

    • How many posts do you actually have? Any console errors on the second page? When you set it back to 10 does it work correctly? Please create a topic in the forum if you continue to have issues.

      • Jakob Bennemann

        if I set it back to 10, I still don’t get any content on that page..

        • I need a little more detail to try and troubleshoot this for you. Please create a topic in the forum and also please answer the other question I asked above.