Style Previous Next Links in WordPress to decrease bounce rate

Everyone is digging deep for blogs tips and WordPress tutorials, on internet, to improve blog performance and efficiency. Most of the Search engine traffic, lands on Single Post of blog and mostly a visitor escapes, if it couldn’t find anything relevance after reading the article. This is annoying for a blogger as it increases Bounce Rate of blog.

Bounce Rate

In my previous article I explained about how 404 error page helps to decrease bounce rate. But, as mentioned above, that the search engine traffic redirects visitors on single page entries of the blog, hence by styling single post entry will lower bounce rate of blog. In the article we will learn to style Previous Next Links in Thesis Theme. Previous-Next Links adds single post entry pages a navigation so that flow of reading is not affected.

Previous Next Post Links

Previous Next Links in Thesis Theme

In thesis theme design options allows to enable and disable previous next on single entry pages. Since in this article we are manually customizing previous next links so we will be using Thesis Hook to configure it. But before we proceed further I recommend you to safely upgrade thesis theme.

Below is a simple procedure to add and style previous next post in WordPress.

Add Previous Next Links in WordPress

In order to add custom previous next links in single entry pages, edit custom_functions.php file and copy-paste the below code snippet.

Make sure you take full backup of custom_functions.php file using FTP before modifying it.

//Author: AkyJoe
// Custom Previous Next Links
function show_previous_next_links() {
if (is_single()) { ?>
<div id="prev-next">
<div class="previous-post"><?php previous_post_link('%link', 'Previous Post', TRUE); ?></div>
<div class="next-post"><?php next_post_link('%link', 'Next Post', TRUE); ?></div>
<div style="clear:both;"></div>
</div>
<?php } }
add_action('thesis_hook_after_post', 'show_previous_next_links');

Style Previous Next Links on Single Post

Now as we have added the previous next links using the Thesis Hook in single entry page, but in order to make it eye catchy and prominent, we will have to style it by adding the below CSS code snippet in custom.css file.

/*Previous Next Post*/
#prev-next{font-size:40px; font-family:Arial;border-top: 2px dotted #EEE;}
#prev-next a{color:#5d9800; display:block;}
#prev-next a:hover{ text-decoration:underline;}
.previous-post{background:url('images/previous-post-arrow.png') no-repeat left center; float:left; padding:30px 0 30px 70px;}
.next-post{background:url('images/next-post-arrow.png') no-repeat right center;float:right; padding:30px 70px 30px 0;}

Add Image to Previous Next Links

To make the navigation look more prominent, we can add the below images. Download the images and save upload them under the Thesis Theme custom/images folder.

We Are Done!

After adding the code and the images, we are done with the styling of next previous links. Once done, refresh any single entry post and you will find it similar to screenshot below.

Final Output: Previous Next Links

Here we come to the end of this tutorial, where we learned to Style Previous Next Links in WordPress. If you have any query or any assistance is required, feel free to post comment as your feedback.