Integrate Modal Dialog Box Using Built-In ThickBox In WordPress

Modal dialogs sometimes necessarily need to integrate with a WordPress website. Using modal dialog, we can display the content on the top of current page.

When it comes to modal pop up, normally people prefer to use Lightbox or Fancybox library. These are the popular libraries and works pretty well.

To include these libraries in WordPress, we have to download JS and CSS files of a library and include it in the project through the standard way. After that, as per library documentation, we need to wrap content, call the method to open the modal window.

WordPress included the ThickBox jQuery plugin with modified version in its core. And it can be used in place of external libraries. Using this core feature, we get the interface which is same as modal popups in WordPress admin like on media button.

You can give a try for this built-in feature. If it fulfills your needs then it saves a time of integrating external library.

Using ThickBox with inline content, you will get the output something like as shown in the below screenshot.

ThickBox inline content

Modal Dialog Box Using ThickBox

WordPress ThickBox works well with the inline content. One can use shortcode also in the modal dialog. As an example, you can show contact form in the modal window using the contact form 7 shortcode.

Having said that, let’s see how to use ThickBox in WordPress.

For instance, we are displaying dummy inline content on the click of the anchor tag. So, place the below code wherever you want to use the ThickBox.

<?php add_ThickBox(); ?>
<div id="dummy-content-id" style="display:none;">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>

<a href="#TB_inline?width=600&height=350&inlineId=dummy-content-id" title="Inline Content" class="ThickBox">View dummy content!</a>

To use the Thichbox, we need to include first add_ThickBox() method. This function load the library from the core. Next, on the href attribute on anchor tag we have to pass #TB_inline along with width, height and id of a container in which our inline content is wrapped.

Same way if you need to display contact form in the modal dialog, then instead of dummy content you need to place shortcode using the do_shortcode() function of WordPress.

<?php echo do_shortcode('[shortcode_here]'); ?>

That’s it! We hope you understand how to add modal dialog box using ThickBox in WordPress. We would like to hear your thoughts in the comment below.

You may also like to read our articles Redirect To Thank You Page After Contact Form 7 Submission and How to Save Contact Form 7 Submissions to WordPress Database

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

Leave a Reply

Your email address will not be published.