Sridhar Katakam

Genesis and WordPress Tutorials

Visual Adjacent Entry Navigation in Genesis

by 14 Comments

In the members-only forum a user wrote:

Customizing the next-previous area with featured image?

Hi Sridhar,

first time I´m trying this so if something is not done right then please let me know.

I´m making a redesign of my site and on single posts I wanted to make a bit of change to the next and previous post instead of it just saying “next/previous post” I wanted to have it look like this:

https://app.box.com/s/v5s6tkwecits1iixlggaayy3y7lpkaq1

With the post title in the middle of a box and if there is one, the featured image of the post should be the background of the box.

Just customising the next/previous I can handle thanks to code from Studiopress but this kind of custom stuff? A bit to advanced for me.

Thanks for reading.

We can create a custom function based on genesis_adjacent_entry_nav() to display links to previous and next entries on single pages in Genesis having the markup to display previous/next text and corresponding entry titles as an overlay on featured images of the adjacent entries.

visual-adjacent-entry-navigation-genesis

We shall make our adjacent entry navigation appear one below the other from 1200px and below.

visual-adjacent-entry-navigation-genesis-smaller-screens

Step 1

Create a file named say, singular.js in your child theme's js directory having the following:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • One follow up question. If I use the numeric page navigation outside in Genesis the code is shared so it will make the “next” and “previous” buttons have the grayed out overlay. So I guess it´s better to change the

    echo ‘ID ) ) . ‘”>’;

    To something along the lines of

    echo ‘ID ) ) . ‘”>’;

    And then change the css accordingly? Or the way I did it was simply to place .single in front of the style.

    Thanks once again for the help!

    Reply

  • This worked beautifully! I just came looking for simple navigation and found this instead. Super easy and worked on the first try … well, second try if you count when I was applying it to the wrong theme :-/

    Reply

  • Hi Sridhar, I wonder if you can help me with this. I’ve installed this adjacent nav to two themes, I’m not using the JS as I’m going for a different design. In one theme, it works great, but the second theme is showing some errors in the first and last post:

    NOTICE: TRYING TO GET PROPERTY OF NON-OBJECT IN LINES […]

    The lines in question are:

    LAST POST

    if ( has_post_thumbnail( $prev_post->ID ) ) {
    $previous_post_image_url = wp_get_attachment_image_url( get_post_thumbnail_id( $prev_post->ID ), ‘prev_next_thumb’ );

    and

    FIRST POST

    if ( !has_post_thumbnail( $next_post->ID ) ) {
    $next_post_image_url = wp_get_attachment_image_url( get_post_thumbnail_id( $next_post->ID ), ‘prev_next_thumb’ );

    I’m working locally so I can’t add a link, any suggestion?

    Reply

  • Hi Sridhar

    I’m sure there’s a simple solutions for this, but I can’t figure it out. I’m using this tutorial on a gallery site, where gallery items are created as posts, with the “next/prev image in the gallery” is displayed beneath each gallery item – that’s why I’m using this tutorial.

    News items are also created as posts and, at present, they are displayed beneath gallery items also. I want to exclude the news items from showing up in the adjacent post links. I thought I could use the get_adjacent_post() to exclude the news category (cat #5), but when I add that as an $excluded_term it seems to simply change the image in the “next” link.

    Here’s an example:
    http://kevinhaynes-co-uk.stackstaging.com/2018/06/05/the-debt-collector/

    This is the latest gallery entry, so there should be no “next” post (“MAFA Summer Exhibition”).

    Thanks
    Dom

    Reply
    • >