Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

open posts in popup window

I am trying to add bootstrap modal in wp_query function to open custom post content in modal window but nothing happens Pls..... help!!!!

<?php

    $args = array(
       'post_type'  => 'offers',
       'meta_query' => array(
          array(
             'key'     => '_wpb_offer_type',
             'value'   => 'Deal',
             'compare' => '='
          )
       ),
    );

    $query = new WP_Query( $args );

?>

    <div class="owl-container">
        <ul id="recent-offers-deals" class="owl-carousel">


            <?php if ( $query->have_posts() ) :  while (  $query->have_posts() ) : $query->the_post(); ?>
                <script>
               $('#Deals<?php the_ID(); ?>').on('shown.bs.modal', function () {
                  $('#myInput').focus()
                })
                </script>
                <li class="offers"> 
                    <div class="thumbnail">
                       <?php the_post_thumbnail(''); ?>
                       <h3 class="offer-fav pull right"><i class="fa fa-heart"></i></h3>
                       <div class="caption">
                            <h3 class="offer-heading"><?php the_title(''); ?></h3>
                            <p class="offer-details">
                               <?php echo get_post_meta( get_the_ID(), '_wpb_offer_details', true ); ?>
                            </p>
                            <p>
                                <a class="tc" data-toggle="tooltip" data-placement="right" title="<?php echo get_post_meta( get_the_ID(), '_wpb_terms_&_conditions', true ); ?>">tc</a>

                                <button type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#Deals<?php the_ID(); ?>">
                                         Activate Now
                                </button>

                            </p>
                        </div><!-- End of caption div -->
                    </div><!-- End of thumbnail div --> 
                </li><!-- End of first coupon -->
                <!-- Modal -->
                    <div class="modal fade" id="Deals<?php the_ID(); ?>">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">Modal title</h4>
                          </div>
                          <div class="modal-body">
                            <p>One fine body&hellip;</p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                          </div>
                        </div><!-- /.modal-content -->
                      </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->



            <?php endwhile; else : ?>
                <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
            <?php endif; ?>


        </ul>
    </div>

1 Answer

Andrew Shook
Andrew Shook
31,709 Points

Try this code. It loads the post via ajax and loads it into a modal with the id of #deals. I added a lot of comments so if it doesn't work perfectly at first you should be able to tweak it to make it work. If you need addition help just post another question here. Hope this helps

<?php if ( $query->have_posts() ) :  while (  $query->have_posts() ) : $query->the_post(); ?>

    <li class="offers">
        <div class="thumbnail">
           <?php the_post_thumbnail(''); ?>
           <h3 class="offer-fav pull right"><i class="fa fa-heart"></i></h3>
           <div class="caption">
                <h3 class="offer-heading"><?php the_title(''); ?></h3>
                <p class="offer-details">
                   <?php echo get_post_meta( get_the_ID(), '_wpb_offer_details', true ); ?>
                </p>
                <p>
                    <a class="tc" data-toggle="tooltip" data-placement="right" title="<?php echo get_post_meta( get_the_ID(), '_wpb_terms_&_conditions', true ); ?>">tc</a>

                    <button type="button" class="btn btn-primary btn-lg btn-block btn-deals" data-toggle="modal" data-target="#deals>" data-url="<?php the_permalink(); ?>">
                             Activate Now
                    </button>

                </p>
            </div><!-- End of caption div -->
        </div><!-- End of thumbnail div -->
    </li><!-- End of first coupon -->



<?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>




<!-- Move this code into the footer.php file and place it before the wp_footer() call. -->

<!-- Modal -->
<div class="modal fade" id="deals">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
    //this code should probably be moved out of the html and into a external js file

   $('.btn-deals').on('click touchend', function () {
        $.ajax({
            url: $(this).attr("data-url"),
            dataType: "html"
        }).done(function(data){
            /*
                here is where things get tricky, because the ajax request has
                returned the post as html page. This means is has the header,
                nav, post content, and footer. So what you need to do is find
                just the content you want using jQuery.
            */


            //this will turn the html into a jQuery object so you can filter through it.
            var html = $(data);

            /*
                use this to find the title of the page. In your wordpress templates try to 
                give your page titles one class like .page-title.

                <h1 class="page-title other-classes"><?php the_title();?></h1>
            */
            var title = html.find(".page-title").text();

            /*
                use this to find your post's content. Just like with the title
                this should be wrapped in an html element that has a class
                shared accross all templates

                <h1 class="page-title other-classes"><?php the_title();?></h1>
                <div class="post-content other-css-class"><?php the_content();?></div>
            */
            var body = html.find(".post-content").html();

            /*
                now that you have the information you need you can put it into 
                the modal. In this example, I gave the modal an id of deals.

            */
            $("#deals .modal-title").text(title);
            $("#deals .modal-body").html(body);



        })
    })
</script>

Thanks sir for giving me elaborated answer. I tried this but i think i am getting something wrong as it is still not working just getting transparent black overlay. I think these steps below where i am getting wrong

         /*
            use this to find the title of the page. In your wordpress templates try to 
            give your page titles one class like .page-title.

            <h1 class="page-title other-classes"><?php the_title();?></h1>
        */

       /*
            use this to find your post's content. Just like with the title
            this should be wrapped in an html element that has a class
            shared accross all templates

            <h1 class="page-title other-classes"><?php the_title();?></h1>
            <div class="post-content other-css-class"><?php the_content();?></div>
        */

Please help!!!!!!!!

And again thanks