WP SITES

2752

Original WordPress Tutorials & 6000+ Guaranteed Code

Snippets

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

          • 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:

            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. Hi Brad, i’m using the Envy Pro Child Theme

    I’ve copied the 2 snippets into a gist


    <?php
    /*Previous & Next Links*/
    add_action( 'loop_end', 'custom_single_post_nav', 12 );
    function custom_single_post_nav() {
    if ( ! is_singular( array( 'post', 'reviews', 'bundles', 'books' ) ) )
    return;
    echo'<nav class="post-navigation">';
    echo'<div class="nav-links">';
    previous_post_link( '<div class="nav-previous">%link</div>' );
    next_post_link( '<div class="nav-next">%link</div>' );
    echo'</nav>';
    echo'</div>';
    }

    view raw

    post_nav_links.php

    hosted with ❤ by GitHub

    view raw

    woo_nav_links.php

    hosted with ❤ by GitHub

    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.

  3. 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

      • 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.

          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.

Leave a Reply