WP SITES

Log in

Different Ways To Add Post Navigation In Genesis

—

by

Brad Dalton

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

Comments

24 responses to “Different Ways To Add Post Navigation In Genesis”

  1. Alba Figueroa Avatar
    Alba Figueroa

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

    This is what I have, any suggestions?

    [code]
    .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;
    }
    [/code]

    1. Brad Dalton Avatar
      Brad Dalton

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

  2. Carla Avatar
    Carla

    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)

    1. Brad Dalton Avatar
      Brad Dalton

      All fixed Carla?

  3. Carla Avatar
    Carla

    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)

  4. Hoang Avatar
    Hoang

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      Page-Links?
      How did you add them?

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

      1. Hoang Avatar
        Hoang

        No, I split the post in to different webpage by using [code][/code]

        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!

        1. Brad Dalton Avatar
          Brad Dalton

          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.

          [code]
          add_action( ‘genesis_entry_header’, ‘wpsites_page_link’, 2 );
          function wpsites_page_link() {
          echo’

          ‘;
          wp_link_pages(‘pagelink=Page %’);
          echo’

          ‘;
          }
          [/code]

          1. Hoang Avatar
            Hoang

            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”?

          2. Brad Dalton Avatar
            Brad Dalton

            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 Avatar
    Kimberly

    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?

    1. Brad Dalton Avatar
      Brad Dalton

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

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

  6. Anthony Avatar
    Anthony

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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  7. emily Avatar
    emily

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. emily Avatar
        emily

        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.

        1. Brad Dalton Avatar
          Brad Dalton

          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()

          1. emily Avatar
            emily

            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?

          2. Brad Dalton Avatar
            Brad Dalton

            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/

          3. emily Avatar
            emily

            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: [code]if( !in_tax((‘type-1’) && is_singular(‘post’) ) ) [/code]
            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 Avatar
    Lily

    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

    1. Brad Dalton Avatar
      Brad Dalton

      All PHP code goes in your child themes functions file.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.