For navigating older posts, by default WordPress uses next and previous links which are ok but only allow you to go back one page at a time. If you would like to know how to add numbered pagination to WordPress like we use here on WPLift you can do so using the paginate_links function.

How to Add Numbered Pagination to WordPress

This is really easy to do and will improve the look of your theme while making it more user friendly, so lets see how to use it.

Add this code to your theme’s functions.php file :

// Numbered Pagination
function wplift_pagination() {
	global $wp_query;
		$big = 999999999; // need an unlikely integer
			echo paginate_links( array(
			'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
			'format' => '?paged=%#%',
			'current' => max( 1, get_query_var('paged') ),
			'total' => $wp_query->max_num_pages
		) );
}

Then where you want the pagination to appear, for example on archives.php, index.php etc you place this code :

<?php wplift_pagination(); ?>

Now you need to style the resulting code, here is what I use in my Blogly theme, you need to add this to style.css in your theme folder:

/* Pagination */
.page_nav .page-numbers{
        background:#BCBCBC;
	color:#fff;
	display:block;
	width:auto;
	float:left;
	margin: 4px 4px 4px 0;
	padding:15px 18px 14px 18px;
	text-decoration:none;
}

.page_nav .page-numbers:hover{
	background: #24221D;
	color:#fff;
	text-decoration: none;
}

.page_nav .current{
        background: #24221D;
	color:#fff;
        padding:15px 18px 14px 18px;
}

Author:

Oliver Dale is the founder of Kooc Media, An Internet Company based in Manchester, UK. I founded WPLift and ThemeFurnace, find out more on my Personal Blog. Thanks!

Siteground Hosting
Does WPLift load fast for you? That’s because we use Siteground for hosting, WPLift readers can click here to get up to 60% off hosting for your site.

Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Leave Yours +

4 Comments

  1. Nikita

    Thank you. This is great tip. Now i can remove the pagenavi and add this.

    Is there a way to show “Page 1 of x” before the numbered list?

  2. This is so much better than the default previous and next links and as Nikita mentioned you don’t need to use a plugin like pagenavi to have a usable paging system.

  3. Nice post thanks this one has been bookmarked. It’s always better to code something like this I try and use use the least amount of plugins as possible.

  4. Thanks!
    I always try to gather this kind of snippets, it makes it much easier to make some theme customisations.
    Yoast breadcrumbs and now WP-lift numbered pagination snippets, it’s good seo and not so difficult to implement.

  • Comments are Closed

Our Sponsors

SEND ME FREE STUFF!

Join our Newsletter to Receive 6 Free WordPress Themes

We will also send you our weekly Newsletter packed with the Latest WordPress Content.

We will look after your email & Never Spam!

You have Successfully Subscribed!