Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by ricky james
ricky james
38 Points

foundation modals and wordpress loops

Hi guys,

l am creating a theme in WordPress. l am looking through the li using the WordPress loop. Now for every li l want it to display a different content in the modal. l try using two loops and resetting the post data. But that doesn't seem to work any idea how l can accomplish this?

        <article>

          <div class="thumbnail-block">
          <div class="slider-bg">
          <div class="flexslider flexslider6">
               <ul class="slides">
               <!-- wordpress loop to get category starts here -->
          <?php        $args = array(
                   'post_type' => 'jobs',
                 );
          $latest= new WP_Query( $args );
          if($latest->have_posts()): ?>
              <?php while( $latest->have_posts() ) : $latest->the_post(); ?>
                    <li>
                    <figure><img src="<?php echo get_template_directory_uri(); ?>/images/partnerwise-thumbs-03.jpg" alt="Thumbnail Blank" /></figure>
                    <aside>               
                    <div class="outer-bg">
                    <div class="inner-bg">               
                    <h5><?php the_field('job_title');?></h5>
                    <p class="txt-line"><?php the_field('job_brief_description');?></p>
                    <p class="txt-name"><?php the_field('who_to_contact');?></p>
                    <p class="txt-email"><a href="mailto=<?php the_field('email_of_who_to_contact');?>"><?php the_field('email_of_who_to_contact');?></a></p>
                    </div>
                    </div>
                    </aside>
                    </li>
                    <?php endwhile; ?>
          <?php endif; wp_reset_postdata(); ?>

               </ul>
          </div>
          </div>
          </div>
          <div class="bottom-info"><a href="#" data-reveal-id="our-vacancies-modal">
          <h4><span>OUR VACANCIES</span></h4>
          <div class="icon-bg"><img src="<?php echo get_template_directory_uri(); ?>/images/icon-bar-02.png" alt="Icon" /></div>
          </a>
          </div>
          <!-- wordpress loop to get category starts here -->
          <?php        $args2 = array(
                   'post_type' => 'jobs',
                 );
          $lates= new WP_Query( $args2 );
          if($lates->have_posts()): ?>
              <?php while( $lates->have_posts() ) : $lates->the_post(); ?>
          <div id="our-vacancies-modal" class="reveal-modal yellow-group-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
            <?php the_field('modal_content');?>
            <a class="close-reveal-modal" aria-label="Close">&#215;</a>
          </div>
          <?php endwhile; ?>
          <?php endif; wp_reset_postdata(); ?>
          </article>

Zac Gordon

3 Answers

ricky james
ricky james
38 Points

Thanks for the reply Roberto Alicata Still doesn't seem to work.

Gennah Gallagher
Gennah Gallagher
5,820 Points
Gennah Gallagher
Gennah Gallagher
5,820 Points

Hey, you could try giving each of your queries different global variables e.g. - $lates1, $lates2

There is a little info on the Codex about Multiple Loops that could be a helpful reference https://codex.wordpress.org/Class_Reference/WP_Query

Yojance Rabelo
Yojance Rabelo
1,156 Points
Yojance Rabelo
Yojance Rabelo
1,156 Points

Instead of adding an unnecessary second loop to the page, why don't you rewind the posts. I bet you can even achieve cleaner code this way, but using the rewind_posts(); function: https://codex.wordpress.org/Function_Reference/rewind_posts