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

  2. By pmdci

  3. By Envy

  4. By Ali

  5. By Vetaemormak

  6. By Sunil

  7. By Ady

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>