The Problem
Recently I wanted to style the links created when using the <!–nextpage–> code in a WordPress blog post.
For any that don’t know, <!–nextpage–> can be placed in a blog post to split the post into multiple pages. You have to add this into the “Text” editor on your post and it will create multiple pages with “&page=2“, “&page=3“, etc.
This is a great to split a long post into more manageable chunks, or to get your visitors to click on multiple pages (lower bounce rate).
The links are added into your theme’s templates using the wp_link_pages function.
But when it come to styling the links created by the wp_link_pages function you run into a number of problems.
The options you can use to modify the output are as follows:
'before' => '' . __( 'Pages:' ), 'after' => '', 'link_before' => '', 'link_after' => '', 'next_or_number' => 'number', 'separator' => ' ', 'nextpagelink' => __( 'Next page' ), 'previouspagelink' => __( 'Previous page' ), 'pagelink' => '%', 'echo' => 1
If you choose ‘next_or_number’ => ‘next’ the output is “prev” and “next” links, the out put of which seems to be fine.
However if you use ‘next_or_number’ => ‘number’ the output is formatted as follows:
[before] <a href="https://www.yourdomain.com/page">[link_before]Page 1[link_after]</a> Page 2 <a href="https://www.yourdomain.com/page?page=3">[link_before]Page 3[link_after]</a> [after]
This limits your abilities to put your link list into an unordered list because you can’t place any code around the active page. The “link_before” and “link_after” only go around the items that include a link. And anyway, if you included an li tag it would be inside the a tag – no good for a list.
The Solution
The solution is a better version of wp_link_pages that gives you more power of the output. I’ve added “item_before“, “item_after” and “item_before_active” to the function to allow proper styling of the lists.
The new output is like this:
[before] [item_before]<a href="https://www.yourdomain.com/page">[link_before]Page 1[link_after]</a>[item_after] [item_before_active]Page 2[item_after] [item_before]<a href="https://www.yourdomain.com/page?page=3">[link_before]Page 3[link_after]</a>[item_after] [after]
Thus we can add:
'before' => '<ul class="page-links-list">', 'after' => '</ul>', 'pagelink' =>'Page %', 'item_before' => '<li class="inactive">', 'item_after' => '</li>', 'item_before_active' => '<li class="active">'
This will give the following output:
<ul class="page-links-list"> <li class="inactive"><a href="https://www.yourdomain.com/page">Page 1</a></li> <li class="active">Page 2</li> <li class="inactive"><a href="https://www.yourdomain.com/page?page=3">Page 3</a></li> </ul>
I hope you’ll agree that this allows a lot better styling of the page list.
To implement this you just need to add the following function to the functions.php file of your child theme:
function tw_wp_link_pages( $args = '' ) {
global $page, $numpages, $multipage, $more;
$defaults = array(
'before' => '<p>' . __( 'Pages:' ),
'after' => '</p>',
'link_before' => '',
'link_after' => '',
'item_before' => '',
'item_after' => '',
'item_before_active' => '',
'next_or_number' => 'number',
'separator' => ' ',
'nextpagelink' => __( 'Next page' ),
'previouspagelink' => __( 'Previous page' ),
'pagelink' => '%',
'echo' => 1
);
$params = wp_parse_args( $args, $defaults );
/**
* Filters the arguments used in retrieving page links for paginated posts.
*
* @since 3.0.0
*
* @param array $params An array of arguments for page links for paginated posts.
*/
$r = apply_filters( 'wp_link_pages_args', $params );
$output = '';
if ( $multipage ) {
if ( 'number' == $r['next_or_number'] ) {
$output .= $r['before'];
for ( $i = 1; $i <= $numpages; $i++ ) {
$link = $r['link_before'] . str_replace( '%', $i, $r['pagelink'] ) . $r['link_after'];
if ( $i != $page || ! $more && 1 == $page ) {
$link = $r['item_before'] . _wp_link_page( $i ) . $link . '</a>' . $r['item_after'];
} else {
$link = $r['item_before_active'] . $link . $r['item_after'];
}
/**
* Filters the HTML output of individual page number links.
*
* @since 3.6.0
*
* @param string $link The page number HTML output.
* @param int $i Page number for paginated posts page links.
*/
$link = apply_filters( 'wp_link_pages_link', $link, $i );
// Use the custom links separator beginning with the second link.
$output .= ( 1 === $i ) ? ' ' : $r['separator'];
$output .= $link;
}
$output .= $r['after'];
} elseif ( $more ) {
$output .= $r['before'];
$prev = $page - 1;
if ( $prev > 0 ) {
$link = _wp_link_page( $prev ) . $r['link_before'] . $r['previouspagelink'] . $r['link_after'] . '</a>';
/** This filter is documented in wp-includes/post-template.php */
$output .= apply_filters( 'wp_link_pages_link', $link, $prev );
}
$next = $page + 1;
if ( $next <= $numpages ) {
if ( $prev ) {
$output .= $r['separator'];
}
$link = _wp_link_page( $next ) . $r['link_before'] . $r['nextpagelink'] . $r['link_after'] . '</a>';
/** This filter is documented in wp-includes/post-template.php */
$output .= apply_filters( 'wp_link_pages_link', $link, $next );
}
$output .= $r['after'];
}
}
/**
* Filters the HTML output of page links for paginated posts.
*
* @since 3.6.0
*
* @param string $output HTML output of paginated posts' page links.
* @param array $args An array of arguments.
*/
$html = apply_filters( 'wp_link_pages', $output, $args );
if ( $r['echo'] ) {
echo $html;
}
return $html;
}Then copy the template file for your single posts (e.g. single-post.php) into your child theme. Then replace your wp_link_pages array:
wp_link_pages( array( 'before' => '<div class="page-links">', 'after' => '</div>', 'pagelink' =>'Page %', 'link_before' => '', 'link_after' => '', ) );
with a tw_wp_link_pages array, e.g.:
tw_wp_link_pages( array( 'before' => '<div class="page-links"><ul class="page-links-list">', 'after' => '</ul></div>', 'link_before' => '', 'link_after' => '', 'pagelink' =>'Page %', 'item_before' => '<li class="inactive">', 'item_after' => '</li>', 'item_before_active' => '<li class="active">', ) );