Show inline content in a light box

Pharéo

Inline content can be simple text, (multiple) images, a contact or subscription form, or anything else you can normally publish on a WordPress page or post.

Prerequisite

You need to have Inline content enabled in your FancyBox settings.

Go to your Settings > Media admin page and activate the Inline option under the FancyBox settings. After saving, there will be a new section called Inline where you can tweak its parameters.

The next steps depend on the editor you are using: the new (Gutenberg) Block editor or the Classic editor or a Classic block (inside the new block editor).

Block editor

When using the block editor, either in combination with a FSE theme or not, the steps are fairly simple but must be followed precisely, otherwise the popup will not function or the correct inline content will not be found. The popup link/button can be placed in post content or among the Widgets or in a FSE template:

  1. Add a new Group block:
    • In the block Settings (gear icon on the right), scroll down to the Advanced section (at the bottom) and give the block a unique* HTML Anchor, for example uniqueID. Make sure the ID is unique so it does not conflict with other IDs used on the same page! In the Additional CSS Class(es) field add the class fancybox-hidden.**
    • Add your desired content inside this new group. It may be a title, some text and a subscribe form or a contact form, or anything else really…
    • Note: If you find that the inline content, once opened in FancyBox, is styled very different than the rests of the page content, then you can try adding the class hentry (or something else that matches the class name used for the main content block by your theme, like content-area for example) to the Group block Additional CSS Class(es) field.
  2. Add a Buttons block outside*** the Group block created in step 1:
    • Give the button its text, like “Subscribe” for example, and set the link to match the unique ID chosen for the hidden section (above) with a “#” in front. So for our example with the ID “uniqueID”, the link must be #uniqueID.
      Subscribe button
    • In the block Settings, find the Advanced section and add the class fancybox-inline in the field Additional CSS class(es).
      Additional classes
    • The button may also get its own ID like fancybox-auto (useful for automatic opening of the light box on page load) but make sure that too does not conflict with other IDs used on the same page!

Save your changes and test the button on the front end 🙂

*) Make sure you use a unique HTML anchor/ID, meaning you must be sure there will only be one ID with that precise name on the front end page. If your popup shows unexpected content, then there is probably a conflict with an existing ID in your theme, your own content or another plugin. Change the inline content ID and matching button target to something else. Make it long and maybe use capitals (which is unusual for most themes), it does not really matter as long as it will be unique and the button and inline content ID match…

**) The class “fancybox-hidden” will cause the content to be hidden on the front end and only be visible when opened in the light box. If you wish the content to always be visible (or for testing purposes) just remove the class from the Advanced section of the wrapping Group.

***) Make sure the button does not end up inside the inline content block or it will be hidden from view on the front end!

Classic editor or Classic block

When using the Classic/TinyMCE editor, either in an older WordPress version or via a plugin, or a Classic block (inside the new block editor) the steps involve switching to the HTML/Text view, revealing the HTML source of your content. This may appear daunting but it is not so complicated if you strictly follow the steps.

Your inline content and link/button can be placed in regular page/post content or in a Text or HTML Widget. When editing a page or post with the Classic editor or a Text widget, switch the editor view to the Text tab at the top of the content field on the right side. When using an HTML widget, you’re already in HTML/Text mode. When working with a Classic block, switch to HTML view via “Edit as HTML” in the context menu ⋮ (three vertical dots on the right, when hovering the block).

A. Add a placeholder for your inline content:

<div id="fancyboxID-1" class="fancybox-hidden hentry" style="width:460px;max-width:100%;"><p>PLACEHOLDER START</p><p>PLACEHOLDER TEXT</p><p>PLACEHOLDER END</p></div>

The class fancybox-hidden is there to hide the content on the public side, until it is opened in the light box.

The div ID, in this exampe fancyboxID-1, must be unique so it does not conflict with other IDs used on the same page! When using the above example for more popups on one page, give the second one the ID fancyboxID-2, the third one the ID fancyboxID-3 and so on…

B. Add your button:

Make sure the button does not end up inside the hidden content block created above. If you’re editing a full page in HTML/Text view, it may be difficult to find the correct place in the code that corresponds with the public front end view, where you wish the button to appear. You may find it by searching for visible text inside the code. Make sur to place the button code on a new line, right after a closing HTML tag like </p> or <! — /wp:paragraph –> but before the next opening tag.

Copy/paste this code:

<p><a href="#fancyboxID-1" class="button fancybox-inline">Subscribe</a></p>

Depending on theme support, you can use a class like button (for example) or a custom class (enter your custom CSS in Appearance > Customize > Custom CSS) to give the link a button appearance. The link can also get a unique ID like id="fancybox-auto" (useful for automatic opening of the light box) but make sure it (too) does not conflict with other IDs used on the same page!

When editing a post or page, scroll to the bottom and add the following content placeholder.

C. Add the content that you wish to display in the light box:

For this, you can switch the editor back to Visual mode. You can then replace the PLACEHOLDER TEXT easily with your own content. This can be text, images, a contact form or a newsletter subscription form or just about anything else. Leave the PLACEHOLDER START and PLACEHOLDER FINISH paragraphs intact, placing and styling your content between them.

After you are done, switch back to Text view and remove the PLACEHOLDER START and PLACEHOLDER FINISH paragraphs, carefully, without deleting the wrapping <div> code.

Finally, switch back to View tab and save your changes.

NOTE: If you find that the inline content shown in FancyBox is styled very different than the rests of the page content, then you might want to change the div tag attribute class="hentry" to something else that matches your theme. Find out what class name is used for the main content on your site and re-use that.