Previous and Next button helps users to navigate to the new posts from current page. It’s one of the most used feature in WordPress. WordPress provides lots of hooks and APIs using which we could customize our themes in number of different ways.
In this tutorial we will go over steps on how to add cool Previous / Next button on each post of your blog.
WordPress Navigation: Have you noticed new Previous / Next Navigation Button on Crunchify.com? I’m talking about these below buttons.
Take a look at below screenshot
Solution is very simple.
Step-1
Open your WordPress theme’s style.css file and paste below code:
.arrowLeft a {
position: fixed;
z-index: 100;
left: -5px;
top: 45%;
padding: 15px 10px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}
.arrowLeft a:hover {
left: 0;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #fff;
}
.arrowRight a {
position: fixed;
z-index: 100;
right: -5px;
top: 45%;
padding: 15px 10px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}
.arrowRight a:hover {
right: 0;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #fff;
}
.arrowNav a {
background: #225773;
color: #fff;
text-decoration: none;
font-size: 16px;
}
Step-2
Open your theme’s functions.php file and put below code at the end of file:
function crunchify_previous_next_post_navigation(){
?>
<div class="arrowNav">
<div class="arrowLeft">
<?php previous_post_link('%link', '↞', FALSE); ?>
</div>
<div class="arrowRight">
<?php next_post_link('%link', '↠', FALSE); ?>
</div>
</div>
<?php
}
add_action('wp_footer', 'crunchify_previous_next_post_navigation');
If you are using Font-awesome fonts like me on Crunchify, try using this code:
function crunchify_previous_next_post_navigation(){
?>
<div class="arrowNav hide-on-mobile">
<div class="arrowLeft">
<?php previous_post_link('%link', '<i class="fas fa-chevron-circle-left" aria-hidden="true"></i>', FALSE); ?>
</div>
<div class="arrowRight">
<?php next_post_link('%link', '<i class="fas fa-chevron-circle-right" aria-hidden="true"></i>', FALSE); ?>
</div>
</div>
<?php
}
add_action('wp_footer', 'crunchify_previous_next_post_navigation');
Here we are using wp_footer hook which adds above code to your theme’s footer.
Once you make above changes, just clean your blog cache and you should be able to see navigation arrows on your blog. Let me know if you see any issue with this.
What’s next?
Now it’s time to show Title on mouse hover.
WordPress: How to display Title on Previous Post and Next Post mouse hover link?