A Better wp_link_pages (use for lists)

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">',
) );
Share This