How to add simple Previous post, Next post navigation before footer section? (GenesisWP or other WordPress themes)

There is no doubt WordPress is the best blogging platform out there.

The most important things as a blogger you need to make sure that you publish/post best articles on your site. If you have a honest/valuable contents and your site has valued articles then users will come back for sure.

Let’s assume you have best articles on your site but what’s next? Well, there are so many things you could do in order for your users to find contents very easily.

Here are few ways you could have your contents discovered easily:

• Provide Google Search Capability on your site.
• Provide better navigation for your users.
• Make sure your Menus and Sub-menu items are properly organized.
• Provide better sidebar contents.
• Show Next and Previous post link after each articles.

On Crunchify, we have published few different approaches to show Previous/Next link sometime back.

Here is a previous tutorial.

Create Cool Previous-Next Post Navigation Button for WordPress Blog – just using CSS without JavaScript

Here is another way:

In this tutorial we will go over another way to show Previous/Next link which appears after each post.

Code for Genesis themes:

Just add below code into your Child theme’s functions.php file.

add_action( 'genesis_after_entry', 'crunchify_previous_post_naviation_after_comment' );
function crunchify_previous_post_naviation_after_comment() {
	if ( is_singular( 'post' ) ) {
		echo '<div class="crunchify-prev-next-nav">';
			echo '<div class="wrap">';
				echo '<div class="one-half crunchify-prev-next-navigation">';
					previous_post_link( '<div class="previous"><span class="crunchify-title"><i class="far fa-hand-point-left"></i></span> %link</div>', '%title' );
				echo '</div>';
				echo '<div class="one-half crunchify-prev-next-navigation">';
					next_post_link( '<div class="next"><span class="crunchify-title"><i class="far fa-hand-point-right"></i></span> %link</div>', '%title' );
				echo '</div>';
			echo '</div>';
		echo '</div>';
	}
}

In this tutorial, we are using Font-awesome Fonts as a dependency. If you are not including Font-Awesome fonts then you could remove these HTML tags.

• <i class=”far fa-hand-point-left”></i> – replace it with text Previous Post.
• <i class=”far fa-hand-point-right”></i> – replace it with text Next Post.

Note: If you are not on Genesis theme then just replace hook genesis_after_entry with comment_form_after.

Beautify Next/Previous section with some CSS changes.

.crunchify-prev-next-post {
    border: 1px solid #ddd;
    width: 48%;
    padding: 20px;
    background: #fff;
    border-radius: 3px;
    font-size: 17px;
    float: left;
    margin-left: 1%;
}

Just clear your site cache and you should see beautiful Previous/Next navigation section after your comment form.

Hope this helps and let me know if you face any issue running this code.