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:

<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>

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:

[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]

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>

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:

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:

with a tw_wp_link_pages array, e.g.:

Share This