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);

?>

Comments

  1. Rikky on October 19, 2008

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

    Reply
  2. John Scott on December 9, 2008

    Great plugin to use the existing Thickbox script.

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

    Regards John

    Reply
  3. pmdci on February 19, 2009

    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 🙂

    Reply
  4. Antonie Potgieter on February 25, 2009

    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

    Reply
  5. Envy on March 10, 2009

    Hello webmaster I like your post…

    Reply
  6. Ali on June 10, 2009

    Great plugin. Thanks a lot!

    Reply
  7. ecommerce web hosting on July 28, 2009

    Good tutorial with ample of information.

    Reply
  8. Scott Bikes on August 4, 2009

    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).

    Reply
  9. suntouch heat in stock on August 4, 2009

    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.

    Reply
  10. Print Services Birmingham on August 11, 2009

    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.

    Reply
  11. How To Stop Snoring on August 15, 2009

    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..

    Reply
  12. Ovafflura on September 4, 2009

    Thanks! Good news 🙂

    Reply
  13. Vetaemormak on September 5, 2009

    Thanks!

    Reply
  14. Ecom advisor on September 14, 2009

    very nive, when I finally got my head round it

    Reply
  15. thuiswerk on September 27, 2009

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

    Reply
  16. Sunil on September 29, 2009

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

    Reply
  17. joomla extensions on October 19, 2009

    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.

    Reply
  18. Finance Mba Program on December 31, 2010

    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

    Reply
  19. Ady on January 31, 2011

    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 !

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

%d bloggers like this: