Simple Pagination for WordPress

Most sites use some sort of pagination to allow you to navigate through to their older posts. If you install WordPress and use TwentyTen, you will see the “Older Post” link at the bottom of the index page. That’s pretty standard for some WordPress themes. There are a few plugins that made it easy to add pagination but why rely on a whole plugin when WordPress has a built-in function that will allow to add pagination very easily? It’s called paginate_links().
To get it working, you need to first add this to your theme’s functions.php file before the closing PHP tag:

function paginate() {
	global $wp_query, $wp_rewrite;
	$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
	$pagination = array(
		'base' => @add_query_arg('page','%#%'),
		'format' => '',
		'total' => $wp_query->max_num_pages,
		'current' => $current,
		'show_all' => true,
		'type' => 'list',
		'next_text' => '»',
		'prev_text' => '«'
		);
	if( $wp_rewrite->using_permalinks() )
		$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
	if( !empty($wp_query->query_vars['s']) )
		$pagination['add_args'] = array( 's' => get_query_var( 's' ) );
	echo paginate_links( $pagination );
}

Then add this to your theme’s style.css file:

/* Pagination */
ul.page-numbers {
	margin: 20px 0 10px;
	width: 100%;
	padding: 0;
	font-size: 12px;
	line-height: normal;
	clear: both;
	float: left;
	}
    ul.page-numbers li {
    	float: left;
    	}
ul.page-numbers a,
ul.page-numbers span {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background: -webkit-gradient(linear, left top, left bottom, from(#E4E3E3), to(#FFFFFF));
	background: -moz-linear-gradient(top,  #E4E3E3,  #FFFFFF);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E4E3E3', endColorstr='#FFFFFF');
	padding: 3px 4px 2px 4px;
	margin: 2px;
	text-decoration: none;
	border: 1px solid #ccc;
	color: #666;
	}
ul.page-numbers a:hover,
ul.page-numbers span.current {
	border: 1px solid #666;
	color: #444;
	}

You can mess around with the CSS to style it however you choose. The above code will just give you rounded buttons with a background gradient.
Now all you need to do is add the function to the bottom of the pages where you want your pagination to appear. If your theme uses loop.php then all you need to do is add it to the bottom of that one file. If not, you’ll have to add it to index.php, archive.php and any other files that require the pagination.


Read more about paginate_links() in the Codex: http://codex.wordpress.org/Function_Reference/paginate_links

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie