Remi's blog

Create a custom WordPress Pagination in less than 10 lines of code

—

by

Remi
in

There’s something i have never really liked in WordPress, it’s the “older posts” / “previous posts” links. Simply because a site using this “pagination” method doesn’t give any information to the visitor about the number of published posts. I prefer having a nice pagination that clearly shows that there are “x” posts, it gives me an idea about the website i’m currently visiting. That’s why i’m going to explain in the above lines how to create a simple but nice pagination in just a few lines of code.

The paginate_links() function is our saver

First of all you have to know something: WordPress core developers have nearly always a solution for us, and this is what i like in WordPress. There’s always a function, a bit of code on the codex, to help us creating great stuff. This is the case with the paginate_links() function. So, in the code above what we are doing is getting the total pages number that we put inside the $total variable. Then, we get the current page, and then the permalink format (don’t forget to set up a SEO friendly permalink structure). Just paste the PHP code where you want the pagination to appear and the CSS code inside your style.css file (in your theme directory), and that’s it ! You can view the result here or here!

The code

, , ,

21 responses to “Create a custom WordPress Pagination in less than 10 lines of code”

  1. Lulupard

    Hi!

    It says “Can’t use function return value in write context in /wp-content/themes/testtheme/includes/template-tags.php on line 27”. That line is “if(empty(get_option(‘permalink_structure’))) {“

    1. Rémi

      Hi, in that case, just replace

      if( empty(get_option(‘permalink_structure’)) ) {
      $format = ‘&page=%#%’;
      } else {
      $format = ‘page/%#%/’;
      }

      by

      $format = ‘&page=%#%’;

      and that should do it!

      1. Lulupard

        That way it does not work with default permalinks.
        I found out that this works with both (on WP 3.4.1)

        if (get_option(‘permalink_structure’)) {
        $format = ‘page/%#%/’;
        }
        else {
        $format = ‘&paged=%#%’;
        }

        1. Rémi

          Thanks! I update the code!

  2. Monica

    I agree, the next page link is boring! Thanks for this post… I’ve been developing a theme from scratch and this will come in SO handy. Can’t wait to go try it out!!! Thanks again =D

    1. Rémi

      Great, good luck with your future devs! Maybe you’ll have to modify the $format variable, as explained in comment above.

  3. Emmanuel

    Hi Remi ;-)

    I code this condition
    if( get_option(‘permalink_structure’) == ‘/%postname%/’ )

    because if permalink structure option is set to custom, I have a 404 error page when I click on page number links. The link generated was &paged=%#% instead of page/%#%/ which it’s expected.

    Manu

    1. Remi

      Yes that’s correct, i should modify the code

  4. Julio Potier@Développement WordPress

    Hello Rémi

    I think there is a mess here :
    if( get_option(‘permalink_structure’) ) {
    $format = ‘&paged=%#%’;
    } else {
    $format = ‘page/%#%/’;
    }

    1st: The “if” statement is reversed, if we’re using the permalink structure, we do not want the &paged
    2nd: the get_option is not the right way to check, you have to use $wp_rewrite->using_permalinks()
    3rd: the “&paged” leads on 404 page because of “&” instead of “?”, in fact you have to check is the $_GET array is empty or not, depending on that, you choose the right one
    4th: The “/page/” is not the right way to write the pagination base, you have to use $wp_rewrite->pagination_base

    So the comment from Emmanuel is not correct, he did not find that the IF was reversed.

    Thanks, see you later :)

    1. Remi

      Hey Julio! Many thanks for your feedback, you’re correct my code need a refreshment! I’ll update it! Maybe with you at WordCamp Europe! ;-)

  5. Julio Potier

    No problem buddy, i was that the code is 1 year old, it’s old for a code! and yes i’ll be there @WPeu :D
    See you!

  6. Ross

    Hey Remi!

    Is there a way to get this to work a custom post archive? I’ve been trying to figure it out all day, but I can’t seem to get it to work!

    Thanks,
    Ross

    1. Remi

      hey, yes that works on archive page too. if it doesn’t work then the issue is probably else where (i guess).

  7. Ross

    Hi Remi – would it be possible for me to email you the code or some WP logins for you to take a look at? I think it is probably something simple to fix, but I’ve just spent so much time on it already that I don’t think I’m going to be able to solve it!

  8. Ross

    Sorry to have bothered you, Remi! Turns out I just needed to change the settings in the settings > reading menu :) Thanks for this code – it’s awesome!

  9. Corey Lewis

    Remi, you made this the easiest code that I needed to apply to a site I am developing!!!!! Great work!

    The only thing I had to change in order for the pagination to work on my Custom Post Type was the following:

    FROM:
    $format = ‘&paged=%#%’;

    TO:
    $format = ‘/page/%#%’;

    Thanks again!

    1. Remi

      Hey, yes, that’s correct, there’s a little bug, i didn’t fix it, but i should make it a bit better. Thanks for the feedback!

  10. robertlim

    Don’t keep saying “Yes there is a bug and I should fix it !” if you are selling the software it is your obligation to fix it otherwise please don’t sell it or be upfront that what you sell does not fully work properly on pagination.

    1. Remi

      Maybe I’m missing something, but your comment is on a post page where i explain how to create a pagination, I’m not selling anything here…

  11. Miller

    Hi Remi,

    Can this code work with custom post type in case I’m limiting number of posts per page ?

  12. adempius

    wow, great solution, i have a question, how realize the pagination with animation? that is, go from the previous or next page with an animation of any type, or fade, or slide

Leave a Reply