We create beautiful & user-friendly websites and provide quality web development services worldwide.
Contact us to get started on your project.

Tutorial

How to Add WordPress Pagination without a Plugin [Enhanced]

Published by Veron Ang | 88 shares | 209


How to Add WordPress Pagination Without a Plugin

The default WordPress pagination only comes with the “Older posts” and “Newer posts” links at the bottom of the page when you want to navigate to the older entries. This works fine for sites with few entries, but isn’t very user-friendly for blogs and sites with dozens or even hundreds of pages worth of entries. To enable your visitors to quickly navigate your site and browse through your content from page to page, a list of numbered pages would be more useful, like Google’s search results.

Thankfully, there are many available WordPress pagination plugins that do just that. Among these, Lester Chan’s WP-PageNavi is possibly the most popular one.

But if you prefer to keep plugin overhead to a minimum, here’s a function you can use to add WordPress pagination without a plugin.

The code is provided by Kriesi and you can get his code and instructions. The pagination looks like this:





Enhanced Pagination by Sparklette Studio

We would like to provide an enhanced version of the pagination by introducing more useful information such as Page X of Y and make the arrows more intuitive, like this:




You can see a working example over at Sparklette.


Grab the code!

Here’s our sauce for the enhanced pagination, modified from Kriesi’s code.

  1. Add the following function to your functions.php file:

    function pagination($pages = '', $range = 4)
    {  
         $showitems = ($range * 2)+1;  
    
         global $paged;
         if(empty($paged)) $paged = 1;
    
         if($pages == '')
         {
             global $wp_query;
             $pages = $wp_query->max_num_pages;
             if(!$pages)
             {
                 $pages = 1;
             }
         }   
    
         if(1 != $pages)
         {
             echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
             if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
             if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";
    
             for ($i=1; $i <= $pages; $i++)
             {
                 if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
                 {
                     echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
                 }
             }
    
             if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";  
             if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
             echo "</div>\n";
         }
    }
  2. To style it, add the following to your stylesheet (typically style.css).
    .pagination {
    clear:both;
    padding:20px 0;
    position:relative;
    font-size:11px;
    line-height:13px;
    }
    
    .pagination span, .pagination a {
    display:block;
    float:left;
    margin: 2px 2px 2px 0;
    padding:6px 9px 5px 9px;
    text-decoration:none;
    width:auto;
    color:#fff;
    background: #555;
    }
    
    .pagination a:hover{
    color:#fff;
    background: #3279BB;
    }
    
    .pagination .current{
    padding:6px 9px 5px 9px;
    background: #3279BB;
    color:#fff;
    }
  3. Finally, call the function in your theme (typically near the bottom of index.php or loop.php where it says "Older posts" or "Older entries"):
    <?php if (function_exists("pagination")) {
        pagination($additional_loop->max_num_pages);
    } ?>

Let me know if you find it useful!

Update: Also check out my new tutorial for adding and styling comment pagination.

Tags:

About the Author

Veron Ang is a , developer and WordPress expert at Sparklette Studio. She graduated with a bachelor's degree in computer science from the National University of Singapore. Engage her to work on your next project by sending her a message from the contact page or on Twitter.




Hostgator web hosting discount codes:
- Get $9.94 off hosting: grab994discount
- Get 25% off hosting: grab25coupon

