This tutorial provides all the code you simply copy and paste into your child theme. The code adds next and previous post & paste links to any Genesis or WordPress child theme.
The code produces exactly what you see in the following video:
Cool Previous & Next Post/Page Navigation Links
—
by
19 responses to “Cool Previous & Next Post/Page Navigation Links”
How do you make this show up only on certain categories and only within that category?
You can add parameters to the previous_post_link and next_post_link functions and conditional tags.
http://wpsites.net/web-design/add-single-post-nav-links-for-categories/
Example: [code]if ( in_category( array( 1,2,3 ) ) )[/code]
Swap out 1,2,3 with a comma separated list of your categories.
Thanks, but I need to know exactly where to put that in that downloadable PHP file.
Where to put the code?
Which downloadable file are you referring to?
Up above in the tutorial, you have a PHP file that I downloaded, copied, and pasted into my Genesis functions file to make this work and it works perfectly. I need to know where to put this:
if ( in_category( array( 1,2,3 ) ) )
Within that code. Where do I put that?
Try this:
[code]
add_action( ‘genesis_entry_footer’, ‘custom_single_post_nav’, 12 );
function custom_single_post_nav() {if ( ! is_singular( ‘post’ ) && !in_category( array( 1,2,3 ) ) )
return;echo’
‘;
echo’‘;
}
[/code]And remove the original code you downloaded and added to functions.
The above code only displays the links on single posts in category 1,2,3 and only links posts within the same category.
[…] Cool Previous & Next Links […]
[…] Cool Previous & Next Links […]
[…] Cool Previous & Next Links […]
[…] Cool Previous & Next Links […]
Hi Brad, i’m using the Envy Pro Child Theme
I’ve copied the 2 snippets into a gist
https://gist.github.com/mac4media/dcf6ca7426dc79b7eeec
and i’ve uploaded a screenshot to illustrate
https://dl.dropboxusercontent.com/u/76233724/images/nav_links.png
As you will see i’ve commented the class “nav-links” from the woocommerce snippet because
that was breaking the page layout.
My site is currently offline but if you need access i can send you admin access.
Thanks
Send me a copy of your theme please and i’ll add the code for you because its very easy and i have tested it many times without any problems.
Hi Brad,
I’m currently using a Genesis Child Theme with the Genesis Connent for Woocommerce plugin.
This is by far the best implementation of navigation links i’ve seen so far.
Would you know how to make this work on woocommerce single product pages?
I have it setup to display on all singular post and CPT’s and i’d like to use the same navigation
element in woocommerce for the single product pages.
I’m also searching for a method to have the links follow through post or products in the same category.
Would any on this be possible?
Best regards
The code at the end of the post enables you to do that if you simply change the conditional tag:
[code]
!is_singular( ‘product’ )
[/code]Hi Brad,
The original snippet you provided works perfectly for posts but for some reason the snippet below which i’ve added for just the product pages is causing additional text links to also be placed on the page for related products and upsells.
I had to take out the echo nav-links part because that was breaking the page layout completely.
Any idea how i could taylor this to fit the product pages?
/*Previous & Next Links Woocommerce*/
add_action( 'loop_end', 'custom_single_product_nav', 15 );
function custom_single_product_nav() {if ( ! is_singular('product' ) )
return;echo'';
/*echo'';*/previous_post_link( '%link' );
next_post_link( '%link' );echo'';
/*echo'';*/
}Please remove all code from the download file excluding the following code.
[code]
function icon_scripts() {
wp_enqueue_style( ‘genericons’, get_stylesheet_directory_uri() . ‘/genericons/genericons.css’, array(), ‘3.0.3’ );
}
add_action( ‘wp_enqueue_scripts’, ‘icon_scripts’ );
[/code]Also, could you please add your PHP code into a Gist and embed or link to the Gist as its not displaying correctly.
I just tested this and it works fine. Only took me 2 minutes to install the code.
What theme are you using?
Brad – I wonder how these work on mobile displays? Without a live demo it’s hard to tell exactly? I love this idea – and it looks nice too!
The video shows it works well when you resize the screen.
CSS for Media Queries are included.
Was This Tutorial Helpful?