I am looking for some assistance in opening WordPress posts in the Bootstrap Modal.

Right now I have a home page with a grid that pull posts.

I have it setup so that each post is in a square box and linked to open the Bootstrap Modal window.

The modal window should pull the data from the post which is clicked.

At this time, it only opens the latest post on the page no matter which post is clicked.

I assume I need to let the model window know which post has been clicked so it can pull the correct data but I am at a loss.

Any help would be appreciated.

Here is my current code:

    <?php get_template_part('templates/page', 'header'); ?>
<?php if (!have_posts()) : ?>

<div class="alert">
  <?php _e('Sorry, no results were found.', 'roots'); ?>
</div>
<?php get_search_form(); ?>
<?php endif; ?>
<div class="row">
  <?php while (have_posts()) : the_post(); ?>
  <?php
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
?>
  <a href="#myModal" data-toggle="modal">
  <div class="span2" style="background: #09F url(<?php echo $src[0]; ?>) center no-repeat !important;">
    <?php get_template_part('templates/content', get_post_format()); ?>
  </div>
  </a>




  <div id="myModal" 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>
    </div>
    <div class="modal-body">
      <p><?php the_post_thumbnail(); ?></p>
    </div>
    <div class="modal-footer">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
  </div>


  <?php endwhile; ?>

I am looking for some assistance in opening WordPress posts in the Bootstrap Modal.

Right now I have a home page with a grid that pull posts.

I have it setup so that each post is in a square box and linked to open the Bootstrap Modal window.

The modal window should pull the data from the post which is clicked.

At this time, it only opens the latest post on the page no matter which post is clicked.

I assume I need to let the model window know which post has been clicked so it can pull the correct data but I am at a loss.

Any help would be appreciated.

Here is my current code:

    <?php get_template_part('templates/page', 'header'); ?>
<?php if (!have_posts()) : ?>

<div class="alert">
  <?php _e('Sorry, no results were found.', 'roots'); ?>
</div>
<?php get_search_form(); ?>
<?php endif; ?>
<div class="row">
  <?php while (have_posts()) : the_post(); ?>
  <?php
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
?>
  <a href="#myModal" data-toggle="modal">
  <div class="span2" style="background: #09F url(<?php echo $src[0]; ?>) center no-repeat !important;">
    <?php get_template_part('templates/content', get_post_format()); ?>
  </div>
  </a>




  <div id="myModal" 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>
    </div>
    <div class="modal-body">
      <p><?php the_post_thumbnail(); ?></p>
    </div>
    <div class="modal-footer">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
  </div>


  <?php endwhile; ?>

• posts

Share Improve this question edited Apr 12, 2013 at 23:54 vancoder 7,9242828 silver badges3535 bronze badges asked Apr 12, 2013 at 23:28 minemindminemind 4111 gold badge22 silver badges66 bronze badges 6

• This sounds like a javascript problem and there is no javascript in the question. – Wyck Commented Apr 13, 2013 at 6:12
• I still can't figure this out. I've been Googling for answers all night long and it blows my mind that I can't find someone with a similar request. – minemind Commented Apr 13, 2013 at 14:20
• It's not a javascript issue. Its a WordPress and PHP issue. I need to somehow let the Modal window know which <div> was clicked so it can reference the correct page ID to pull the correct information depending on which <div> is clicked. – minemind Commented Apr 13, 2013 at 14:22
• It's hard to understand what your talking about, do you want to load via AJAX? – Wyck Commented Apr 13, 2013 at 18:40
• Let me try to be more clear. Lets say I have a custom post type created already and this post type has a page template that shows the posts titles and only the post titles. I want to be able to have the post title, when clicked, open up in the bootstrap model window and contain the meta date: title, content, date, etc. I currently have all of this setup but no matter which post title is clicked, it only opens the most recently added post in the model. I need to somehow make sure the model window knows which post title was clicked so it can open the correct post meta data. Does that help? – minemind Commented Apr 14, 2013 at 1:02

 |  Show 1 more comment

2 Answers 2

Sorted by: Reset to default 1

This has been answered and this is how it was done:

The grid and the modal window are in a loop. I simply added -<? the_ID(); ?> to bot the <a href> calling the modal window. and to the <div id> for the modal window which somehow passes the post ID to the window allowing it to pull in the right information for the post.

    <div class="container" style="margin-top:20px; min-height:500px;" >
  <div class="row">
    <?php 
   $labels = new WP_Query(array(
    'post_type' => 'slider', 
    'posts_per_page' => 1000
    )); 
   while ( $labels->have_posts() ) : 
   $labels->the_post();
  ?>
    <?php
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
?>
    <a href="#myModal-<? the_ID(); ?>" data-toggle="modal" >
    <div class="span2" style="background: #09F url(<?php echo $src[0]; ?>) center no-repeat !important;">
      <?php the_title();?>
    </div>
    </a>




    <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>

To get the wordpress post contents in bootstrap modal -

Call the modal file

<a href="<?php bloginfo('template_url');?>/modal.php?ID=<?php the_ID(); ?>" data-toggle="modal"> Get The Detials </a>

Create the modal.php file in your theme folder

<?php
   require('/wp-blog-header.php');  // Wordpress need to recongnise your modal file actually loads most the WordPress functionality that you're used to using.
   $post_id = $_GET['ID'];
   $queried_post = get_post($post_id);
   $queried_object = get_queried_object();
?>

<div class="modal-dialog">
           <div class="modal-content">
                <div class="modal-header">
                   <h4 class="modal-title" id="myModalLabel"><?php echo $queried_post->post_title; ?></h4>
                   <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</span><span class="sr-only">Close</span></button>
                 </div>
                 <div class="modal-body">
                       <?php
                       echo $queried_post->post_content;
                       ?>
                 </div>
              </div>
</div>