Recently I was writing a plugin for a client. It was a simple plugin to manage invoices and customers. The development is pretty fast thanks to Elliot Condon for his awesome ACF plugin.
One of the plugin’s requirement is user can add a new customer directly from the invoice page. As default, I put a post object field for user to select the existing customer. So I decided to put the add new customer form in a modal box. And after some while looking for, I finally found how to create it using WordPress’ bundled Thickbox.
Enqueueing Thickbox Libraries
First, we need to enqueue Thickbox’s JS and CSS with simply:
add_thickbox();
Create A Trigger Button
Then we need a button to trigger the popup when it’s clicked. It must have .thickbox class so the javascript can handle it properly. To have it button-like visual, append .button class.
Next part is building the URL. It consists of 4 important query args: action, TB_iframe, width, and height. The action value determines our hook when creating the page. So here how the button looks like:
$url = add_query_arg( array(
'action' => 'foo_modal_box',
'TB_iframe' => 'true',
'width' => '600',
'height' => '400'
), admin_url( 'admin.php' ) );
echo '<a href="' . $url . '" class="button button-primary thickbox">' . __( 'Add New Customer', 'foo' ) . '</a>';
In code above, we use add_query_arg() to build our URL. The result would be: http://local.dev/wp-admin/admin.php?action=foo_modal_box&TB_iframe=true&width=600&height=400
Create the Page
We’ll hook to admin_action_{$action} to create our page. By default, we’ll get a blank response when requesting to that page. We can simply testing with an echo and exit.
function foo_render_action_page() {
define( 'IFRAME_REQUEST', true );
iframe_header();
// ... your content here ...
iframe_footer();
exit;
}
add_action( 'admin_action_foo_modal_box', 'foo_render_action_page' );
Note the IFRAME_REQUEST constant, it will remove extra 32px top padding of the <html> added by .wp-toolbar.
iframe_header() and iframe_footer() work like wp_head() and wp_footer() on theme. They will output base HTML page tailored for iframe view. That means no admin bar, no admin menu, just empty page.
Alright, go on and try clicking our button. TADAA! 🙂