How to use WordPress native Thickbox support in front end

Thickbox is as jQuery plugin that WordPress use as it’s main popup window or modal view. It’s already built-in in WordPress so why not use that in front end. No need to download or import any extra files.

Load Thickbox javascript library

Before we can start using Thickbox we need to make sure jQuery is loaded before and then load thickbox jquery plugin and stylesheet. We don’t need to enqueue jQuery because we’ll add that as a dependency and WordPress will add that automatically for us.

wp_enqueue_script('thickbox', null,  array('jquery'));
wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');

Hook that with a function to the init hook.

add_action('init', 'myplugin_thickbox');
function myplugin_thickbox() {
	if (! is_admin()) {
		wp_enqueue_script('thickbox', null,  array('jquery'));
		wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');
	}
}

Markup

To add Thickbox, we only need to add class=”thickbox” and it will automatically add the onclick trigger.

To open image: <a class="thickbox" title="Title" href="http://www.ultimatewebtips.com/wp-content/uploads/2012/02/google_uwt.png">Google search</a>

Try it

To open image: Google search