Add Nivo Lightbox to WordPress using shortcode function

Age of Article Warning:
This article was originally published 39 months ago. The information, tips and techniques explained may outdated. Examples shown on this page may no longer work. Please consider this when viewing the below content.

A popular jQuery plugin for displaying images, galleries and videos in a lightbox is the Nivo Lightbox. It’s simple to use and responsive which is great for making sure that your photos look great on any device including phones and tablets.

There are some easy to follow instructions on the Dev7Studios website for how to setup, otherwise they also offer a WordPress plugin for purchase.

But if you feel like adding Nivo Lightbox to your WordPress website without using a plugin, you can create a shortcode function and include the required jQuery files following the procedure below. Before you start though, make sure that your theme doesn’t already have a lightbox feature that you can use.

How to add lightbox to your WordPress website

Step 1: Download the files

Download zip file from https://github.com/gilbitron/Nivo-Lightbox

Step 2: Extract files and add to your website

Create a folder called “js” inside of your childtheme folder (if you have followed along in some of my other tutorials you might have already setup this folder). Inside this “js” folder create a new folder called “nivolight”, where you will be adding the required Nivo Lightbox files.

Extract the downloaded zip file. Find the following:

  • “themes” folder
  • “nivo-lightbox.css”
  • “nivo-lightbox.min.js”

and FTP upload them to your “nivolight” folder.

Step 3: Setup options

Create a javascript file to setup the lightbox options and choose the selector for Nivo Lightbox. Inside the file put the following code, and amend as you feel like based on the options available.

/* Nivo Lightbox Scripts */
var nivoeffect = nivolightboxing2.effect;
jQuery(document).ready(function ($) {
    $('a.nivolight').nivoLightbox({
        effect : nivoeffect
    });
});

Save the file as “nivolightboxjs.js” and then FTP upload that file into the “nivolight” folder also.

Notes: the selector ‘a.nivolight’ is to target the <a> links with a class of “nivolight”, and the variable “nivoeffect” is being set to contain a parameter passed from shortcode using wp_localize_script.

Step 4: Create shortcode function

You will need to setup 2 functions, one is for registering the scripts and styles. The second one is for creating the shortcode. Add these functions to your childtheme’s “functions.php” file, or otherwise an mu-plugin file.

function nivolightbox_scripts() {
    wp_register_style('nivolightboxcss',get_stylesheet_directory_uri().'/js/nivolight/nivo-lightbox.css');
    wp_register_style('nivolightboxdefaultcss',get_stylesheet_directory_uri().'/js/nivolight/themes/default/default.css');
    wp_register_script('nivolightbox',get_stylesheet_directory_uri().'/js/nivolight/nivo-lightbox.min.js',array('jquery'),'',true);
    wp_register_script('nivolightboxjs',get_stylesheet_directory_uri().'/js/nivolight/nivolightboxjs.js',array('nivolightbox'),'',true);
}
add_action('wp_enqueue_scripts','nivolightbox_scripts');

function nivolightbox_sc($atts, $content = null){
    $nivolightboxing = shortcode_atts(array(
    'effect' => 'fade',
    'url' => '',
    'thumb' => '',
    'alt' => '',
    'title' => '',
    'type' => '',
    'gallery' => '',
    'text' => ''
    ),$atts);
    wp_enqueue_style('nivolightboxcss');
    wp_enqueue_style('nivolightboxdefaultcss');
    wp_enqueue_script('nivolightbox');
    wp_enqueue_script('nivolightboxjs');
    wp_localize_script('nivolightboxjs','nivolightboxing2',$nivolightboxing);
    $n_effect = esc_attr($nivolightboxing['effect']);
    $n_url = esc_url($nivolightboxing['url']);
    $n_alt = esc_url($nivolightboxing['alt']);
    $n_thumb = esc_url($nivolightboxing['thumb']);
    $n_title = esc_attr($nivolightboxing['title']);
    $n_type = esc_attr($nivolightboxing['type']);
    $n_gallery = esc_attr($nivolightboxing['gallery']);
    $n_text = esc_attr($nivolightboxing['text']);
    if ($n_type === '' && $n_gallery === '') {
        $lightboxoutput = '<a class="nivolight" href="'.$n_url.'" title="'.$n_title.'" ><img src="'.$n_thumb.'" alt="'.$n_alt.'" /></a>';
    } 
    elseif ($n_type === '' && $n_gallery !== '') {
        $lightboxoutput = '<a class="nivolight" href="'.$n_url.'" title="'.$n_title.'" data-lightbox-gallery="'.$n_gallery.'" ><img src="'.$n_thumb.'" alt="'.$n_alt.'" /></a>';
    }
    elseif ($n_type == 'iframe' || $n_type == 'inline') {
        $lightboxoutput = '<a class="nivolight" href="'.$n_url.'" title="'.$n_title.'" data-lightbox-type="'.$n_type.'" >'.$n_text.'</a>';
    }
    else {
        $lightboxoutput = '';   
    }
return $lightboxoutput;
}
add_shortcode('nivobox','nivolightbox_sc');

