How to add Dropdown Page Selection Pagination to WordPress without Plugins

Pagination to me is a necessity in that it gives a reader a better idea of just how big or small a site is based on the number of posts.

The default for WordPress is to include simple Newer and Older buttons, though pagination is baked in (and catered for by a variety of plugins). This pagination however usually takes the form of a line of numbers, skipping out a large chunk of the range for space considerations and thus not really delivering an easy way to get to the page which may not appear in the displayed pagination control bar.

My preferred pagination display has also been the simple dropdown select box, and the following code shows you how to achieve this by simply adding the following lines to the bottom of your loop.php file.

Note that the code below assumes you are working with structured permalinks (because seriously, who wouldn’t be?). If not, it should theoretically be simple to adapt by switching out $format and $base variables to use ( ‘&page=%#%’).

Anyway, here is the code:

$total = $wp_query->max_num_pages;
// only bother with the rest if we have more than 1 page!
if ( $total > 1 )  {
	// get the current page
	if ( !$current_page = get_query_var('paged') ){
	  $current_page = 1;
	}	
	// structure of "format" depends on whether we're using pretty permalinks
	$format = 'page/%#%/';
	$linkarray = paginate_links(array(
	  'base' => str_replace( 'page/9999999/', '%_%', esc_url( get_pagenum_link( 9999999 ) ) ),
	  'format' => $format,
	  'current' => 0,
	  'show_all' => True,
	  'total' => $total,
	  'mid_size' => 4,
	  'prev_next' => False,
	  'type' => 'array'
	));

	$urlarray = array();

	foreach($linkarray as $value){
		$pieces = explode(''',$value);
		foreach($pieces as $piece){
			if (substr(strtolower($piece),0,4) == 'http'){
				$urlarray[] = $piece;
			}
		}
	}

	echo '<div style="text-align: center">(Or jump to page ';
	echo '<select id="paginationpageselectcontrol" name="paginationpageselectcontrol">' . "n";
	$pagecounter = 1;
	foreach($urlarray as $url){
		echo '<option value="' .  $url . '"' . (($pagecounter == $current_page)?' selected':'') . '>' . $pagecounter . '</option>' . "n";
		$pagecounter = $pagecounter + 1;
	}
	echo '</select>' . "n";
	echo ' of ' . $total . ')</div>';
}

Now that we’ve printed out a nice dropdown box to use, we add a javascript controller to actually jump to the selected page on selected index change. In this case I’ve opted to use jQuery, but you could of course use whatever method you want.

jQuery(document).ready(function($){
	$('#paginationpageselectcontrol').change(function(){
		window.location = $('#paginationpageselectcontrol').val();
	});
});

See it in action at the bottom of this blog!

Nifty.