How To Add Numeric WordPress Pagination

How To Add Numeric WordPress Pagination

WordPress Pagination Done Right

In this post I’m going to provide you how to add numeric WordPress Pagination to your blog roll page, without relying on any plugins. The numeric pagination code I am going to provide is the code used on this site (if you click blog at the top, and scroll to the bottom you will see what I’m talking about). I am writing this post because I find more often than not, people have a difficult time adding pagination to an existing site. I always come across at least one or two posts a day in the WordPress.org Support Forums asking something like “How do I add pagination to my blog page?”, “How can I add those numbers to the bottom of my blog page so users can navigate between posts?” or “How can I split my blog into multiple pages?”. It seems most people prefer the numeric WordPress pagination as opposed to the default ‘Previous Page’ and ‘Next Page’ pagination with no real feedback of the current page the user is on.

The basic pagination with the two links ‘Next Page’ and ‘Previous Page’ are easy to implement, and the codex pages on them are great, but they don’t look all that great. And think about when a user reaches your page, finds an article on page 8 and leaves. They come back only to realize they have to continuously hit ‘Next Page’ until they reach the proper page containing that post. Imagine how frustrating and annoying that would be. This is poor UX design and should be avoided, as it could potentially deter users from coming back in future.

Initial Setup: The Custom Query

The first, and most important step of the pagination process, is to make sure that you have set up your custom WP_Query properly and the query is returning post data. Here is a basic example of a query being run:

Note: The code above is for example use only. The styles will be all messed up if you copy and paste it directly as is. You can adjust it as needed if you choose too. Also take not of the variable that we are storing our query in, $custom_query, as this will be used to display pagination for that specific query.

At the top of our query take not of the $paged variable being set, and then being used inside of our custom query. This is necessary to dictate to WordPress which page of the pagination we are currently on. Without these two declared, the numeric WordPress pagination will fail every time.

Pagination Styles

These styles go directly into your theme or child themes main .CSS file. These styles are what dictate the way the pagination is rendered on the front end of our site.

I’ve added comments throughout the CSS declarations for easily swapping out the colors to match your theme, or changing the styles to the needs of your site. Go ahead and paste the above code into your themes main .CSS file.

The Pagination Function

The code below is all of the code required for our pagination to function properly. This is what processes the returned query data, and spits out our pretty pagination. Copy and paste this code directly into your Functions.php file, as is. Nothing needs to be changed.

Display The Numeric WordPress Pagination

Now everything is set up. Wherever you want the numeric pagination to appear on your page, place the following block of code directly in your theme or template file: (Keeping in mind the name of our variable that we have stored all the post data returned by our query in, $custom_query. If you’ve named your query variable something different, remember to swap it out for the correct name or nothing will display.)

Your numeric WordPress pagination should now appear and you should be seeing something like this:
How To Add Numeric WordPress Pagination

Fin

Thanks for dropping by to check out our latest tutorial. If you’ve followed the directions outlined above you should now have functioning numeric WordPress pagination on your page. If you’ve found this tutorial at all useful or helpful, I’d love to hear about it in the comments.

About the Author

Evan Herman

Evan is a full time WordPress developer at Yikes Inc. where he makes all sorts of cool things with WordPress. When he's not there you can find him developing awesome plugins, blogging about WordPress or hanging out with his three cats and amazing girlfriend in Philadelphia, PA.