Theme Development

Create Your Own Pagination Links

When you are developing themes in WordPress you will first see that the query returns 10 posts at a time, this is because there is an in-built pagination that will tell WordPress what chuck of posts to display. If you are on page one then WordPress will display the 10 latest posts, if you are on page 2 then WordPress will show the 11 - 20 latest posts.

There are a few ways you can handle pagination in WordPress you can either display links at the bottom for the next and previous pages, or you can display a number of boxes for the different pages available.

Previous And Next Links

WordPress has a function that will automatically create the previous and next links to the page, it will add the correct number of pagination on to the end of the links. To display the navigation links you need to use the function posts_nav_link( $sep, $prelabel, $nextlabel ).

posts_nav_link( $sep, $prelabel, $nextlabel );

This will add links to the page similar to this

« Previous Page — Next Page »

Pagination Links

If you would prefer links to a number of pages like this


Then you can do this with another WordPress function called paginate_links().

This function takes an array of all the parameters to pass into the paginate_links function, the options you have available to you are.

<?php $args = array(
	'base'         => '%_%',
	'format'       => '?page=%#%',
	'total'        => 1,
	'current'      => 0,
	'show_all'     => False,
	'end_size'     => 1,
	'mid_size'     => 2,
	'prev_next'    => True,
	'prev_text'    => __(' Previous'),
	'next_text'    => __('Next '),
	'type'         => 'plain',
	'add_args'     => False,
	'add_fragment' => '',
	'before_page_number' => '',
	'after_page_number' => ''
); ?>
  • base - Used to reference the URL.
  • format - Used for the pagination structure of the URLs for example: /page/3
  • total - The total number of pages
  • current - The current page number
  • show_all - Default is false, if set to true then will show all the page numbers available.
  • end_size - Number of pages to display at end of the list
  • mid_size - Number of pages either side of the current page
  • prev_next - Boolean to display the previous and next links
  • prev_text - Text to display on the previous link
  • next_text - Text to display on the next link
  • type - Define what is returned from the function, plain, array or list
  • add_args - Add querystring parameters to the links
  • add_fragment - Add text to append to link
  • before_page_number - Text to appear before number
  • after_page_number - Text to appear after number

The below function can be used to add pagination links to your theme, just add the following to your functions.php file and use the function pu_paging_nav() in your theme where you want to display the pagination links.

function pu_paging_nav()
	global $wp_query;

	$big = 999999999;

	$pagination_links = paginate_links( array(
		'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
		'format' => '?paged=%#%',
		'current' => max( 1, get_query_var('paged') ),
		'mid_size' => 8,
		'total' => $wp_query->max_num_pages
	) );

	echo $pagination_links;
Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial