A Better wp_link_pages() for WordPress

If you’ve written a long post, WordPress provides the <!--nextpage--> quicktag so you can divide it into multiple pages. All you need to do is make sure that the theme you are using has included the wp_link_pages() function somewhere in the single post/page template. The function works perfectly, except when it comes to wanting to style it using CSS. The default HTML output of the function looks like this:

   Pages: 1 2 3

You can modify what appears before and after the page numbers, so you can easily include a class there, but the issue is with the current page number. The “1” in the example above isn’t wrapped in an HTML tag so there is no way to style it. Here’s a customized version of the function that you can add to your functions.php to change all that:

/**
 * The formatted output of a list of pages.
 *
 * Displays page links for paginated posts (i.e. includes the "nextpage".
 * Quicktag one or more times). This tag must be within The Loop.
 *
 * The defaults for overwriting are:
 * 'next_or_number' - Default is 'number' (string). Indicates whether page
 *      numbers should be used. Valid values are number and next.
 * 'nextpagelink' - Default is 'Next Page' (string). Text for link to next page.
 *      of the bookmark.
 * 'previouspagelink' - Default is 'Previous Page' (string). Text for link to
 *      previous page, if available.
 * 'pagelink' - Default is '%' (String).Format string for page numbers. The % in
 *      the parameter string will be replaced with the page number, so Page %
 *      generates "Page 1", "Page 2", etc. Defaults to %, just the page number.
 * 'before' - Default is '
 Pages:' (string). The html
 *      or text to prepend to each bookmarks.
 * 'after' - Default is '
' (string). The html or text to append to each
 *      bookmarks.
 * 'text_before' - Default is '' (string). The text to prepend to each Pages link
 *      inside the  tag. Also prepended to the current item, which is not linked.
 * 'text_after' - Default is '' (string). The text to append to each Pages link
 *      inside the  tag. Also appended to the current item, which is not linked.
 *
 * @param string|array $args Optional. Overwrite the defaults.
 * @return string Formatted output in HTML.
 */
function custom_wp_link_pages( $args = '' ) {
	$defaults = array(
		'before' => '
' . __( 'Pages:' ),
		'after' => '
',
		'text_before' => '',
		'text_after' => '',
		'next_or_number' => 'number',
		'nextpagelink' => __( 'Next page' ),
		'previouspagelink' => __( 'Previous page' ),
		'pagelink' => '%',
		'echo' => 1
	);
	$r = wp_parse_args( $args, $defaults );
	$r = apply_filters( 'wp_link_pages_args', $r );
	extract( $r, EXTR_SKIP );
	global $page, $numpages, $multipage, $more, $pagenow;
	$output = '';
	if ( $multipage ) {
		if ( 'number' == $next_or_number ) {
			$output .= $before;
			for ( $i = 1; $i < ( $numpages + 1 ); $i = $i + 1 ) {
				$j = str_replace( '%', $i, $pagelink );
				$output .= ' ';
				if ( $i != $page || ( ( ! $more ) && ( $page == 1 ) ) )
					$output .= _wp_link_page( $i );
				else
					$output .= '';
				$output .= $text_before . $j . $text_after;
				if ( $i != $page || ( ( ! $more ) && ( $page == 1 ) ) )
					$output .= '';
				else
					$output .= '';
			}
			$output .= $after;
		} else {
			if ( $more ) {
				$output .= $before;
				$i = $page - 1;
				if ( $i && $more ) {
					$output .= _wp_link_page( $i );
					$output .= $text_before . $previouspagelink . $text_after . '';
				}
				$i = $page + 1;
				if ( $i <= $numpages && $more ) {
					$output .= _wp_link_page( $i );
					$output .= $text_before . $nextpagelink . $text_after . '';
				}
				$output .= $after;
			}
		}
	}
	if ( $echo )
		echo $output;
	return $output;
}

Now when you call custom_wp_link_pages() your default HTML output will look like this:

   Pages: 1 2 3

Here are the CSS selectors you can use:

#post-pagination { }
#post-pagination a { }
#post-pagination .current-post-page { }

I also changed the link_before and link_after to text_before and text_after since that option should be used mainly for including text strings.