Adding automatic next|previous pagination links to both Posts and Pages
Pagination bubbles for pages
WordPress PHP – The Fivepilchard styling for pagination links is a single chevron indicating the direction with a green circle hover function. This is two avoid the confusion surrounding news posts, where the “next” post is either a more recent story or the next in the list, which will probably be going back in time.
Also Pages do not run through in the same order that the display in other forms of navigation. They may be following their creating dates which could be a different order.
For posts
WordPress has a built in function for displaying Post Next/Previous Pagination (I’ll just call it pagination from now on but it’s mainly the mechanism for next post | Previous post buttons that can cycle through the contents of the content type) Posts and pages actually work in different ways, posts are chunks of story-data held in an order whereas a page is a stand alone item.
To enable each single post to have pagination we need to add some code to the single.php template (single.php is the single post page).
This code calls the built in functions – next_post_link and previous_post_link into the main loop (before the endwhile), these have our special pagination CSS style and Font Awesome arrows.
Tip: To embed code into pages like this you need a html converter like this here >. Insert your code, encode and copy the html.
<div class=”pagination”>
<?php next_post_link(‘%link’, ‘<i class=”fa fa-angle-left fangle” aria-hidden=”true”></i>’); ?> <?php previous_post_link(‘%link’, ‘<i class=”fa fa-angle-right fangle” aria-hidden=”true”></i>’);?>
</div>
<?php endwhile; ?>
For pages
Pagination on pages requires a new function. We chose to embed this code into the template rather than anywhere else. To start you’ll need the page.php template to add the pagination to pages on your website.
There are two pieces of code, code 1 is the function call that sits in position in the template and the other is the function itself that is declared at the end of the file (but before the footer.php call). This is also positioned in the main loop before the endwhile tag.
<?php getPrevNext(); ?>
<?php endwhile; ?>
The next piece of php, code 2 goes at the end. Sourced from here >
function getPrevNext(){
$pagelist = get_pages(‘sort_column=menu_order&sort_order=asc’);
$pages = array();
foreach ($pagelist as $page) {
$pages[] += $page->ID;
}
$current = array_search(get_the_ID(), $pages);
$prevID = $pages[$current-1];
$nextID = $pages[$current+1];
echo ‘<div class="clearfix"></div><div class="pagination">’;
if (!empty($prevID)) {
echo ‘<a href="’; echo get_permalink($prevID); echo ‘"’; echo ‘title="’; echo get_the_title($prevID); echo’"><i class="fa fa-angle-left fangle" aria-hidden="true"></i></a> ‘;
}
if (!empty($nextID)) { echo ‘ <a href="’; echo get_permalink($nextID); echo ‘"’; echo ‘title="’; echo get_the_title($nextID); echo’"><i class="fa fa-angle-right fangle" aria-hidden="true"></i></a>’;
}
echo ‘</div>’; }
?>
Next job is to control where they appear with an if statement.
This snippet says ! (!=is not)is_page – page id then do the function. This is on the page.php template in place of Code 1 above.
<?php if ( !is_page(array(1261, 1234, 1354)) )
getPrevNext();
?>
Done.
Fivepilchard Team 