• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Cool Previous & Next Post/Page Navigation Links

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:


Register for full access

Reader Interactions

Comments

  1. sporterfield says

    April 15, 2016 at 11:25 am

    How do you make this show up only on certain categories and only within that category?

    Log in to Reply
    • Brad Dalton says

      April 15, 2016 at 11:30 am

      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:

      if ( in_category( array( 1,2,3 ) ) )

      Swap out 1,2,3 with a comma separated list of your categories.

      Log in to Reply
      • sporterfield says

        April 15, 2016 at 11:47 am

        Thanks, but I need to know exactly where to put that in that downloadable PHP file.

        Log in to Reply
        • Brad Dalton says

          April 15, 2016 at 12:16 pm

          Where to put the code?

          Which downloadable file are you referring to?

          Log in to Reply
          • sporterfield says

            April 15, 2016 at 12:22 pm

            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?

          • Brad Dalton says

            April 15, 2016 at 12:41 pm

            Try this:

            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'<nav class="post-navigation">';
            	echo'<div class="nav-links">';
            	
            	previous_post_link( '<div class="nav-previous">%link</div>', '', 'true', '', 'category' );
            	next_post_link( '<div class="nav-next">%link</div>', '', 'true', '', 'category' );
            	
                echo'</nav>';
            	echo'</div>';
            }

            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.

  2. mac4media says

    April 1, 2015 at 12:25 pm

    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

    Log in to Reply
    • Brad Dalton says

      April 1, 2015 at 12:31 pm

      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.

      Log in to Reply
  3. mac4media says

    March 29, 2015 at 9:08 pm

    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

    Log in to Reply
    • Brad Dalton says

      March 30, 2015 at 3:45 am

      The code at the end of the post enables you to do that if you simply change the conditional tag:

      !is_singular( 'product' )
      Log in to Reply
      • mac4media says

        March 31, 2015 at 7:54 pm

        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'';*/
        }

        Log in to Reply
        • Brad Dalton says

          April 1, 2015 at 2:49 am

          Please remove all code from the download file excluding the following 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' );

          Also, could you please add your PHP code into a Gist and embed or link to the Gist as its not displaying correctly.

          Log in to Reply
        • Brad Dalton says

          April 1, 2015 at 3:34 am

          I just tested this and it works fine. Only took me 2 minutes to install the code.

          What theme are you using?

          Log in to Reply
  4. KatMoody says

    February 7, 2015 at 2:46 am

    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!

    Log in to Reply
    • Brad Dalton says

      February 7, 2015 at 9:11 am

      The video shows it works well when you resize the screen.

      CSS for Media Queries are included.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags