Menu icon Foundation
Using Reveal Modal with WordPress Loop

I just wanted to add this here in case someone else was wondering how to use the Reveal Modal on individual posts within a WordPress blog page (or any other page displaying multiple posts within the loop).

In my situation, I was trying to add a share link to each post that, when clicked, would display the modal with links to multiple social media services.

The problem was that the post links were the same for every single post within the blog page loop.

The solution is to assign a unique ID to the modal. In WordPress, this can be accomplished by using "the_ID". For example:

<a href="#" class="share_click" title="<?php _e('Share this post','rescue'); ?>" data-reveal-id="shareModal-<?php the_ID(); ?>"><?php _e('Click to Share','rescue'); ?></a>
            
<div id="shareModal-<?php the_ID(); ?>" class="reveal-modal tiny" data-reveal>

<!-- the stuff inside the modal here -->

</div><!-- #shareModal -->

As you can see, you can append the modal ID with to generate a unique ID within the loop.

modalrevealwordpressloop

I just wanted to add this here in case someone else was wondering how to use the Reveal Modal on individual posts within a WordPress blog page (or any other page displaying multiple posts within the loop).

In my situation, I was trying to add a share link to each post that, when clicked, would display the modal with links to multiple social media services.

The problem was that the post links were the same for every single post within the blog page loop.

The solution is to assign a unique ID to the modal. In WordPress, this can be accomplished by using "the_ID". For example:

<a href="#" class="share_click" title="<?php _e('Share this post','rescue'); ?>" data-reveal-id="shareModal-<?php the_ID(); ?>"><?php _e('Click to Share','rescue'); ?></a>
            
<div id="shareModal-<?php the_ID(); ?>" class="reveal-modal tiny" data-reveal>

<!-- the stuff inside the modal here -->

</div><!-- #shareModal -->

As you can see, you can append the modal ID with to generate a unique ID within the loop.