WordPress : Build a Thickbox plugin

In this guide/tutorial, I will show you how to build a WordPress Thickbox plugin which allows you to use the Thickbox library on your WordPress website and display images in an overlay on the front-end of your site.

If you haven’t written a WordPress plugin before, I suggest that you look at the Codex reference for some guidance as to how the process works. And, for people looking for more technical web design, you can check out ecommercepartners.net for professional consulting.

Before you get started, you will need a site with a WordPress installation on which you can work and develop. Preferably a non-production site since you might need to do debugging throughout the development process.

Start off by creating a “wp-thickbox” folder inside the “wp-content/plugins/” folder of the WordPress installation. All files of your plugin will be placed inside this “wp-thickbox” folder of yours. Then create a new file named “wp-thickbox.php” inside of this “wp-thickbox” folder and open it so that you can start coding inside this file.

First and most importantly, you need to create a comment block inside the “wp-thickbox.php” file to tell your WordPress installation about your plugin. Note that this is a PHP comment block and needs to be inserted inbetween PHP tags. Here is an example :

/*
Plugin Name : Thickbox
Plugin URI: http://domain.com
Author: First Last
Author URI: http://domain.com
Description: Display images in overlays on your WordPress website
Version: 1.0
*/

The values shown above is rather self explanatory. You may change the values according to your preference. The “Plugin Name” is the name of the plugin. The “Plugin URI” is the URL of the plugin page. The “Author” is the full name of the person (you) who wrote the plugin. The “Author URI“  is the URL of the page of the author. The “Description” is a short summary of what the plugin’s purpose is. The “Version” is the version number of the plugin. With this done, the plugin should now show up in the “Plugins” section of your WordPress dashboard and you can activate it in the list.

Now start coding below the comment block shown above, still inside the PHP tags. We need to execute the add_action function of WordPress twice and hook two of our custom functions (we’ll be writing shortly) to the “wp_head” action hook. Why do we hook two functions to the “wp_head” action hook and not just one? The reason is the priority. The one function needs to be hooked at priority 1 (highest, most important) and the second function needs to be hooked at priority 10 (default, normal importance).

The first function will be named “tb_enqueue” and will be hooked at priority 1 in order to enqueue our scripts for later usage. Lets write the action hook execution and then the custom function. First hook the function.

add_action('wp_head', 'tb_enqueue', 1);

Then lets write the tb_enqueue function above that.

function tb_enqueue() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('thickbox');
}

The function above will safely enqueue the jQuery and Thickbox libraries, telling WordPress that these libraries are needed on the front-end of the WordPress website. When WordPress outputs the HEAD section of the site, it will insert SCRIPT tags for these two scripts (and dependencies) into the HEAD section of the front-end of the site. So our libraries will now be ready for use.

Lets hook another function at priority 10 (default) to the “wp_head” action hook. We’ll name this function “tb_inject” and it will insert the CSS stylesheet of Thickbox into the HEAD section of the front-end. Additionally, it will create two new Javascript global variables related to Thickbox to ensure that the Thickbox images are correctly linked to. Since WordPress itself only uses the Thickbox library in the back-end dashboard, it uses a relative path, therefore we need to modify it. Lets execute the hook.

add_action('wp_head', 'tb_inject', 10);

Now we need to create the function named “tb_inject” above that.

function tb_inject() {
    ?>

    <link rel="stylesheet" href="<?= get_option('siteurl'); ?>/<?= WPINC; ?>/js/thickbox/thickbox.css" type="text/css" media="screen" />

    <script type="text/javascript">
    var tb_pathToImage = "<?= get_option('siteurl'); ?>/<?= WPINC; ?>/js/thickbox/loadingAnimation.gif";
    var tb_closeImage = "<?= get_option('siteurl'); ?>/<?= WPINC; ?>/js/thickbox/tb-close.png"
    </script>

    <?php
}

With that done, our plugin is ready for use. Ensure that the plugin has been activated from the “Plugins” section of your WordPress dashboard. With the plugin active, put one or more images into a post/page and in HTML view, add class=”thickbox” to a link. The A HREF tag should link to an image. When the link is clicked, the image it links to will be displayed in an overlay on the page.

The full code is below, or you can download the plugin directly from Lost-In-Code

<?php

/*
Plugin Name: My Thickbox
Plugin URI: http://domain.com
Author: First Last
Author URI: http://domain.com
Description: Display images in overlays on your WordPress website
Version: 1.0
*/

function tb_enqueue() {
	wp_enqueue_script('jquery');
	wp_enqueue_script('thickbox');
}

