Order wp_query by variable set inside the loop - php

Question

I have a custom loop that pulls all the child pages of the current page, and displays them. However, I need to order this query by the $first_row_image variable that is pulled inside the loop.
This is done by grabbing the title row at the end() of an array (The array being a repeater field in Advanced Custom Fields).
I know my below code isn't right, but I can't work out how to do it.
<?php function flo_add_child_pages() {
global $post;
$args = array(
'post_type' => 'page',
'post_parent' => $post->ID,
'cat' => '3368',
'posts_per_page' => -1,
'meta_key' => $first_row_image,
'orderby' => 'meta_value',
'order' => 'ASC'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : ?>
<div class="child-flex">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php
$rows = get_field('breadcrumbs' ); // get all the rows
$first_row = end($rows); // get the first row
$first_row_image = $first_row['title' ]; // get the sub field value
?>
<?php if($first_row_image) : ?>
<a href="<?php the_permalink(); ?>" rel="post-<?php the_ID(); ?>" class="one-half">
<?php echo $first_row_image; ?><i class="fa fa-angle-right rotate-icon" style="float: right; margin-top: 5px;"></i>
</a>
<?php endif;?>
<?php endwhile; ?>
</div><?php wp_reset_postdata(); ?>
<?php endif;
}

Answer 1

In my experience, it's usually better to do complex sorting after the query instead of as part of the query.
For one thing, you defined 'meta_key' => $first_row_image, but $first_row_image is undefined at that point, so the query can't execute on it. For another thing, given the way that ACF stores repeater values, it'd be almost impossible to query on them.
I'd do it this way:
Run the query
Check to see if you have posts
Use usort to write a custom sorting function on the $query->posts array.
<?php
function reorder_by_last_title($page1, $page2) {
$page1_rows = get_field('breadcrumbs', $page1['ID']); // get all the rows
$page1_first_row = end($page1_rows); // get the first row
$page1_first_row_image = $page1_first_row['title']; // get the sub field value
$page2_rows = get_field('breadcrumbs', $page2['ID']);
$page2_first_row = end($page2_rows);
$page2_first_row_image = $page2_first_row['title'];
return $page1_first_row_image > $page2_first_row_image;
}
function flo_add_child_pages() {
global $post;
$args = array(
'post_type' => 'page',
'post_parent' => $post->ID,
'cat' => '3368', // Not sure why this is needed-- did you enable categories for pages?
'posts_per_page' => 500, // Use a big number instead of -1
);
$child_pages_query = new WP_Query($args);
if ($child_pages_query->have_posts()) :
// Reorder child pages by last breadcrumbs title.
usort($child_pages_query->posts, 'reorder_by_last_title' );
?>
<div class="child-flex">
<?php while ($child_pages_query->have_posts()) : $child_pages_query->the_post(); ?>
<?php
$rows = get_field('breadcrumbs'); // get all the rows
$first_row = end($rows); // get the first row
$first_row_image = $first_row['title']; // get the sub field value
?>
<?php if ($first_row_image) : ?>
<a href="<?php the_permalink(); ?>" rel="post-<?php the_ID(); ?>" class="one-half">
<?php echo $first_row_image; ?><i class="fa fa-angle-right rotate-icon"
style="float: right; margin-top: 5px;"></i>
</a>
<?php endif; ?>
<?php endwhile; ?>
</div><?php wp_reset_postdata(); ?>
<?php endif;
}