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.
By default, the links will posts_nav_link looks like this:
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:
1 2 3 4 5 6 7 8 9 10 | <!-- start navigation --> <div class="navigation"> <div class="alignleft"> <?php previous_post_link('« « %', '', 'yes'); ?> </div> <div class="alignright"> <?php next_post_link('% » » ', '', 'yes'); ?> </div> </div> <!-- end navigation --> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 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.
Article Tags: customize wordpress menu, wordpress nav menu, wordpress tutorial, wordpress tutorial for beginner, wordpress tutorial for beginners, wordpress tutorials, wordpress tutorials for beginners
