Take the 2-minute tour ×

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 :


<div class="team">
                    $args = array( 'post_type' => 'team_member' );
                    $loop = new WP_Query( $args );
                    <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;">
                    <?php endwhile; ?>                  


<div class="modal hide fade" id="myModal">
                <div class="modal-header">
                  <button data-dismiss="modal" class="close">×</button>
                <div class="modal-body">
                    <p><?php the_post_thumbnail('team_member'); ?></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;">


share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

In your first loop :


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


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(); ?>">


 <div class="modal hide fade" id="myModal-<? the_ID(); ?>">
share|improve this answer
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 –  StuBlackett May 10 '12 at 12:12
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. –  skiplecariboo May 10 '12 at 12:32
add comment

Your Answer


