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

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Different Ways To Add Post Navigation In Genesis

In this tutorial, i’ll provide several working code snippets which you can use ‘as is’ or modify to your own specific requirements.

Alice asked this question:

I’m trying to implement the WP PageNavi plugin in a New Child Theme from a client, the theme is a child theme of the Genesis framework. The plugin is a pagination plugin but I only need the pagination of the posts in only two of the categories of the site. I can’t figure out the structure of the page. Can someone help me on this? Thanks in advanced.

These code snippets add pagination (next & previous post navigation) links to:

  • All single posts in every category
  • All single posts
  • Single posts in specific categories

I’ll also include CSS code which you can use to style your links anyway you like.

All single posts in each category

All single posts in each category will be linked which means posts in other categories won’t be linked together.

Register for full access

Related Code Snippets

  • Add Next & Previous Product Navigation Links To WooCommerce Single Products
  • WP PageNavi Plugin Adds Pagination In WordPress
  • Previous & Next Single Post Navigation Links In WordPress
  • Adding Next & Previous Post Nav Links In Genesis
  • Add Single Post Nav Links For Categories
  • How To Add Next & Previous Nav Links To Single Custom Post Types

Reader Interactions

Comments

  1. Alba Figueroa says

    September 26, 2014 at 3:12 am

    This worked for me, But for some reason, it won’t style the way i want it.

    This is what I have, any suggestions?

    .previous-post-link {
    	float: left;
    	margin-bottom:30px;
    	margin-top: 30px;
    }
    
    .next-post-link {
    	float: right;
    	text-align: right;
    	margin-bottom:30px;
    }
    
    .previous-post-link, .next-post-link {
    	font-weight: 900;
    	border-bottom: 1px solid #aba9a9;
    	border-top: 1px solid #aba9a9;
    	color: #ddd;
    	font-size: 14px;
    	margin: 20px 0;
    	clear: both;
    	overflow: hidden;	
    	padding: 20px;
    	text-transform: uppercase;
    }
    Log in to Reply
    • Brad Dalton says

      September 26, 2014 at 6:01 am

      You will need to register to get answers to any questions http://wpsites.net/thanks-for-leaving-your-comment/

      Log in to Reply
  2. Carla says

    September 13, 2014 at 10:24 pm

    So sorry to have bothered you with my silly question. Instead of ‘span style’ for the arrows, I only typed in ‘style.’

    When I realized I had forgotten the span, I felt like a big dummy.

    :o)

    Log in to Reply
    • Brad Dalton says

      September 14, 2014 at 11:29 am

      All fixed Carla?

      Log in to Reply
  3. Carla says

    September 13, 2014 at 10:01 pm

    Hi Brad . . .

    My single post navigation links have the text ‘Older/Newer’ and an arrow. I know how to style the text, but how do I isolate the arrow so that I can style it larger than the text?

    I found that if I wrap the arrow code and the text in separate divs, they both display. But I can’t get them to display on the same line together.

    I’m using the same code you have above, just with the arrow and the text in its own div. I fiddled and fiddled and nothing seems to work.

    It’s always the things that seem so simple that take me hours to figure out.

    :o)

    Log in to Reply
  4. Hoang says

    June 14, 2014 at 7:54 pm

    Hello, Thank you for the snippets but can I use this to modify Page-Links (split a single post up into different web pages)? I would like to move Page-links to top instead of bottom as default, can you advice?

    Log in to Reply
    • Brad Dalton says

      June 14, 2014 at 8:01 pm

      Page-Links?
      How did you add them?

      You mean the more-tag?
      Or are you using code or a plugin for the links?

      Log in to Reply
      • Hoang says

        June 15, 2014 at 2:28 am

        No, I split the post in to different webpage by using

        <!--nextpage-->

        http://codex.wordpress.org/Styling_Page-Links

        But the page-links located at the bottom as default, now I want to make it available on top of post as well.

        I can use Genesis Simple Hook but I’m still unable figure out how to do it!

        Log in to Reply
        • Brad Dalton says

          June 15, 2014 at 5:10 am

          Ok understand. Its not single post navigation linking different single posts together, its splitting one post up into different pages using the next page tag.

          What you can do is use wp_link_pages and hook it in using the genesis_entry_header hook. You could also create a custom field for this.

          add_action( 'genesis_entry_header', 'wpsites_page_link', 2 );
          function wpsites_page_link() {
          echo'<div class="page-link">';
          wp_link_pages('pagelink=Page %'); 
          echo'</div>';
          }
          Log in to Reply
          • Hoang says

            July 23, 2014 at 12:20 am

            Thank you and sorry, the notification post I got in my email is different than your reply, I just try it today! Yes, it work, now I can see the navigation at top but can you explain a bit more about “hook it in using the genesis_entry_header hook”?

          • Brad Dalton says

            July 23, 2014 at 12:27 am

            Change the hook in the code snippets on this post. Here’s all the hook positions http://wpsites.net/web-design/list-of-genesis-hooks/

  5. Kimberly says

    June 13, 2014 at 2:03 am

    Where in the child theme functions file should I place the code? I’d like to use the “All Single Posts” code. This will create Previous/Next buttons on the bottom of each of my posts correct?

    Log in to Reply
    • Brad Dalton says

      June 13, 2014 at 2:56 pm

      Depends which theme you’re using as ll are coded differently.

      Generally, new PHP code is added to the end of the file.

      Log in to Reply
  6. Anthony says

    May 16, 2014 at 1:42 pm

    Super helpful. thanks! How can I add arrows next to the text? I’d like to use the following HTML arrow, ❬ and ❭ ?

    Log in to Reply
    • Brad Dalton says

      May 16, 2014 at 1:53 pm

      Just add it next to the text or you could use Dashicons instead.

      Can’t see what you posted. Please add your HTML to a Github Gist and link to it from here.

      Log in to Reply
  7. emily says

    May 6, 2014 at 2:26 pm

    hi brad,

    im continuing to try to get the code for ‘single posts in specific categories’ to work and i think this is my final attempt. nothing i do seems to be linking the categories within my portfolio. would you mind taking a look at the code to see what im doing wrong?

    thanks so much for your help,
    emily

    Log in to Reply
    • Brad Dalton says

      May 6, 2014 at 8:38 pm

      One of the code snippets in this post links all posts in the same category together and its exactly the same code i use on this site,

      I don’t offer a free code review service as i have already shared a significant amount of my work already.

      Log in to Reply
      • emily says

        May 7, 2014 at 4:47 pm

        hi brad,

        i very much appreciate any help you offer. i had embedded a gist with my code into that question, that it didn’t appear makes my request seem that much more obnoxious—sorry for that.

        i’m curious to know what might be different if im trying to point to a category within a portfolio post, not a regular post? all the conditional tags i’ve tried have yielded no results.

        again, thanks.

        Log in to Reply
        • Brad Dalton says

          May 7, 2014 at 5:20 pm

          I think you may need a custom WP_Query for linking Custom Post type pages within a category and i will work out a solution for this at some stage.

          The code i use and have posted here is for linking single posts within a category together and may not work for single CPT’s attached to a CPT category.

          Generally, i create custom taxonomy types rather than use categories for CPT’s.

          Have you tried is_tax()

          Log in to Reply
          • emily says

            May 7, 2014 at 6:53 pm

            i have tried tax_() though i’ve been trying to figure out where it goes (still trying to get up to speed with the configurations of conditional tags). i’ve also tried redoing the conditional line altogether using tax(), again, with no luck.

            i like your idea about creating a custom taxonomy though, would that work in place of “category” in the code?

          • Brad Dalton says

            May 7, 2014 at 7:06 pm

            Thats right and you can grab all the code from the Executive Pro child theme by StudioPress or from this post http://wpsites.net/web-design/add-support-for-creating-custom-taxonomies-to-existing-portfolio-custom-post-type/

          • emily says

            May 7, 2014 at 8:37 pm

            i thought this was going to do it! i followed the tutorial you sent along and everything worked beautifully. however i’m still unable to get the links to appear.

            at first i tried:

            if( !in_tax(('type-1') &amp;&amp; is_singular('post') ) )

            and when that didn’t work i tried every combination i could think of, yet nothing. obviously i’m missing something but i’m at a loss as to what. should i be constructing the conditional differently? or perhaps i’m looking in the wrong place?

  8. Lily says

    May 2, 2014 at 9:49 am

    I’m trying to get this to work, but the part with “Genesis” doesn’t work for me, since I’m using a different theme.

    Also, I wasn’t sure where exactly to put that code. I tried putting it in the index file, but I messed up my blog, so I switched it back to how it was.

    I’m just about pulling my hair out trying to get this pagination thing to work for a specific series of pages! You’d think someone would invent a plugin to make this super easy for those of us who are not web developers!

    /sigh

    Log in to Reply
    • Brad Dalton says

      May 2, 2014 at 6:16 pm

      All PHP code goes in your child themes functions file.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems