Querying custom post type twice on same page

Question

I am trying to make a page that displays a Custom Post Type.

I need for all post to be displayed twice. Once at a list of products and once as a modal. I am able to display the product list on the page but I can't get the second post query for the modals to work.

Products page:

<div>
    <main>
      <?php
        if ( have_posts() ) : ?>

            <header class="page-header">
                <?php
                    the_archive_title( '<h1 class="page-title">', '</h1>' );
                    the_archive_description( '<div class="archive-description">', '</div>' );
                ?>
            </header> <!-- .page-header -->

      <?php
            /* Start the Loop */
            $args = array( 'post_type' => 'kollektion' );
            $loop = new WP_Query( $args );

            if( $loop ->have_posts() ) :
                while( $loop->have_posts() ) : $loop->the_post();
                    get_template_part( 'template-parts/content-kollektion', get_post_format() );
                endwhile;
            endif;

            the_posts_navigation();

        else :

            get_template_part( 'template-parts/content-kollektion', 'none' );

        endif; 

        wp_reset_postdata();
      ?>
    </main> <!-- #main -->
</div> <!-- #primary -->

<!-- modal Kollektion 02 -->
<div class="modalDialog">
    <section class="kollektion-slider">

      <?php
        rewind_posts(); 

        /* Start the Loop */
        $args = array( 'post_type' => 'kollektion' );
        $loop = new WP_Query( $args );

        if( $loop ->have_posts() ) :
            while( $loop->have_posts() ) :
                $loop->the_post();
                get_template_part( 'template-parts/content-kollektion-modal', get_post_format() );
            endwhile;
        endif;

        wp_reset_postdata();
     ?>
    </section>
</div>

content-kollektion-modal.php:

<div id="post-modal<?php the_ID(); ?>">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Modal Box</h2>
     <img src="<?php the_field('image_collection'); ?>" />
</div>
</div>

Answer 1

You can Query a lot of time in the same page and all the query that you execute will work perfect irrespective of the custom post type that you choose.

Note: Once after you finish the Wp_Query at the first time you need to reset the Wp_Query after the execution of the code.

wp_reset_query(); // This will reset all the global variables to "".

wp_reset_query() restores the $wp_query and global post data to the original main query. This function should be called after query_posts(), if you must use that function. As noted in the examples below, it's heavily encouraged to use the pre_get_posts filter to alter query parameters before the query is made.

Not only by this method you can reset the Wp_Query there are other methods that you can follow up for resetting the post data and as well as the $args.

Quick Reference About the Resetting Query options.

1. wp_reset_query()- best used after a query_posts loop to reset a custom query
2. wp_reset_postdata() - best used after custom or multiple loops created with WP_Query
3. rewind_posts() - best for re-using the same query on the same page.

I hope this is a useful round-up of when & how to reset/rewind the WordPress loop

wp_reset_postdata()

$random_post = new WP_query(); 
$random_post->query('cat=3&showposts=1&orderby=rand'); 
while ($random_post->have_posts()) : $random_post->the_post(); 
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
    <img src="<?php echo get_post_meta($random_post->ID, 'featured', true); ?>">
</a>
endwhile;
wp_reset_postdata();

When to use: best used after custom or multiple loops created with WP_Query.

wp_reset_query()

<?php query_posts('posts_per_page=3');
if (have_posts()) : while (have_posts()) : the_post(); ?>

<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

When to use: best used after a query_posts loop to reset things after a custom query.

rewind_posts()

if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php endwhile; endif; ?>

<?php rewind_posts(); ?>

<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>

So, while wp_reset_query and wp_reset_postdata reset the entire query object, rewind_posts simply resets the post count, as seen for the function in the wp-includes/query.php file:

// rewind the posts and reset post index
function rewind_posts() {
    $this->current_post = -1;
    if ( $this->post_count > 0 ) {
        $this->post = $this->posts[0];
    }
}

When to use: best for re-using the same query on the same page.

Answer 2

more than just resetting post data i would reset the whole query:

 wp_reset_query();   // Restore global post data stomped by the_post().

add that line below post data reset (or replace post data reset with this)

i don't believe you'll need rewind posts.

Answer 3

@Michael Already mention it on his comment that did you read about using rewind_posts() with a custom query?? If you don't please read by your self and try to figure out.

Anyway you did wrong on rewind_posts(), Because you used custom query. So use like this.

<?php
// rewind_posts(); 

// /* Start the Loop */
// $args = array( 'post_type' => 'kollektion' );
// $loop = new WP_Query( $args );

$loop->rewind_posts();

if( $loop ->have_posts() ) :
    while( $loop->have_posts() ) :
        $loop->the_post();
        get_template_part( 'template-parts/content-kollektion-modal', get_post_format() );
    endwhile;
endif;
?>

But that's not the only one way to querying CPT multiplying one same page. First see here wp_reset_postdata() or wp_reset_query() after a custom loop?

You just have to restore the global $post variable of the main query loop after a secondary query loop using new WP_Query by using wp_reset_postdata() .

/* Start the Loop */
$args = array( 'post_type' => 'kollektion' );
$loop = new WP_Query( $args );

if( $loop ->have_posts() ) :
    while( $loop->have_posts() ) : $loop->the_post();
        get_template_part( 'template-parts/content-kollektion', get_post_format() );
    endwhile;
    wp_reset_postdata(); 
endif;

Replace this loop of your both loop and it will done the trick.

Turn ON WP_DEBUG to your WordPress site, before you do something. it will help you all the way