How to show shortcode content in a WordPress lightbox

Last updated on

This tutorial will show you how to show content created with a shortcode in a WordPress lightbox by using the plugin Wonder Lightbox.

There are two ways to show content created with a shortcode in a lightbox:

  • Method 1 - Add the shortcode to a div on the same page then show the div in a lightbox
  • Method 2 - Add the shortcode to a standalone WordPress page then open the page in a lightbox

Method 1 - Add the shortcode to a div on the same page then show the div in a lightbox

In this method, we add the shortcode to a div on the same page, then display the div in a lightbox.

For example, in the following code, the shortcode [wonderplugin_audio id="56"] will display a WordPress audio player.

We add the shortcode to a div with id lightboxdiv, and use the inline CSS style="position:absolute;top:0;left:-90000px;" to hide the shortcode content from the page. If you also want to show the content on the page, you can remove the inline CSS.

<div id="lightboxdiv" style="position:absolute;top:0;left:-90000px;">
[[wonderplugin_audio id="56"]]
</div>

We then use the following code to open the div in a lightbox:

<a href="#lightboxdiv" class="wplightbox" data-width=300 date-height=310>Open shortcode content in a lightbox</a>

The created demo is as follows: Open shortcode content in a lightbox.

Method 2 - Add the shortcode to a standalone WordPress page then open the page in a lightbox

In this method, first follow this tutorial and create a WordPress page without header, menu, sidebar and footer: How to create a WordPress page without header, menu, sidebar and footer.

Then add your shortcode to the above page. A demo page is as follows: https://www.wonderplugin.com/a-wordpress-page-with-no-header-menu-sidebar-and-footer-etc/. This page only contains an audio player, nothing else.

We can then use the following code to open the page in a lightbox:

<a href="https://www.wonderplugin.com/a-wordpress-page-with-no-header-menu-sidebar-and-footer-etc/" class="wplightbox" data-width=320 date-height=340>Open shortcode content in a lightbox</a>

The created demo is as follows: Open shortcode content in a lightbox.