WordPress wp_link_pages Pagination Examples

Basic Block Style Number Format

This displays the page numbers as basic blocks.

1 2 3 4 5

Show/Hide This Code

wp_link_pages code

$a = array(
	'before'           => '<div id="block-nav">',
	'after'            => '</div>',
	'next_or_number'   => 'number',
	'pagelink'         => '%',
);

wp_link_pages($a);

CSS

<style>
#block-nav a.post-page-numbers, #block-nav .post-page-numbers {
    font-size: 1.5em;
    border: 1px solid;
    padding: 5px 10px;
    background: #eeeeee;
    color: red;
    transition: 0.3s;
}
#block-nav span.post-page-numbers.current {
    color: #ffffff;
    background: red;
    border: 1px solid #999999;
}
#block-nav a.post-page-numbers:hover {
    background-color: red;
    color: #ffffff;
}
</style>

Block Style Page Link Using Both Numbers And Words

This displays the page numbers as basic blocks and uses jQuery to add first and last text links.
The jquery clones the first and last links and shows or hides the First or Last text links if they are not relevant (if we've already reached the first or last page of the post).

1 2 3 4 5

Show/Hide This Code

wp_link_pages code

$b = array(
	'before'           => '<div id="mix-nav">',
	'after'            => '</div>',
	'next_or_number'   => 'number',
	'pagelink'         => '%',
);

wp_link_pages($b);

CSS

<style>
#mix-nav a.post-page-numbers, #mix-nav .post-page-numbers,
#mix-nav .text-next, #mix-nav .text-prev {
    font-size: 1.5em;
    border: 1px solid;
    padding: 5px 10px;
    background: #eeeeee;
    color: red;
    transition: 0.3s;
}
#mix-nav span.post-page-numbers.current,
#mix-nav .text-next, #mix-nav .text-prev {
    color: #ffffff;
    background: red;
    border: 1px solid #999999;
}
#mix-nav a.text-prev {
    margin-right: 5px;
}
#mix-nav a.text-next {
    margin-left: 5px;
}
#mix-nav a.post-page-numbers:hover {
    background-color: red;
    color: #ffffff;
}
</style>

jQuery

<script>
jQuery(document).ready(function () {
	//  Add class to first and last element
	jQuery('#mix-nav > :first').addClass('prev');
	jQuery('#mix-nav > :last').addClass('next');

	//  Create variable url for first and last element
	var prev = jQuery("#mix-nav :first").attr("href");
	var next = jQuery("#mix-nav :last").attr("href");

	//  Only show text link if next or prev contain links
	if (prev) {
		jQuery('.prev').before('<a class="text-prev" href="' + prev + '">First</a>');
	}
	if (next) {
		jQuery('.next').after('<a class="text-next" href="' + next + '">Last</a>');
	}
});
<script>

Basic Block Style Word Format With Icons

This displays next and previous links in text format and uses dash icons.

Show/Hide This Code

wp_link_pages code

$a = array(
	'before'           => '<div id="next-nav">',
	'after'            => '</div>',
	'next_or_number'   => 'next',
	'nextpagelink'     => 'Next Page <span class="dashicons dashicons-arrow-right"></span>',
	'previouspagelink' => '<span class="dashicons dashicons-arrow-left"></span> Previous Page',
);

wp_link_pages($a);

CSS

<style>
#next-nav a.post-page-numbers, #next-nav .post-page-numbers {
    font-size: 1.5em;
    border: 1px solid;
    padding: 5px 10px;
    background: #eeeeee;
    color: red;
    transition: 0.3s;
}
#next-nav span.post-page-numbers.current {
    color: #ffffff;
    background: red;
    border: 1px solid #999999;
}
#next-nav a.post-page-numbers:hover {
    background-color: red;
    color: #ffffff;
}
#next-nav span.dashicons {
    font-size: 2em;
    height: unset;
    width: unset;
    line-height: 1;
    vertical-align: middle;
    top: -2px;
    position: relative;
}
</style>