Mostly, we use jquery colorbox to show images in large size. But today, we will “Show Post Content In Pop up” . We will make the popup div inside our template. Lets get started. Follow these simple steps to make such a powerful colorbox popup which will show your posts from wordpress.
Step 1:
Add the following code into your template file. You can give any name to your template say “dcs_popupbox.php”.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <div class="col-sm-12 trainers"> <ul class="row"> <?php $args = array( 'post_type' => 'testimonial', 'posts_per_page' => 3, "order"=>"DESC" ); $loop = new WP_Query( $args ); $id_in = 1; $ul_i = 1; while ( $loop->have_posts() ) : $loop->the_post(); ?> <li class="col-sm-4"> <div class="trainers-in"> <?php $key=_testimonial_avatar; $meta_values = get_post_meta( $post->ID, $key, true ); ?> <?php if ($meta_values !='') {?> <img class="testimonial_img" src="<?php echo $meta_values; ?>" height="113px" width="113px"/> <?php } else{?> <img class="testimonial_img" src="http://wellfityou.com/wp-content/uploads/2015/02/Testimonials.jpg" height="113px" width="113px"/> <?php }?> <br><br> <h1> <?php echo get_post_meta( $post->ID, '_testimonial_by', true ); ?> <h2><?php echo $meta_values1;?></h2> <span class="testimonialexcerpt"><?php echo substr(get_the_excerpt(), 0,70); ?></span> </h1><br><br> <p><a href="#testi-bio1<?php echo $id_in; ?>" class="testi-bio1<?php echo $id_in; ?>">Read More</a></p> <div style="display:none"> <div id="testi-bio1<?php echo $id_in; ?>"> <div class="testi-bio1"> <h1> <?php the_title(); ?> </h1> <?php the_content(); ?> </div> </div> </div> </div> </li> <?php if($ul_i >= 4){ echo "<div class='clearfix'></div></ul><ul class='row'>"; $ul_i = 0; } $id_in++; $ul_i++; endwhile; ?> </ul> </div> |
Step 2:
This is an optional step as in this step, we are going to give some style formatting to the classes used in our template. You can skip this step and go ahead with the step 3. If you would like to give formatting then add the following code into your theme’s stylesheet or directly into your template.
Note: remove <style> tag from code if you are adding this code into your stylesheet file.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <style> .trainers { } .trainers ul { margin-top:50px; margin-bottom:50px; } .trainers ul li { list-style:none; text-align:center; } .trainers ul li .trainers-in { padding:10px; background:#f2f2f2; -moz-transition: all 0.4s ease-out; /* FF3.7+ */ -o-transition: all 0.4s ease-out; /* Opera 10.5 */ -webkit-transition: all 0.4s ease-out; /* Saf3.2+, Chrome */ } .trainers ul li .trainers-in:hover { background:#014D78; } .trainers .trainers-img { height:200px; overflow:hidden; margin-bottom:20px; } .trainers ul li h1 { font-size:20px; } .trainers ul li .trainers-in:hover h1, .trainers ul li .trainers-in:hover a { color:#fff; } .trainers-bio { background:#014D78; padding:20px; color:#fff; text-align:justify; } .testi-bio1 { background:#014D78; padding:20px; color:#fff; text-align:justify; } .trainer-info .thumbnail { text-align:center; } .trainer-info em { font-size:12px; color:#a1a1a1; } </style> |
Sep 3:
Now its time to have some jquery stuff. Add the following code into your footer.php file.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> jQuery(document).ready(function(){ if ( jQuery(window).width() < 768) { <?php for($i=1; $i<=($id_in-1); $i++): ?> jQuery(".testi-bio1<?php echo $i; ?>").colorbox({inline:true, width:"80%"}); <?php endfor; ?> }else{ <?php for($i=1; $i<=($id_in-1); $i++): ?> jQuery(".testi-bio1<?php echo $i; ?>").colorbox({inline:true, width:"80%"}); <?php endfor; ?> } }); </script> |
Here we go. now we have working popup with wordpress posts in it.
Have any query? Comment your queries or post your question inside forum section https://tutsocean.com/questions/
