WordPress wp_link_pages() Single Post Styling Generator

The wp_link_pages() Generator allows you to build custom code for your WordPress single post pagination.  To define pagination in single posts or pages, you simply need to add <!–nextpage–> inside your post using the editor’s text formatting (versus visual).   If pagination does not automatically appear on your posts, you would add wp_link_pages() to the bottom of your single.php template file.

The flexibility of the wp_link_pages() hook allow you to add custom classes to your navigation, which you can then target using CSS or jquery for use in styling.

To get some inspiration or just a visual idea of some the creative ways you can style the output of your single post navigation, visit our wp_link_pages() examples page.

Default wp_link_pages() code

	$defaults = array(
   'before'           => '<p>' . __( 'Pages:'),
   'after'            => '</p>',
   'link_before'      => '',
   'link_after'       => '',
   'next_or_number'   => 'number',
   'separator'        => ' ',
   'nextpagelink'     => __( 'Next page'),
   'previouspagelink' => __( 'Previous page' ),
   'pagelink'         => '%',
   'echo'             => 1
 );

       wp_link_pages( $defaults );
The default single post pagination looks like this:

Pages: 1 2 3

next_or_number Argument

If we change the next_or_number argument from "number" to "next", the pagination uses words instead of numbers:
 	$arg = array(
		'next_or_number'   => 'next',
	);

    wp_link_pages( $arg );

Pages:Next page

Changing the the arguments in wp_link_pages() allows you to create custom single page navigation.

wp_link_pages Generator

before
Text to put before all the links. Defaults to <p>Pages:.This is the beginning of the container wrapper for the pagination.
It usually consists of an opening tag.

Some Options

<p>Pages:
<div class="my-nav">
<img src="https://domain.com/myimage.jpg" />
<ul>
after
Text to put after all the links. Defaults to </p>.This is the end of the container wrapper for the pagination.
It usually consists of closing tag.

Some Options

</p>
</div>
</ul>
link_before
Text that goes before the text of the linkThis is the beginning of the link wrapper
It usually consists of an opening tag.

Some Options

<span>
<div class="my-links">
<img src="https://domain.com/myimage.jpg" />
<li>
link_after
Text that goes after the text of the link. Defaults to (blank)This is the end of the link wrapper.
It usually consists of closing tag.

Some Options

</span>
</div>
</li>
next_or_number
whether text or page numbers should be usedWhether you want links displayed as words or numbers. Options are either "next" or "number"
separator
Text used between page numbers (/, -, etc)Only applies to both number and word links.
Whether you want a separator displayed between the page links.

Some Options

-
/
•
nextpagelink
Text for link to next page. Defaults to Next page if next_or_number = nextFor word links, change the value if you want something other than "Next page" displayed.

Some Options

-
/
•
previouspagelink
Text for link to previous page. Defaults to Previous page if next_or_number = next
pagelink
Format string for page numbers. % = page number
echo
whether to echo or return the result. The default is 1

Sample Result

Pages:

1 2 3

Your wp_link_pages() Code

<?php
// wp_link_pages()
// Generated by UseWordPress.com
$settings = (array(
)
);
wp_link_pages( $settings );
?>