Codex tools: Log in
WordPress makes use of a modified version of the ThickBox jQuery library originally created by Codey 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.
ThickBox can be leveraged by plugin and theme developers who are need of modals and want to maintain consistency with the rest of the WordPress admin.
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>
In order to use ThickBox in your own admin customizations, you need to do two things:
Likewise, links require two components to function:
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:
If loading content into an iFrame, also include this querystring argument:
If loading inline content, also include this querystring argument:
Loading iFrame content...
<?php add_thickbox(); ?> <a href="http://codex.wordpress.com?TB_iframe=true&width=600&height=550" class="thickbox">View the WordPress Codex!</a>
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>