Site icon Hip-Hop Website Design and Development

Get next and prev item from custom WP_Query and Custom Post Type

I want to make a pager for a custom wp_query where I can have a prev and a next.
I have a CPT called family and I must show the families that meet the condition that their status is Retained, important I must show only one family per page, and I must put the paginator to navigate one by one.

This is my code:

$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
$args_families = array (
  'post_type'      => array( 'family' ),
  'paged'          => $paged,
  'orderby'        => 'ASC',    
  'posts_per_page'         => 1,    
  'meta_query' => array(
      array(
          'key' => 'status',
          'value' => 'Retained',
          'compare' => '=',
      )
    )
 );
$family_query  = new WP_Query( $args_families );
<?php if ( $family_query->have_posts() ) : ?>
<?php while ( $family_query->have_posts() ) : ?>
    <?php $family_query->the_post(); ?>

    <?php
        echo get_field('status'). '<br>';
        echo ' '.'fid_'.get_field('family_id') . '<br>';
        echo 'ID + ACF'.' '.'fid_'.get_field('family_id' , $family_query->posts[$i]->ID);
        $f_link = 'fid_'.get_field('family_id' , $family_query->posts[$i]->ID);

    ?>
    <h3> <?php echo esc_attr( get_the_title() ); ?></h3>

    <?php $profile_pic = get_field( 'profile_picture' ); ?>
    <img src="<?php echo esc_url( $profile_pic['sizes']['family_large_thumb'] ); ?>" width="300px" height="300px" style="display:block;" />


    <!-- attempt 1 to create the pager -->

    <a href="https://localhost/adoptionnetwork/adopting-families/fid_20074/">next1</a>
    <a href="https://localhost/adoptionnetwork/adopting-families/<?php echo $f_link ?>">next2</a>


    <?php 
    //attempt 1 to create the pager  
    $older_link = '<a href="/adoptionnetwork/adopting-families/fid_' . ( $paged - 1 ) . '" rel="prev"><</a>';
    $newer_link = '<a href="/adoptionnetwork/adopting-families/fid_' . ( $paged + 1 ) . '" rel="next">></a>';       
    ?>

<?php endwhile; ?>

<?php
// Clean up after the query and pagination.
wp_reset_postdata();
?>

But I have no idea how to create the pager for this case.

NOTE: NOTE: I already used these functions but they didn’t work.

get_next_post_link( '%link', '<i class="far fa-angle-right"></i>' );
get_previous_post_link( '%link', '<i class="far fa-angle-left"></i>' );

previous_post_link(); 
next_post_link(); 

Thanks for you help