Adding Colorbox to Wordpress

Add a Lightbox Gallery to WordPress Posts

By -

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.

What the lightbox effect looks like on the WordPress gallery at the end of this project

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:

  • jquery.colorbox-min.js;
  • colorbox.css and the images folder from one of the five Colorbox skins. These can be found in the folders called example1, 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 example3 folder.

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!

Creating the Main JavaScript File

Colorbox is a jQuery plugin, therefore you need to create a JavaScript file that will contain the necessary initialization and configuration code.

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 (or any other name you prefer for your theme’s main JavaScript file).

Open 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:
[javascript]
(function($){

//All your code goes inside this wrapper

})(jQuery);
[/javascript]

Now your jQuery document has been set up. Let’s keep going!

Share Your Thoughts

Copyright © 2011, 2016 - BWD MEDIA
Web Design & Digital Marketing Agency
Call Now Enquire