Adding Lightbox to WordPress Site: Ultimate Guide for Beginners

Lightbox is one of many interesting and popular features for an image-based website. But not everyone knows how to add lightbox to a WordPress website, especially, a beginner. Therefore, we bring in this guide for beginners to help them add lightbox to WordPress websites.

What Is Lightbox and How to add it?

Lightbox is a modal image gallery that displays your image and video by creating a full-screen pop-up and dimming out the rest of the page. For example:

This beautiful and fancy effect is extremely helpful for a portfolio, photography or any image-based website. It allows you to view the image clearly and makes your website more outstanding.

Normally, there are 3 ways to have lightbox for a WordPress website:

• Adding shortcode
• Installing a plugin
• Using a theme that supports lightbox.

For beginners, we suggest that you should use a plugin or find a theme with that feature ready in mind because adding shortcode is only for advanced users.

Display Lightbox If Your Theme Support It

There is nothing to say if your theme already displays the lightbox for galleríe/images. But we know many themes need some more steps to show it. For example, this theme ePortfolio supported lightbox but you need to link the gallery to the media file to show the lightbox.

Normally, there are two options: link to media file or attachment page. When you link image/gallery to an attachment page, a new, separate page containing only the image will be open when you click the image. If you link to a media file, it will show the image only, not the page, like this:

Here is the guide to do it.

First, go to the Post Editor, then click to the gallery.

If you use the Gutenberg Editor, look at the right sidebar, you will see the Link to section.

As for a single image, you have to click this icon on the toolbar:

While in the Classic Editor, the Link to section appears when you create or edit a gallery and single image.

Then, choose Media File and click Insert Gallery to finish. When you Update or Publish the post, click that gallery/image, you will see that the lightbox is running.

If your theme supports lightbox, this action can enable the lightbox for the gallery/image you want. Otherwise, there will be no lightbox at all.

However, the configuration can be different with different themes. For example, some may require you to work in the Customizer, some may need you to insert a link to the attachment page instead of media file. Therefore, you should check the theme carefully.

Whichever theme you use, still, it’s necessary to know how to link a gallery/image to media file because it will be helpful to add lightbox using a plugin below.

Adding Lightbox Using a Plugin

Indeed, adding lightbox is not difficult at all. By searching for the keyword “lightbox plugin”, you will see a host of plugins for this effect. As far as our research, we sort the plugins into two kinds: the complicated plugins and the simple plugins to add lightbox.

As for the complicated plugins, there are a lot more sophisticated options to highly customize the lightbox such as image size, border color, lightbox styles, … For example, the Responsive Lightbox & Gallery and FooBox Image Lightbox have more customization tools. But it’s more difficult to use if you’re a beginner. Besides, the result is not so different from a simple plugin. That’s why we prefer using a simple plugin like Simple Lightbox.

This plugin is easy to use, quite popular with 200,000+ active installations, and rated with 160 five-stars. Moreover, the lightbox design is good.

Step 1: Install and Activate Simple Lightbox Plugin

In your Dashboard > Plugin > Add New, you just need to type “simple lightbox” and click Install the plugin, and then Activate it.

Step 2: Set up Simple Lightbox plugin

In the Plugin > Installed plugins, click Setting in the Simple Lightbox tab.

Activation tab of Simple Lightbox setting

The Activation tab lets you enable/disable some parameters. The most important box you should tick is the Enable Lightbox Functionality, which enables the lightbox for your gallery. If you don’t choose this box, other sections are all meaningless.

The rest of the boxes are optional for you. You can tick to display the lightbox on your homepage, single posts, pages, archive pages, widgets, and menus.

Make sure that you really want lightbox for the right sections because too many lightboxes may make your website a bit glitzy.

Grouping tab of Simple Lightbox setting

Scrolling down, there is the Grouping tab. It will decide the way you display lightbox in the form of a slider or a single image.

Group items: tick it to display your image/gallery like a slider, which allows you to navigate from one to the next image. Only when you turn on this feature, can other sections in this tab take effect. Otherwise, other grouping sections don’t work.

Group items by Post: by giving this box a tick, you group all the items from a single post to a lightbox slider. Do it when you want to group only the images/galleries inside a post and exclude other images/galleries from other posts, widgets, and menus.

Group gallery items separately, Group widget items separately and Group menu items separately: put a tick to each of them to group items in a gallery of a single post, items in a widget or menu items respectively. It means that you just can navigate to the next items in the same gallery, widget or menu in the lightbox slider. We think you should do it when you don’t want to mess up lightboxes in different parts, which may confuse your visitors.

UI Tab of Simple Lightbox Setting

The UI tab has sections to modify the lightbox style. Pay attention to this if you want to custom your lightbox display.

Theme: There are 2 styles for your lightbox. Just choose one that fits your taste.

Resize lightbox to fit in window: highly recommend turning on this section to have a nice display. Otherwise, the image is full-screen and you can’t view the whole image like this.

Enable animations: tick to enable the loading effect.

Untick to disable the effect, making the navigation quicker.

Start Slideshow Automatically: let it move to the next image automatically when you enable this section.

Slide Duration: if you turn on the automatic slideshow section above, you can choose the slide duration here.

Loop through items: do you want to repeat the items after one round of a slide? If yes, click this box.

Overlay Opacity (0 - 1): You can modify the background overlay opacity. The lower the opacity is, the clearer you can view the post behind. For example, we set the opacity as 0,1 so the background can be seen really clearly.

Enable default title: you can choose to display the title of the image by clicking to this box. Here is how the title is shown.

Label Tab of Simple Lightbox

Finally, this tab will let you change the label for each button. But these sections don’t take effect unless you add shortcode when editing the theme. So in this tutorial for beginner, you don’t need to deal with this tab.

When you’ve done with all the settings of Simple Lightbox plugin, click Save Changes right under the Label tab.

Step 3: Link images/gallery to Media File to Display Lightbox

To decide which image/gallery to add lightbox, you have to insert media file link to that image/gallery. If you don’t add link to media file, the lightbox can’t be shown.

Just follow the guide we mentioned in the “Display Lightbox If Your Theme Support It” part. You see, we said that you should definitely know how to do it if you want to use the Simple Lightbox plugin.

The Last Words

Above are the easiest way to add lightbox to your WordPress website. Especially if you’re a beginner, using the Simple Lightbox plugin is a simple and effective way. Depending on your demand, your website and your esthetics, you can choose different lightbox plugin to have the most desirable result. Or you can choose to find a WordPress theme that supports lightbox and configure it to display that effect.

If you want more instructions on complicated lightbox plugins, leave a comment below and keep following us.