April 3rd, 2020

ACF Relationship Field Prev/Next Buttons

The Relationship field in the Advanced Custom Fields (ACF) creates a select field that allows you to choose a list of pages, posts and custom posts.

You can then loop through that list to access the pages, posts and custom posts as post objects. This is extremely useful for advanced linking when you want a page/post to contain links to multiple pages/posts.

The Problem

I came across an issue where I had a project custom post type set up. On the page where the projects were listed, I was using a relationship field instead of the standard WordPress post query.

On the single project page, I needed to set up previous and next buttons.

However, using WordPress’ built-in functions that get the previous/next project links would get the links in order for the projects appear in the backend, NOT my relationship field, meaning the previous and next project links were in the wrong order!

To show you how to get around this, I will provide the full code snippet followed by a more in-depth description of how it works.

The Solution

This code goes in your single.php file (or your custom-post-single.php file equivalent).

// This should be the ID of the page the relationship field is set up on,
// NOT this page’s ID
$page_id = 5;

// Get the projects from the relationship field
$project_listing = get_field('project_listing', $page_id);

// Empty array to store project IDs
$project_listing_array = array();

// Loop through all the projects in 'project_listing' from page ID 5
if( $project_listing ) : foreach( $project_listing as $project_listing_item ) :

    // Add the project's ID into $project_listing_array
    array_push($project_listing_array, $project_listing_item->ID);

endforeach; endif;

// Search $project_listing_array for the current post ID,
// then get the previous and next project IDs,
// then get the first and last project IDs
$index = array_search($post->ID, $work_listing_array);
if($index !== FALSE) :
    $next_project = $project_listing_array[$index + 1];
    $previous_project = $project_listing_array[$index - 1];
    $first_project = reset($project_listing_array);
    $last_project = end($project_listing_array);
endif; ?>

<section class="prev-next">
    // If the current project is first in $project_listing_array then there is no value in $previous_project,
    // so instead we'll loop around to the last project in the array ($last_project).
    if( !$previous_project ) :
       $previous_project = $last_project;
    endif; ?>

    <p class="prev__link">
        <a href="<?php echo get_permalink($previous_project) ?>">previous project</a>

    // If the current project is last in the project listing array then there is no value in $next_project,
    // so instead we'll loop around to the first project in the array ($last_project).
    if( !$next_project ) :
       $next_project = $first_project;
    endif; ?>

    <p class="next__link">
        <a href="<?php echo get_permalink($next_project) ?>">next project</a>

Continue Reading

  • March 6th, 2020

    JavaScript ES6: The Basics of Destructuring

    Destructuring is one of the most common and important features of ES6. It allows us to extract data from arrays and objects, and assign that data into their own variables. Let's go over the basics!

  • Take on Me banner

    August 5th, 2020

    CodePen Challenge: Take on Me

    This week, our color palette comes from the video for "Take on Me" by a-ha from 1985. The absence of color is a big part of the video but the crossover moments between the comic book world and the real world are filled with moody pastels.

  • April 20th, 2020

    JavaScript ES6: const and let

    Replacing var with const/let is all about increasing clarity in your code and by the end of this article, I’m hoping I will have convinced you to never use var again!

  • April 8th, 2020

    CodePen Challenge: Hero

    The goal here was to create a hero with at least one image. I decided to demonstrate how an image overlay can improve text readability. To show how well this works across a wide array of images, a reload button is included which keeps reloading new images from picsum!

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now