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