WordPress.org

Description

WordPress makes use of a modified version of the ThickBox jQuery library originally created by Cody Lindley.

ThickBox powers the modal lightboxes used in the WordPress admin, including the post editor's "Media" button (prior to WordPress 3.5 only) and the "Details" links on the Plugin "Search Results" screen.

Note: As of WordPress 3.5, the "Media" button for WordPress's post editor no longer utilizes ThickBox, but instead uses a custom Javascript modal. ThickBox is still used for other WordPress components and may still be used by developers.

Development

ThickBox can be leveraged by plugin and theme developers who are in need of modals and want to maintain consistency with the rest of the WordPress admin.

Limitations

WordPress does not provide a way of creating "empty" admin pages for use in a ThickBox. When using ThickBox's iframe feature ( ?TB_iframe=true ), you will need to craft a complete page from scratch, without relying on WordPress core.

When using ThickBox's inline content feature, your content must be nested inside another element within your inline container.

For example, this will work:

<div id="my-content-id" style="display:none;">
     <p>
          This is my hidden content! It will appear in ThickBox when the link is clicked.
     </p>
</div>

This will give you an empty or blank Thickbox modal:

<div id="my-content-id" style="display:none;">
     This is my hidden content! It will appear in ThickBox when the link is clicked.
</div>

Usage

In order to use ThickBox in your own admin customizations, you need to do two things:

• Ensure that ThickBox is loaded by calling <?php add_thickbox(); ?> within your PHP.
• Provide a link ( HTML <a> tag ) that triggers your custom ThickBox.

Likewise, links require two components to function:

• They must have a class of 'thickbox'
• They must include parameters as part of the link's query string

Within your link's href, after the URL you wish to load (such as a custom admin page or HTML file), you must include the following querystring arguments:

width 

The width (in pixels) that you would like to use for your ThickBox.

height 

The height (in pixels) that you would like to use for your ThickBox.

If loading content into an iFrame, also include this querystring argument:

TB_iframe 

If using ThickBox to load a webpage as an iframe, this must be set to TRUE.

If loading inline content, also include this querystring argument:

TB_inline 

1. The url should be an anchor set to #TB_inline.

inlineId 

Set this to the id of the content you wish to load. Content may only be loaded by id.

Example

Loading inline content...

<?php add_thickbox(); ?>
<div id="my-content-id" style="display:none;">
     <p>
          This is my hidden content! It will appear in ThickBox when the link is clicked.
     </p>
</div>

<a href="#TB_inline?&width=600&height=550&inlineId=my-content-id" class="thickbox">View my inline content!</a>	

Loading content from another source or site...

<?php add_thickbox(); ?>
<a href="http://example.com?TB_iframe=true&width=600&height=550" class="thickbox">View the WordPress Codex!</a>

Related

• Javascript Reference - WordPress Javascript API reference
• Administration Menus - Information on creating and customizing administration menus & pages