function tb_inject() {
	?>

	<link rel="stylesheet" href="<?= get_option('siteurl'); ?>/<?= WPINC; ?>/js/thickbox/thickbox.css" type="text/css" media="screen" />

	<script type="text/javascript">
	var tb_pathToImage = "<?= get_option('siteurl'); ?>/<?= WPINC; ?>/js/thickbox/loadingAnimation.gif";
	var tb_closeImage = "<?= get_option('siteurl'); ?>/<?= WPINC; ?>/js/thickbox/tb-close.png"
	</script>

	<?php
}

add_action('wp_head', 'tb_enqueue', 1);
add_action('wp_head', 'tb_inject', 10);

?>
  • http://datainfos.phreesite.com Rikky

    Now this some great info!!! Thanks a lot!

  • http://www.thailandrealestatemagazine.com John Scott

    Great plugin to use the existing Thickbox script.

    How do I get it to work with the [gallery] shortcode?

    Regards John

  • pmdci

    Hi Antonie,

    Great code, thanks a lot! However I have the same query as John. How can we make the [Gallery] shortcode work with this plug-in?

    This would be a great second-part of the tutorial :-)

  • http://tribulant.com Antonie Potgieter

    Hi there,

    I’ll write a follow-up tutorial on here about how to use the [gallery] shortcode with this plugin. Please subscribe to the newsletter and/or RSS feed in order to be notified.

    All the best,
    Antonie

  • http://www.cssenvy.com Envy

    Hello webmaster I like your post…

  • http://www.tolga.gen.tr Ali

    Great plugin. Thanks a lot!

  • http://www.gnethosting.net ecommerce web hosting

    Good tutorial with ample of information.

  • http://www.eurekacyclesports.co.uk/ Scott Bikes

    We already know that WordPress is showing Thickbox in its backend (wp-admin). We can call the same Thickbox in the WordPress theme also. It is very simple and it will help to remove your Thickbox plugin(if you are using it).

  • http://www.buyfloorheat.com/ suntouch heat in stock

    I find clicking a button faster than go down through the html adding the classes. In fact, that’s the way I used to work with this plugin, I had to add the class manually. Of course, it was a PITA when I had a lot of images, so I sat down and coded the plugin for TinyMCE so I could do this manually.

  • http://www.irongategroup.co.uk/businessprintservices.aspx Print Services Birmingham

    I really dig this. I found one quirk. If your jpegs have uppercase file extensions thickbox will not display them. The page goes grey but no image is displayed. Took me a minute to figure out why they weren’t working. I haven’t tried with png or gif, but I imagine it’s the same. Just thought I’d throw that out there in case someone else has the same problem.

  • http://www.snoremenders.co.uk/ How To Stop Snoring

    Nice plugin..it’s really help for wp user who don’t want to get into code..just simply click the button in TinyMCE, the thickbox effect is applied to the image..

  • http://lancecpljoshuambernard.blogspot.com/ Ovafflura

    Thanks! Good news :)

  • Vetaemormak

    Thanks!

  • http://www.ecommerceadviser.com Ecom advisor

    very nive, when I finally got my head round it

  • http://www.verdienonlinejegeld.nl/thuiswerk.html thuiswerk

    wp-Thickbox is a great addon, you just made it available to me(beginner level) and other inexperienced users.

  • http://www.myhtmlworld.com Sunil

    we can make the thickbox in wordpress without a plugin. http://www.myhtmlworld.com/wordpress/create-thickbox-wordpress.html

  • http://tribulant.com Antonie Potgieter

    Sunil: we can make the thickbox in wordpress without a plugin. http://www.myhtmlworld.com/wordpress/create-thickbox-wordpress.html

    This is essentially what the code above does. The link you showed just executes that in a more simplified manner.

  • http://www.j-ext.com joomla extensions

    For these extensions I would hope the server-side folks would avoid using specific server-side extensions on html pages sent to the browser. In a perfect world, in my head, the server should parse html pages for those specific server-side technologies. In most situations I would hope people would call a directory, and if not that then an html file. So with that in mind, I didn’t add them to the default, but I’m definitely on the fence.

  • Pingback: IE6 Drop Down Menu Plugin for WordPress “twentyten” Theme – sara cannon

  • http://www.excite.com/education/programs/finance-mba-program Finance Mba Program

    WordPress is really a powerful cms which is really managed very well we have to just little optimized for seo and then see the result

  • http://www.rcaieftina.net Ady

    Is this working on the latest version of WordPress 3.0.4 ? I don’t want to risk anything or to destroy my website/ Is it working ? Thank you !