Get images to open in a lightbox by default in WordPress

Learn in this tutorial how to make the images you add to open in a lightbox when clicking on them, by default, with a little bit of code.

Starting with WordPress 6.4, a lightbox feature was added that allows you expand on click an image. However, by default the option is disabled.

You can easily change this setting from the block sidebar, but if you prefer to always have your images to expand on click, it can be a bit cumbersome to change it manually.

In this tutorial I’m going to show you two ways to get the default setting to have the lightbox option on.

Options to make the lightbox setting on by default

Option A. Modify (or create) the file theme.json

In case your theme already has a theme.json file, find the "settings" section (if it doesn’t exist, create it at the same level as "styles") and add the following.

In case your theme doesn’t have one, you have to create a file called theme.json and place it in the root of your theme. I recommend you to take a look at the tutorial where I explain the anatomy of the theme.json file.

Option B. Create a block variation

B1. Register a new block variation

The other option is to create a new block variation. To achieve this, the first thing you have to do is to register the new variations.

To do this create a file called block-variations.js inside the /assets/js/ folder of your theme (if it doesn’t exist you can create it) and add the following code:

The top code variation contains the following fields:

• core/image: the block for which we are creating the variation.
• isDefault: being true indicates that it is a default variation.
• attributes: the attributes of the block.

In this case, neither name nor label are necessary since you are not creating a new variation, but modifying the default one.

We only use one attribute:

• lightbox: the behavior of opening the image when clicking on it (default 'false').

Here we set it to 'true', so that this will be the default setting when a new image block is added.

B2. Enqueue new block variations

Once you have the file where you have registered the styles, you must enqueue them to the theme. To do this add the following snippet to the end of functions.php:

As you can see, it is a very simple process and it can save you (or your client) a lot of time.

This is a simple example that can inspire you to create your own default variations of blocks.

By the way, you can see the given attributes that each block has in the official documentation.

Conclusions

Are you interested in having most of the images to be expanded when clicking on them?

Now you know how to change the default setting to lightbox on in new images.

If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.

Benefits of being a subscriber. 🙂