If you are looking for some inspiration or just to get some ideas of the different ways you can configure wp_link_pages to display your single post pages, here are several examples to get you started. We intially added page breaks to this post to demonstrate each of the pagination styles. Click on page link 3 to see it in action.
Each example will include the wp_link_pages code, CSS markup, and any relevant jQuery.
When you’re ready to create your own, just head over to our wp_link_pages() Generator to generate your wp_link_pages code.
Basic Block Style Number Format
This displays the page numbers as basic blocks.
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).
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>
Sponsored Amazon Products
