WordPress comes with built-in gallery functionality. Adding a gallery to a post or page involves performing a few simple steps:
1. Click the Add Media button
2. Click the Create Gallery link
3. Select your images by clicking on them
4. Enter at least the Title and Alt text into the appropriate textbox and click the Create a new gallery button
What WordPress doesn’t offer out of the box is the ability to zoom in on each gallery image with a cool lightbox effect. In fact, you can adjust the gallery settings so that images link to a dedicated page (i.e., attachment page), to the image file itself, or to nothing at all.
In this post, I’m going to show how to integrate the popular jQuery Colorbox plugin by Jack Moore into the native WordPress gallery.
As a result, clicking an image will cause it to pop up with a smooth animation effect. Visitors will be able to read image captions and navigate through the images without leaving the gallery page.
The finished product will be something looking like this.
Why Not Use a WordPress Plugin?
At this point, I can hear you say: “There are plenty of WordPress plugins that make it a snap to add galleries and lightbox functionality to a WordPress site. jQuery Colorbox itself has a number of implementations as a WordPress plugin. Why should I bother coding this functionality myself?”
For one thing, here we’re considering a very specific piece of functionality, i.e., adding lightbox effect just to the WordPress gallery. Most plugins have a lot more to offer, and with it also comes a quantity of extra code. If you’re looking for high flexibility like adding lightbox effects to images in posts and pages, to custom links, or to other kinds of content, adjusting plugin’s settings from the admin panel, etc., then go ahead and take the WP plugin route. However, if your goal is to accomplish a very focused task, as it’s the case right now, running a WP plugin is probably an overkill.
Another reason could simply be personal preference. For myself, I’d rather use WP plugins for back-end tasks like sending a contact form, managing a shopping cart, adding membership or forum functionality, etc. For most tasks related to front-end development, e.g. styling site elements, creating animations, implementing jQuery sliders and lightbox, I opt for the do-it-yourself approach.
Finally, coding is fun, educational (there’s always something new to learn along the way), and in this case it won’t take a lot of your time.
What You’ll Need
To follow along, you’ll need a WordPress installation, preferably on a local server, and a theme that provides CSS styles for the native WordPress gallery. For the purposes of this tutorial, a child theme of any of the themes bundled with WordPress will be fine.
It’s time to dive in!
Getting jQuery Colorbox Into Your Theme’s Files
First things first: download a copy of jQuery Colorbox and unzip the compressed file somewhere in your hard drive.
The files you need to make jQuery Colorbox work are the following:
imagesfolder from one of the five Colorbox skins. These can be found in the folders called
example2, etc, through to
example5. Try each skin out in your browser and pick the one you like best. For this tutorial, I chose the skin contained in the
Next, to keep the project well organized, add a folder to your theme’s files and call it
colorbox. Drop the files listed above inside this folder.
jQuery Colorbox comes with its text strings already translated into an impressive number of languages. The translations are located inside the
i18n folder. There’s no need for you to copy this folder into your project, but it’s important to be aware of it. It’s a great resource if you intend to provide translations for your theme.
Integrating jQuery Colorbox Into Your Theme
Integrating Colorbox into your theme involves a series of steps. Some of these steps deal with the jQuery code necessary to make Colorbox do its job. Another series of steps handles the task of making WordPress ‘aware’ of Colorbox and involves writing PHP code.
Let’s get to work!
Add a new folder to the root of your theme and call it
js. Next, inside the
js folder, create a new file and call it
main.js and enter a jQuery no conflict wrapper to make sure the jQuery
$ sign doesn’t conflict with other scripts using the same alias symbol:
//All your code goes inside this wrapper
Now your jQuery document has been set up. Let’s keep going!