Notes: the first function registers the scripts and styles, which are only enqueued when the shortcode is included on a page.

Step 5: Using the shortcode

If you simply want to add an image onto your page that will open in the lightbox, then use:

[nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL"]

Clicking on the thumbnail below shows an example.
[nivobox url=”https://www.davidtiong.com/wp-content/uploads/2015/07/bridge-pic1.jpeg” title=”Scenery with bridge – Single Picture” alt=”bridge scenery” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/bridge-pic1-288×192.jpeg”]

If you want to create a gallery of images, then include a classname for eg, “gallery1”:

[nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery1"][nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery1"][nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery1"]

Clicking on a thumbnail below shows this example.
[nivobox url=”https://www.davidtiong.com/wp-content/uploads/2015/07/food-pic1.jpg” title=”A food bowl – 1 of 3″ alt=”Lightbox food bowl” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/food-pic1-188×188.jpg” gallery=”gallery1″][nivobox url=”https://www.davidtiong.com/wp-content/uploads/2015/07/tea-brewing.jpg” title=”Tea brewing – 2 of 3″ alt=”Lightbox tea brewing” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/tea-brewing-188×188.jpg” gallery=”gallery1″][nivobox url=”https://www.davidtiong.com/wp-content/uploads/2015/07/flowers-pic2.jpg” title=”Flowers – 3 of 3″ alt=”Lightbox flowers” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/flowers-pic2-188×188.jpg” gallery=”gallery1″]

If you want to include video(s) in the gallery such as a YouTube or Vimeo URL, then use:

[nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery2"][nivobox url="VIDEO URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery2"][nivobox url="VIDEO URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery2"]

Clicking on a thumbnail below shows this example, the first one is an image, the second two are videos.
[nivobox url=”https://www.davidtiong.com/wp-content/uploads/2015/07/food-pic1.jpg” title=”A food bowl – 1 of 3″ alt=”Lightbox food bowl” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/food-pic1-188×188.jpg” gallery=”gallery2″][nivobox url=”https://www.youtube.com/watch?v=Sz_xVeHV8LI” title=”GoldCoast Video – 2 of 3″ alt=”GoldCoast video” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/screenshot11-188×188.jpg” gallery=”gallery2″][nivobox url=”https://www.youtube.com/watch?v=P_q3BdrFsLI” title=”Singapore Video – 3 of 3″ alt=”Singapore video” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/screenshot12-188×188.jpg” gallery=”gallery2″]

If you want to include an iframe to another page, then use:

[nivobox url="WEB PAGE URL" title="TITLE" text="LINK ANCHOR TEXT" type="iframe"]

Clicking on the link below loads a page in the iframe lightbox.

[nivobox url=”http://www.example.com” title=”Iframe on a webpage” text=”This link opens up in an iframe lightbox” type=”iframe”]

If you want to include some inline content, such as content in a hidden div, then use:

[nivobox url="DIV ID" title="TITLE" text="LINK ANCHOR TEXT" type="inline"]

Clicking on the link below loads the hidden div content in the lightbox.

[nivobox url=”#inline-div-lightbox” title=”Shows inline hidden content” text=”This link opens up a hidden div” type=”inline”]

A lightbox can be a great tool when used on a website, especially when it comes to displaying photo galleries. Do you use a lightbox on your website?

2 thoughts on “Add Nivo Lightbox to WordPress using shortcode function

Comments are closed.