Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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; ?>
share|improve this question
    
This sounds like a javascript problem and there is no javascript in the question. –  Wyck Apr 13 '13 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 Apr 13 '13 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 Apr 13 '13 at 14:22
    
It's hard to understand what your talking about, do you want to load via AJAX? –  Wyck Apr 13 '13 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 Apr 14 '13 at 1:02

1 Answer 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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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