Wordpress Loop passing variables

Question

I am using the Wordpress Loop. I then have a modal popup with more information based on the post.

What I'm currently getting is that when you click the "Read More" Button, It just loads in the first item from the loop. I suspect I need to pass through an ID to the modal and maybe another query runs based on the ID of the post, To load in the appropriate information.

Has anyone achieved this?

My code is as follows :

FIRST LOOP

<div class="team">
                    <?php
                    $args = array( 'post_type' => 'team_member' );
                    $loop = new WP_Query( $args );
                    while ( $loop->have_posts() ) : $loop->the_post();
                    ?>
                    <div class="team_member">
                    <?php the_post_thumbnail('team_member'); ?>
                    <?php the_title(); ?>
                    <a data-toggle="modal" href="#myModal">
                        <img src="<?php bloginfo( 'template_url' ); ?>/assets/img/content/team_read_more.png" alt="Read More" style="border:none;">
                    </a>
                    </div>
                    <?php endwhile; ?>                  
                </div>

MODAL LOOP

<div class="modal hide fade" id="myModal">
                <div class="modal-header">
                  <button data-dismiss="modal" class="close">×</button>
                  <h3><?php the_title(); ?></h3>
                </div>
                <div class="modal-body">
                    <p><?php the_post_thumbnail('team_member'); ?></p>
                    <p><?php the_content(); ?></p>
                    <p><a href="mailto:<?php echo get_post_meta($post->ID, 'email_address', true);?>">
                        <img src="<?php bloginfo( 'template_url' ); ?>/assets/img/content/e_mail_link.png" alt="E-Mail Me" style="border:none;">
                       </a>
                    </p>
                </div>
              </div>

Thanks

skiplecariboo · Accepted Answer · 2012-05-10 12:09:57Z

1

In your first loop :

<a data-toggle="modal" href="#myModal">

myModal is the reference to the id of the html element of your modal :

 <div class="modal hide fade" id="myModal">

So if you want multiple modals, you may just add the wordpress post ID to each element.

Use :

<a data-toggle="modal" href="#myModal-<? the_ID(); ?>">

and

 <div class="modal hide fade" id="myModal-<? the_ID(); ?>">

answered May 10, 2012 at 12:09

skiplecariboo

8622 gold badges9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

StuBlackett Over a year ago

Thats great! I had a feeling the ID would be needed somewhere, Wasnt aware of it being the_ID in the WP Loop. Many Thanks

skiplecariboo Over a year ago

You are welcome! A better approach would be to use only one modal box and change its content before displaying it. But this would require some Javascript and depends on the library you use for the modal.

Collectives™ on Stack Overflow

Wordpress Loop passing variables

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related