1. Code
  2. Theme Development

Add a Responsive Lightbox to Your WordPress Theme

Scroll to top
Read Time: 5 min

After my recent tutorial where I showed you how to Add a Responsive jQuery Slider to Your WordPress Theme, I thought I'd show you how to add a responsive lightbox to your WordPress site.

We're going to be using the incredible fancyBox jQuery plugin (script) to demonstrate the implementation of the lightbox, but the same principles can apply to most lightbox scripts. This tutorial is going to be primarily taught through a 15-minute screencast, but I've also included some brief written instructions too.

The Screencast

Step 1 Include the Files

First thing we need to do is download fancyBox from the fancyBox website. We then want to open up the source folder, where we're going to copy the following files to our theme (note that we're using WordPress' default Twenty Twelve theme):

  • blank.gif
  • fancybox_loading.gif
  • fancybox_overlay.png
  • fancybox_sprite.png
  • jquery.fancybox.css
  • jquery.fancybox.pack.js

It's best to stay organised though, so let's create a folder in our theme's inc directory called lightbox, and in there we'll create three new folders: css, js and images. At this point you also need to create a file called lightbox.js (don't worry about it just yet). We then need to split up the files above into their appropriate locations, so it'll look like the image below.

You'll need to edit the paths to images in jquery.fancybox.css so it matches our new file structure. You can do so by doing a search and replace for:

url(' with url('../images/

Step 2 Enqueue Lightbox Files

Now that we've got the folder above filled with all the required files, we need to actually load them! Open up your functions.php file and add in the following:

What we've done above is enqueued the FancyBox minified script (and by dependency, Wordpress' included jQuery library), our new lightbox.js file, as well as FancyBox's stylesheet. Too easy!

Step 3 Initializing The Lightbox

Remember that lightbox.js file we created earlier? Time to open it up and fill it with some beautiful jQuery! In the screencast above I showed you each example separately so you could better understand how the jQuery actually worked, but below is all of the code combined. Copy this to the lightbox.js file:

Tip: You should only really include the parts of the code above that you need. I've only included everything so you can see the different options for initializing the lightbox.

Step 4 Usage

You can now use the Lightbox! With the above code it's set up to automatically add a lightbox for all links to image files with .jpg, .jpeg, .png or .gif extensions. So the following bit of code would produce a lightbox:

Lightbox Galleries:

You can also create a 'lightbox gallery' by adding the same rel attribute to several links, like so:

However, that same lightbox gallery can also be achieved by just inserting a plain old Wordpress Gallery into your post or page. Just be sure to link the thumbnails to the image files like so:

Video Lightbox:

Also included is video lightbox support, which can be achieved by linking to a video's IFRAME embed URL (find it by looking at a video's embed code from a service like YouTube or Vimeo) and giving it a class of video and fancybox.iframe, like so:

IFRAME Lightbox:

In addition to IFRAMEs in video lightboxes you can embed other IFRAMES, such as Google Maps, by including the same video and fancybox.iframe classes, like the following:


As you can see in the video, some of the images I automatically inserted and applied a lightbox to have captions. These are determined by the title attribute of the link. So for example, see the captions being set in the following piece of code:


Note that FancyBox is licensed under a Creative Commons Attribution-NonCommercial 3.0 license, which means that you can use it freely in non-commercial works with attribution, but you must pay a license fee to use it in commercial projects. You can read more about the license here.



If you download the source files above, please take note that after placing it in your theme's inc directory, you'll need to add the code found in Step 2 to your functions.php file, which enqueues jQuery and all of the fancyBox files.

Alternatively, I also turned this into a free plugin that you can download over on my personal site.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.