0

I have a WordPress page with a grid that pull posts. Each post is in a box showing the title + thumbnail and upon clicking on it the content of the post should also appear in the modal (namely, pulling the data from the post which is clicked).

I have been looking at this example: Open WordPress Posts in Bootstrap Modal and can get it working via data attributes, namely:

<ul class="thumbnails-x">

<?php 
 $labels = new WP_Query(array(
 'post_type' => 'x', 
 'posts_per_page' => 1000
  )); 
  while ( $labels->have_posts() ) : 
  $labels->the_post();
  ?>

 <li class="yy">

  <?php echo '<div class="thumbnail">';?>
     <a href="<?php echo get_permalink(); ?>">
  <?php the_post_thumbnail('');?></a>

  **<button type="button" data-toggle="modal" 
  data-target="#myModal-<? the_ID(); ?>"><?php the_title();?></button>**

  </li>

 <div id="myModal-<? the_ID(); ?>" class="modal hide fade" 
 tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
  aria-hidden="true">
  <div class="modal-header">
    <h3 id="myModalLabel">
      <?php the_title();?>
    </h3>
    <p>
      <?php the_content();?>
    </p>
  </div>
  <div class="modal-body">
    <?php the_post_thumbnail(); ?>
  </div>
  <div class="modal-footer">
    <button type="button" class="close" data-dismiss="modal" 
   aria-hidden="true">×</button>
  </div>
</div>


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

 </ul>

But unfortunately I just cannot get it working via Javascript. Would be great if anyone can help me with the code and how I can implement the dynamic feature in it? The following just doesnt work, if I have instead of the button:

<a href="#myModal-<? the_ID(); ?>" data-toggle="modal" id="clickme">
  <?php the_title();?>
</a>

and then in the js file the following:

  **$(document).ready(function(){  
   $("#clickme").on
   ("click", function(){ $("myModal-<?the_ID();>").modal();});
   });**

Thank you SO much!

0

Since I'm guessing you're not rendering that Javascript file with PHP, you'll need to send the ID of the post to that anonymous function using something other than PHP. You could use a data attribute in your #clickme <a> like data-id="<?php the_ID(); ?>" and then change your on click to:

  $(document).ready(function(){  
    $("#clickme").on
      ("click", function(){ $("#myModal-" + $(this).attr('data-id')).modal();});
  });

Or something similar to that.

  • Thanks, makes sense - unfortunately havent managed yet to get it working, but this seems to be leading me in the right direction! – anna Sep 16 '13 at 9:54
  • What does your javascript look like now? – murdaugh Sep 20 '13 at 14:23
  • All works now - I shouldnt have used ID, but CLASS, namely .clickme instead of #clickme. Thanks again! – anna Oct 15 '13 at 8:33
1

There are two possible ways to accomplish what you're going for, both described in depth in my blog post: https://allurewebsolutions.com/open-wordpress-post-modal-without-plugin

First Method

The first method requires modifying the template that serves the content you want to appear in the modal. For example, you have a template called modal-content-template.php.

Inside that template we wrap the content we want loaded into the modal with:

<?php if (!$_GET) { ?>
    // content that gets loaded on mobile
<?php } ?>

Full example of a template where we are excluding the WordPress header and footer:

<?php if (!$_GET) { get_header(); } ?>

<article>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <h1 class="page-title"></h1>

  <section class="entry-content cf">
    <?php the_content(); ?>
  </section>

</article>

<?php if (!$_GET) { get_footer(); } ?>

CodePen example for the JS required to make this work

Second Method

The second method is a little more elegant. We use the modalContent.load(post_link + ' #modal-ready'); method to load the modal content.

The modal contact is wrapped in a wrapper container with ID #modal-ready. This can be done without even touching the page template using a function that hooks into the content.

add_action('the_content', 'wrap_content');
function wrap_content($content)
{
    return '<div id="modal-ready">' . $content . '</div>';
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.