title: Wordpress Custom Post Type and Bootstrap Modal
body: <p>I am using Advanced Custom Posts and Custom Post Types plugin for my WP site.</p>
  
  <p>How can I make a custom post show on the Bootstrap modal depending on the trigger button? I want it to show inside the modal's <code>.modal-body</code>. I found a solution somewhere here but it requires putting the modal syntax inside the <code>while</code> loop and every time there's a new custom post, the modal syntax is repeated which is not nice.</p>
  
  <p>I am still a newbie and studying AJAX / JSON request but can't get it to work. I think it's the best way to do it. From what I know I need to create a separate PHP file but not sure what to code inside.</p>
  
  <p>Can someone please provide an example? I'm stuck for almost a week. Thanks a lot in advance!</p>
  
  <p><strong>Here's my code:</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
  
    &lt;?php $sample_query = new WP_Query( array( 
      'post_type' =&gt; 'sample',
      'category_name' =&gt; 'trending',
      'orderby' =&gt; 'rand'
    ) ); ?&gt;
  
    &lt;?php while( $sample_query-&gt;have_posts() ) : $sample_query-&gt;the_post(); ?&gt;
  
    &lt;?php
      $sample_logo = get_field('sample_logo');
      $sample_body = get_field('sample_body');
    ?&gt;
  
    &lt;div class="col-md-3"&gt;
      &lt;div class="trending-sample"&gt;
        &lt;div class="thumbnail"&gt;
          &lt;a href="#"&gt;
            &lt;img src="&lt;?php echo $sample_logo[url]; ?&gt;" alt="&lt;?php echo $sample_logo[alt]; ?&gt;"&gt;
          &lt;/a&gt;
          &lt;div class="caption"&gt;
            &lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;
            &lt;p&gt;&lt;?php echo $sample_body; ?&gt;&lt;/p&gt;
            &lt;button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"&gt;Open Modal&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;              
    &lt;/div&gt;            
  
    &lt;?php endwhile; ?&gt;        
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My Modal:</strong></p>
  
  <pre><code>&lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;                             
        &lt;div class="modal-body"&gt;
  
          &lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;                  
          &lt;img src="&lt;?php echo $sample_logo[url]; ?&gt;" alt="&lt;?php echo $sample_logo[alt]; ?&gt;"&gt;                 
          &lt;p class="sample-desc"&gt;&lt;?php echo $sample_body; ?&gt;&lt;/p&gt;
  
          &lt;hr class="dashed"&gt;
  
          &lt;p class="lead"&gt;Sample Text&lt;/p&gt;
          &lt;p class="modal-share"&gt;
            &lt;strong&gt;Share:&lt;/strong&gt;
              &lt;span class="sharefb"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
              &lt;span class="sharetwitter"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
              &lt;span class="sharegplus"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-google-plus"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
              &lt;span class="sharemail"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-envelope-o"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
              &lt;button type="button" class="btn btn-danger pull-right" data-dismiss="modal"&gt;&lt;strong&gt;Close&lt;/strong&gt;&lt;/button&gt;
           &lt;/p&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>