Ever wonder how to show previous post and next post on your single WordPress post?
Sometime back we have published an article on the same on how to add previous next button with nice CSS. Kindly follow this tutorial first.
Do you have any of below questions?
- How to show links to Previous and Next Posts and mouse hover title in single Posts in Genesis?
- How to show and hide next/prev buttons on mouse hover?
- In WordPress how to show next post title on previous post title on mouse hover
- How to show post title on mouse over in WordPress?
Then you are at right place.
Checkout below video and it shows mouse hover post title on your WordPress site.
Let’s get started:
Step-1)
Please make sure you have followed below tutorial to show previous-next navigation button.
Come back for step-2 after following tutorial.
Step-2)
Add below code to your theme’s functions.php file to show title on mouse hover.
There are two functions next_post_link and previous_post_link which we are modifying and adding title to it.
// Add Title to next post link
add_filter('next_post_link', function($crunchify_link) {
$next_post = get_next_post();
$crunchify_title = $next_post->post_title;
$crunchify_link = str_replace('href=', 'title="'.$crunchify_title.'" href=', $crunchify_link);
return $crunchify_link;
});
// Add Title to previous post link
add_filter('previous_post_link', function($crunchify_link) {
$previous_post = get_previous_post();
$crunchify_title = $previous_post->post_title;
$crunchify_link = str_replace('href=', 'title="'.$crunchify_title.'" href=', $crunchify_link);
return $crunchify_link;
});
And that’s it. Just clean your site cache and you should start seeing title on mouse hover.
Please let us know if you have any issue showing previous-next title on your blog post.
Feel free to share screenshot if you have beautiful navigation control on your site and want to share with rest of the users.