How to Pass WordPress Post Title to a Bootstrap Modal Outside of the Post Loop?

If you are seeking to pass WordPress post info to a Bootstrap modal you are at the right place. In this post, I will show the way to pass the post title to the modal using JQuery.

To visualize the modal, I have to place it outside the post (loop) but it’s trigger (button) inside the post.

When you trigger the button the modal will be visible with current post data like the below screenshots.

To do this you have to follow the below code:

1. Pass the post title with the trigger (button) using ” data-formatted=”<?php echo get_the_title();?>” “. Please make sure the button must have inside the post loop. When you clicked the button it’s open a modal.

<a href="#" class="btn btn-primary order" data-toggle="modal" data-target="#ModalID" data-formatted="<?php echo get_the_title();?>">
    <?php echo esc_html__('Order Now', 'your-domain' ); ?>
</a>

2. Modal Code ( Please put the code outside of post loop )

<div class="modal fade order-modal" id="orderModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
           <div class="modal-header">
              <h5 class="modal-title"><?php echo esc_html__('Modal Title', 'your-domain'); ?></h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true"><i class="icofont-close"></i></span>
               </button>
            </div>
            <div class="modal-body">
                <form class="modalForm" method="post" autocomplete="off" id="myform" action="">
                   <div class="row">
                      <div class="col-lg-6 col-md-6">
                          <div class="form-group">
                             <input type="text" value="" name="menuname" id='valueF' class="form-control" required="required" readonly="readonly">
                           </div>
                      </div>

                      <div class="col-lg-12 col-md-12">
                           <button type="submit" name="submit" class="btn btn-primary"> <?php echo esc_html__('Order Now', 'your-domain' ); ?> </button>
                       </div>
                   </div>
               </form>
           </div>
       </div>
   </div>
</div>

3. jQuery Code

<script type="text/javascript"> 
    let order = jQuery('.order'); // order is trigger button class name
    let inputF = jQuery('#valueF'); // valueF form input field ID
    order.on('click', function(){
        let valueF = jQuery(this).data('formatted');
        inputF.val(valueF);
    });
</script>

That’s it. Thanks!

Bonus: Some interesting premium WordPress themes that you might like to see for your next project.

For more details, check out this link. Thanks!

Gunter – Click to view

eCademy –Click to View