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

Mahesh Sangam
Mahesh Sangam
71 Points

in Wordpress i used bootstrap theme in my post/pages i have to call other articles in wordpress as a mdal window...

Hello All,

IM in big problem i used bootstrap in my wordpress but in pages i have to use modal window to open other articles posted in wordpress... i given manually from adding in footer.php and i given # id to call that text..in my pages as a modal window.... but my friend want this articles from wordpress so any time he can change the content in wordpress articles...

Now i have a problem how to call each post in modal window to appear that content in other pages of modal window...

i added modal code in footer and in modal body i used show_post('articlepostname'); but this is not working....

even i used get_post('articlepostname'); this is also not worked...

Maybe someone know how to call those article in footer.php modal body...

Or if some one know any plugin that can make this problem solved it;s really big help....

Please guys help me to fix this problem....

4 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Your JavaScript is going to have to figure out when you click to open the module, which piece of content to call and load. Can you post up the code you're using?

Mahesh Sangam
Mahesh Sangam
71 Points

In footer.php i added this modal window to open this page posted in wordpress http://fundpundit.com/equity-funding-preliminary-information-required/

<!--Contact Us Form in Modals-->
<div class="modal fade" id="equity-funding-preliminary-information-required"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Contact Us</h4> </div> <div class="modal-body"> <?php get_template_part('equity-funding-preliminary-information-required'); ?> </div> <div class="modal-footer"> <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->


other way i also checked but not worked..

In codex for wordpress get_post($post_id);

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Okay, first step is to add the proper markup inside of the loop so that each post being output has the markup it needs in order for them to be targeted by the modal call.

Try taking a look at this approach on Stack Overflow: http://wordpress.stackexchange.com/questions/113772/get-content-from-wordpress-posts-in-boostrap-modal-window-javascript-side

Mahesh Sangam
Mahesh Sangam
71 Points

Sir i think i got it!!! but im big confuse where to add what? i added this below code in footer.php

<ul class="thumbnails-x">

<?php $labels = new WP_Query(array( 'post_type' => 'x', 'posts_per_page' => 1000 )); while ( $labels->have_posts() ) : $labels->the_post(); ?>

<li class="yy">

<?php echo '<div class="thumbnail">';?> <a href="<?php echo get_permalink(); ?>"> <?php the_post_thumbnail('');?></a>

<button type="button" data-toggle="modal" data-target="#myModal-<? the_ID(); ?>"><?php the_title();?></button>

</li>

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

<?php endwhile; ?> <?php wp_reset_query(); ?>

</ul>

in header.php i added javascript below code:

$(document).ready(function(){
$("#clickme").on ("click", function(){ $("#myModal-" + $(this).attr('data-id')).modal();}); });

and in post i added this below code <a href="#myModal-<? the_ID(); ?>" data-toggle="modal" id="clickme"> <?php the_title();?> </a>

But im confuse how this will all work and in my post i can see that my post name but i want that modal window to open not to show my post name here....

then finally i added in my post this code for my link <a href="#myModal-<? the_ID('equity-funding-preliminary-information-required'); ?>" data-toggle="modal" id="clickme"> <?php the_title();?> </a>

still it;s not working i have to do something please kindly help me.... im thinking im almost in final possition but still thinking im in beging of this code...

Big Confuse what to add where...

Please help me.. i know im not good programmer!!