WP_Query loop within WP_Query loop

Question

I'm trying to use a custom WP_Query loop within another one to display data from the inner loop independently from the main loop. I found this solution but don't really understand how to use it. Here is the code, it works but the main loop generate duplicate posts.

<?php
// define the main query
$main_args = array(
    'post_type' => 'page',
    'post_parent' => '10',
);
// execute the main query
$the_main_loop = new WP_Query($main_args);
// go main query
if($the_main_loop->have_posts()) : while($the_main_loop->have_posts()) : $the_main_loop->the_post(); 
?> 
    <p>This is the content from the main loop</p>

    <?php
    // define the inner query
    $inner_args = array(
        'post_type' => 'page',
        'post_parent' => '20',
    );
    // execute the inner query
    $the_inner_loop = new WP_Query($inner_args);
    // go inner query
    if($the_inner_loop->have_posts()) : while($the_inner_loop->have_posts()) : $the_inner_loop->the_post(); 
    ?> 
        <p>This is the content from the inner loop</p>
    <?php 
    // end the inner loop, no reset
    endwhile; endif;
    ?> 

    <p>This is another content from the main loop</p>

<?php 
// end the main loop
endwhile; endif; wp_reset_postdata();
?>

Thanks!

Answer 1

It is still totally unclear what you actually want to do, but according to this:

it works but the main loop generate duplicate posts

I can tell you that it is expected output.

Your "main" loop queries and displays all pages which has a parent page ID of 10. Lets say there are 10 pages that matches your "main"query, this will mean your loop will run through 10 cycles if you want to call it that. Think of the loop as a foreach loop as it is essentially just that (but not exactly the same).

Now, within each and every cycle, you are adding another query which queries pages wit a parent ID of 20. Lets say there are also 10. So each and every cycle of the "main" loop will output 10 posts with post parent of 20, 10 times because there are 10 pages with a parent of 10.

Very basic, you have:

// First cycle 
the_post(); // 1st page with parent 10
    // custom query which will display pages from parent 20
// End of first cycle and start of second cycle
the_post();  // 2nd page with parent 10
    // custom query which will display pages from parent 20
// End of second cycle and start of third cycle
the_post();  // 3rd page with parent 10
    // custom query which will display pages from parent 20
etc etc

You should take your second query outside the "main" one to separate them

$main_args = [
    'post_type' => 'page',
    'post_parent' => '10',
];
// execute the main query
$the_main_loop = new WP_Query($main_args);
// go main query
if($the_main_loop->have_posts()) { 
    while($the_main_loop->have_posts()) { 
    $the_main_loop->the_post(); 

        // Display your loop content

    } // endwhile
    wp_reset_postdata(); // VERY VERY IMPORTANT
}

// define the inner query
$inner_args = [
    'post_type' => 'page',
    'post_parent' => '20',
];
// execute the inner query
$the_inner_loop = new WP_Query($inner_args);
// go inner query
if($the_inner_loop->have_posts()) {
    while($the_inner_loop->have_posts()) {
    $the_inner_loop->the_post();

        // Display your loop content

    } // endwhile
    wp_reset_postdata(); // VERY VERY IMPORTANT
}