How to Add a Lightbox to WordPress (In 5 Minutes)

Don’t make your visitors squint.

Images inserted in your posts are only a few hundred pixels wide which can make small details hard to see.

If you’ve got gorgeous photos or detailed graphs, let your visitors view them in their full glory!

With a lightbox added to your site, visitors will be able to click on an image and view the full-size version in a popup window, like this:

You get the best of both worlds. You still display a smaller version of the image that fits well in your post and loads quickly, but you also offer a much larger, full-size version of the image for anyone who wants to see it.

Follow the steps in this tutorial and you’ll have a lightbox added to your WordPress site in just a few minutes.

If you want to add a lightbox to your eCommerce store, check out this collection of WooCommerce lightbox plugins.

Add lightboxes to your site

While there are some advanced options available, I like to keep things simple. That’s why I’m recommending the Simple Lightbox plugin by Archetyped.

This no-frills WordPress plugin gives you exactly the functionality you need without any bloat.

You can download the plugin from wordpress.org or search for it via the Plugins menu to install it on your site now.

With the Simple Lightbox plugin installed, you’ll find a new menu named “Lightbox” under the Appearance menu in your admin dashboard:

It just takes a few steps to fully configure the plugin for your site.

Configure the lightbox

The first section, Activation, controls which images should have a lightbox.

As you can see, you can choose page types you want to be affected, and all images found within the content of those pages will have the lightbox feature turned on.

For most people, this configuration will work best:

With this configuration, all of the images in your blog posts will have the lightbox enabled, but it won’t affect the images on other pages on your site (like your “About” page and homepage).

Before moving further, there’s one issue we need to address…

The one annoying issue

In order for the lightbox to work, you need to link your images to their media files, like this:

Before WordPress added the new editor, you could set all of your images to link to their media files automatically, but now you have to link them manually using the toolbar, as pictured in the screenshot above.

All the lightbox plugins work this way, so linking to the images to their media files is a requirement.

So what does this mean for your site?

It means that when you enable the lightbox for your posts, the images in your posts won’t have a lightbox until you link them to their media file and you’ll need to do that for every image you want to have a lightbox.

This slows things down compared to how it used to work, but it does give you total control over which images have a lightbox.

With that out of the way, let’s finish configuring the plugin.

While the default link option isn’t available right now, there’s good reason to believe the WP developers will add it back in a future update.

Create lightbox slideshows

You might be satisfied with a simple lightbox, but the grouping option can be practical for some websites.

The Simple Lightbox plugin can take all the images in your post and turn them into a slideshow. With this feature is activated, when a visitor clicks on an image, they’ll see the normal popup window but with arrows added to the sides so they can navigate through each image in the post.

The slideshow also lets visitors know how many images are in the series at the bottom left, and there’s a play/pause button at the top right added beside the close button.

The slideshow lightbox may or may not make sense for your site, but it is easy to turn off in the Grouping settings if you don’t like it.

If you often add multiple galleries to your posts, you can check the third box to have Simple Lightbox keep the slideshows separated.

While the default design of the lightbox is simple and clean, there are a few customizations settings available.

Customize the styles

There are only two themes (light and dark) and the dark theme simply replaces the white border with a black border.

I would recommend leaving most of the settings as-is, but personally, I find the automatic slideshow feature disruptive, so I check that off. Additionally, you can enable the image titles to display by turning off the last option.

With the customizations finished, there’s just one last tiny step to complete the configuration.

Customize the labels

Simple Lightbox includes labels for all of the buttons in the lightbox.

It is confusing without some background info: these labels aren’t actually visible on the site, but rather, they’re an accessibility feature and are used for your visitors who use screen readers and assistive technology.

The default labels are sensible, but you can customize them in the Labels section if you’d like:

With that, you’re finished customizing the lightbox now added to your WordPress site.

Enjoy your new lightbox

Lightboxes are great for the user experience.

If you expanded the width of your posts to add larger images, you’d hurt the readability of your text and the bigger image files would slow down your site.

With a lightbox, you can give your visitors a great reading experience, and a great viewing experience for your images.

If you enjoyed this tutorial and want to keep customizing more, check out my ultimate guide: 31 Easy Ways to Customize Your WordPress Site.

Thanks for reading, and please share this post if it helped you out.