209 comments

  • Awesome modification!

    I was wondering if this could be used with comments? And if so how could it be modified? I really love this solution and would rather not use a plugin in to achieve pagination with comments.

    Any help would be much appreciated

    • If you are using WordPress 2.7 or later, there is this function: paginate_comments_links.

    • Nice pagination …….

  • Thanks for the response! Could using that be modified to get the same look as post pagination function?

    • Yes, definitely. You can refer to the WordPress Codex for the styling of this tag. When I have time I’ll do up a tutorial for that as well.

  • Thanks that would be awesome :)

    I’m still learning my way with wordpress and always like improving the wordpress sites I create.

  • Another question if you don’t mind. I added twitterlink-comments plugin to the website i’m working on currently I have the twitter id written like {@twitterid} next to the comment author’s name but would like to have the twitter bird like how you have it . Is there a way to alter that with functions? I’m not sure what to alter I’ve tried in the plugin page and it came up with errors or not looked right like have the icon next to the twitterid

  • Excellent info!
    I would like to show a very large tabular data information and I want to paginate it using these technique. I will have to break the data into chunks before show it.
    ¿Could I use these ideas for a very long post?

    • That should not be a problem. You just have to make sure that the CSS classes match.

  • [...] ubiquitous numbered list, a la Google’s results page.More Useful WordPress Pagination SolutionsHow to add WordPress pagination without a plugin It is easier to navigate and the user instantly knows how many posts and pages are available. Its [...]

  • Hello everyone! I’m getting crazy with pagination…
    Everything is working except for the last link which wolud be supposed to display oldest post of the category but instead it does not and gives back a page containing “no article sorry” instead of last posts.
    There are 26 posts, 20 are perfectly paginated 10+10 and last 6 give the error. It seems that a page with 6 posts instead of 10 is annoying …. any idea? Please help! I used the code written in this page, thanks everyone!

  • Hi Veron,

    I am using your pagination code, but

    It’s not working on Firefox 3.6.12 I have installed Web developer toolbar, Fire bug

    & I am on Mac OSX 10.6.5

  • Sorry!!! It’s Working… :)

  • So simple and useful, worked perfectly, thanks a lot!!

  • How would I utilize this awesome function when using custom post types and taxonomies? I have a custom post type of “product_listing” and custom taxonomy of “product_cat” and am using rewrites to have my urls display like mysite.com/products/product-category/product-name/ which works fine. However, when trying to display a secondary page of content using my taxonomy.php file, I get re-routed to the index.php file and get a 404 error. The url still looks like mysite.com/products/product-category/page/2/

    Thanks!

    • You need to add loop remove $additional_loop and and your query $loop like this

      max_num_pages, $range = 2);} ?>

      • Same problem for me. How you do that??

      • I’m sorry can you explain that little more? in the functions.php the category.php?

  • As Ramsey I am also trying to use this for custom post types, however the pagination doesn’t seem to work at all with custom post types. I am using custom loops as well,

    Great work :)

  • Wow… I’ve been searching for a way to add pagination to my client work category pages and this actually worked. I can’t believe it. Veron, thanks for the great coding and styling (I’m a sucker for grays and blues).

    You’re a gem :)

  • hi,
    the pagination work really good, i had some problem to let it work in a page template, but i fix it now (http://wordpress.org/support/topic/pagination-dont-go-to-next-page?replies=5)

    I have one question : the code show only page x/x, but it dont show “next – previous – next – last” links?
    is that normal?
    thanks

    • I do not get the next, first, previous and last links either…

    • Have the same problem like Kamal and Trev with the prev and next buttons not showing up! Did somebody find a solution to this? Thanks for any suggestions…

    • same issue… would really like to have the NEXT/PREVIOUS links appear like in the example…..

    • same problem but just figured it out….. (in my case at least) its because the range was too high for the number of pages my blog had at the time. it seems they only appear if/when there are more pages than are set to show by default.

      function pagination($pages = '', $range = 4)
      change the 4 to a smaller number so that the number of pages you have is greater than the number of pages set to display by default, and the other links should appear!

      • yes you say right. add the $range then its appear.

        you can also add $range on Archive page like this

        max_num_pages, $range = 2);} ?>

  • FINALLY!!!!!!!!!!!!

    I have been searching for this for weeks….. and everyone always just said to use a plugin.
    I knew it had be a simple fix and thankfully you did too!

    THANKS SO MUCH! :D

  • I just discovered something – the pagination numbers at the bottom of my category pages only appear on the first page in IE and Chrome. There are none on the other pages. They all work in Firefox though. Any ideas?

    • Which version of IE are you using? I can see the pagination on all 3 pages of your “Client Work” category on IE8.

      • Ok, that was not there yesterday, lol. I have IE 8, too. I notice they are also there in Chrome now. Maybe it was a cache issue. I find that sometimes I have to delete everything and then run CCleaner and start the browser again to see the real changes. Pain in the rear.

        I’ve also found that with Twenty Ten it sometimes takes a while before changes will be reflected in the browser. I don’t know why. I’d love to find a better theme, but I don’t know enough about coding to get my site the way I want it, and themes can be complicated to tweak.

        Anyway, thanks for the reply, and for the great pagination code :)

        • Yup, it’s probably your WP Super Cache plugin. Each time I make changes to my theme, I have to remember to empty the plugin’s cache when I’m testing on a different browser (unless I’m already logged in as administrator).

          All credit goes to Kriesi for the pagination code. I merely tweaked it to look the way I want :)

          • How do you empty the cache on WP Super Cache? I don’t see any “empty” buttons.

  • @Doug Look for the “Delete Cache” option in your WP Super Cache Settings.

  • I don’t see anything that says “Delete Cache”.

    • Are you logged in as Administrator? You can access the “Delete Cache” two ways – the dropdown menu labeled as “New Post” in the WordPress header bar, or from the “Tester & Contents” tab in your WP Super Cache settings. Good luck!

  • Hello, world!

  • Hi, first of all thank you for the shared code :)

    I want to ask you if there is a way to remove /page/ from ../page/2 ( /page/3 , /page/4 ) ?

    Thanks,
    Ciprian

    • It’s probably not a great solution, but have you tried using .htaccess?



Leave a comment