Quick Tip: Integrate Colorbox into native Shortcode

Native [Gallery] Shortcodes are good, but not great. In this quick tip, we'll use jQuery to beautify it.

[Gallery] Shortcodes are not very good. You can't disable its default CSS, you can't add or edit CSS classes, you can't edit default properties (this is actually a common shortcode problem)...although these things won't bother most people developing WordPress Or, a weirdo like me might complain! :)

In this quick tip, we'll get rid of the image attachment page and let visitors to our site view images in a jQuery modal box.

One of the best jQuery Lightbox plugins: ColorBox

At less than 5KB (zipped) and supporting a wide range of browsers (even IE6), Colorbox is my favorite jQuery lightbox plugin.

As you can see from the plugin page, it has tons of settings, methods, and hooks so you can customize it the way you want. It also features 5 clean CSS-based themes.

Download the package and extract colorbox.min.js and one of the 5 themes (colorbox.css file and "images" folder) to a file called "colorbox" folder and then upload that folder to your WordPress theme. Add the following code at the end of the colorbox.min.js file before uploading:

jQuery(document).ready(function($) {
	$(".gallery-icon a").colorbox({rel:"gallery"});
});

Shortcode-Ception: Build a shortcode that uses another shortcode

I know this is going to be a little weird, but it seems like the cleanest way. We will create the [jgallery] shortcode.

Tip from Quick Tips: If you plan to change all the gallery shortcodes in your post after creating the [jgallery] shortcode, I recommend using the search regex plugin to search/replace [gallery] [jgallery].

As usual, we'll start by creating a basic shortcode function:

function jgallery_sc() {
	// No parameters? This is madness!
}
add_shortcode('jgallery','jgallery_sc');

Next, we enqueue the CSS and JS files. Don't forget that by specifying the Colorbox scriptdependency, jQuery will automatically enqueue it if it's not already enqueued.

function jgallery_sc() {
	// Enqueue colorbox.min.js (and jQuery if it is not already loaded)
	wp_enqueue_script('colorbox-js', get_template_directory_uri().'/colorbox/colorbox.min.js',array('jquery'));
	// Enqueue colorbox.css
	wp_enqueue_style('colorbox-css', get_template_directory_uri().'/colorbox/colorbox.css');
}
add_shortcode('jgallery','jgallery_sc');

Everything is ready, except we need to use the [gallery] shortcode in this function. We will use the do_shortcode() function and return the [gallery link="file"] shortcode:

function jgallery_sc() {
	wp_enqueue_script('colorbox-js', get_template_directory_uri().'/colorbox/colorbox.min.js',array('jquery'));
	wp_enqueue_style('colorbox-css', get_template_directory_uri().'/colorbox/colorbox.css');
	return do_shortcode('[gallery link="file"]');
}
add_shortcode('jgallery','jgallery_sc');

Completed! After adding this function to your theme's functions.php file, you can start using the [jgallery] shortcode immediately. Let us know your thoughts in the comments below. enjoy! :)