Customize Next and Previous Links in WordPress

Hello friends, hope you are doing good. The Next and Previous post links guide your website’s visitors through your WordPress site and it also helps you to get the more page views which boosts your SEO score. In this tutorial, I will explain how to customize Next and Previous Links in WordPress.

At the end of post and Page detail page, Next and Previous links appear to view the oldest and newest Post/page on your WordPress site. If you want to customize that links as per your site theme designs, then keep your close attention in this as I am going to share the simple & easy WordPress snippets to customize with many options.

Customize Next and Previous Links in WordPress

By default, the links will posts_nav_link looks like this:

Next and Previous Links « WordPress Codex

Want to change the text Previous Post & Next Post to something else, then use the below code:

1 2	<div class="navigation"><p><?php posts_nav_link('∞','Go Forward','Go Back'); ?></p></div>

You can add the directly previous and next post link:

<?php previous_post_link('« « %', '', 'yes'); ?>

</div>

<?php next_post_link('% » » ', '', 'yes'); ?>

</div>

Here is another way to customize the Next and Previous link by creating a new function inside the functions.php file. Use the below code in your theme’s functions.php file.

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="navigation">';

if (!empty($prevID)) {

echo '<div class="alignleft">';

echo '<a href="';

echo get_permalink($prevID);

echo '"';

echo 'title="';

echo get_the_title($prevID);

echo'">Previous</a>';

echo "</div>";

}

if (!empty($nextID)) {

echo '<div class="alignright">';

echo '<a href="';

echo get_permalink($nextID);

echo '"';

echo 'title="';

echo get_the_title($nextID);

echo'">Next</a>';

echo "</div>";

}

Open the template file and call the getPrevNext() function wher you want to add Next and Previous link.

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Customize Next and Previous Links in WordPress

Customize Next and Previous Links in WordPress

Recommended Posts:

Prem Tiwari

Solved Programs