How to Add a Prev/Next Navigation Menu in Genesis

Adding a previous/next menu to your blog can help your visitors easily navigate from post to post. It enhances the user experience on your blog. In this post, I’m going to talk about how to create a Previous/Next Navigation Menu to a WordPress blog running on Genesis Framework.

Adding a previous/next menu to your blog can help your visitors easily navigate from post to post. It enhances the user experience on your blog. In this post, I’m going to talk about how to create a Previous/Next Navigation Menu to a WordPress blog running on Genesis Framework.

Before we start, here’s a preview of what the end result of this tutorial is going to look like:

The above screenshot is from a blog running on Genesis Sample Theme.

And, the design is inspired by the Prev/Next menu on TwentyFifteen theme from WordPress.

Here’s a screenshot if you haven’t seen the theme yet.

We can achieve the result in the following steps:

#1: Add Code Snippets to Functions.php of your active Genesis child theme

#2: Add Code Snippets to Style.css of your active Genesis child theme

#3: Make Necessarily Adjustment in CSS Code

Step #1: Add the following code to your Functions.php file, preferably at bottom of your file.

//* Load entry navigation
add_action( ‘genesis_after_entry’, ‘genesis_prev_next_post_nav’, 9 );

//* Customize the previous/older post navigation links
add_filter ( ‘genesis_prev_link_text’ , ‘ambiance_prev_older_links_text’ );
function ambiance_prev_older_links_text ( $text ) {

return ‘«’;

}

//* Customize the next/newer post navigation links
add_filter ( ‘genesis_next_link_text’ , ‘ambiance_next_newer_links_text’ );
function ambiance_next_newer_links_text ( $text ) {

return ‘»’;

}

Alternatively, click here and copy the code snippets.

By now, you should see the Previous/Next menu appearing below your post. The next step is only meant to style the appearance of the navigation menu we added above.

Step #2: Add the following code to your Style.css file, preferably at the bottom of your file.

/*Next/Prev Nav Styling
———————————————— */
.pagination-previous.alignleft,
.pagination-next.alignright {
font-size: x-large;
font-family: Roboto Condensed;
}

.adjacent-entry-pagination.pagination a {
color: rgba( 17, 17, 17, 0.7);
}

.single .pagination-next,
.single .pagination-previous {
font-size: 20px;
font-weight: 900;
padding: 40px 25px;
width: 100%;
}

.adjacent-entry-pagination .pagination-previous {
border-right: 1px solid #ddd;
float: left;
padding-right: 15px;
background-color: #fff;
border: 2px solid #ddd;
}

.adjacent-entry-pagination .pagination-next {
float: right;
padding-left: 15px;
background-color: #fff;
border: 2px solid #ddd;
}

Alternatively, click here to copy the code snippets.

After this step, you should see the complete results. However, in order to style it further as per your child theme’s specific needs, you may need to tweak the CSS code a little bit.

Please, note that you might want to tweak the font-family, font-size, background-color and padding properties as per your theme’s need or if you want to achieve any speicific appearance.

Step #3: You could show the nav menu differently by tweaking the code.

Here are some examples:

.pagination-previous.alignleft,
.pagination-next.alignright {
font-size: larger;
}

.single .pagination-next,
.single .pagination-previous {
padding: 60px 25px;
width: 100%;
}

By making the above tweaks, the nav menu will look something like this:

I hope this tutorial helps. If you have any questions, leave me a message. I will be glad to help.

About Susanta Sahoo

I'm the founder and content marketing head at Top League. Our team can help you build great content that helps you rank high on Google and generate high-quality leads. Get in touch with us and let's discuss your project. I'm on LinkedIn & Twitter, just so you know.