Simple Pagination for WordPress

by Bandicoot Marketing on June 16, 2011 | Posted in Tutorials | 4 comments

Jun 16 2011

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' => '&raquo;',
		'prev_text' => '&laquo;'
		);
	
	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.