How to show contents of a page or post without the header and footer in a WordPress lightbox

Last updated on

Plugin:

Wonder Lightbox Version 9.5 or above

Tutorial:

This tutorial will guide you how to show contents of a page or post without the header and footer in a WordPress lightbox.

There are two steps in this tutorial.

Step 1 - Output the HTML code of the page in the current page

Wonder Lightbox version 9.5 or above supports a shortcode wonderplugin_lightbox_page that can output the contents of a page.

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

<div id="lightboxdiv" style="display:none;position:absolute;top:0;left:0;">
[wonderplugin_lightbox_page id="4053" wpautop=0]
</div>

The code id="4053" specifies the ID of the WordPress page or post. The option wpautop defines whether to replaces double line breaks in the content with paragraph elements.

If your page or post is created with the Elementor editor https://wordpress.org/plugins/elementor/, you can install the AnyWhere Elementor plugin https://wordpress.org/plugins/anywhere-elementor/, and use the following HTML code:

<div id="lightboxdiv" style="display:none;position:absolute;top:0;left:0;">
[INSERT_ELEMENTOR id=4053]
</div>

Disclaimer: We are not associated with the aforementioned plugin "AnyWhere Elementor" in any way, please use the plugin at your own discretion.

Step 2 - Display the page in a lightbox

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

<a href="#lightboxdiv" class="wplightbox" data-width=640 data-height=600>Open page content in a lightbox</a>

An online demo is as follows: Open page content in a lightbox

Please note, the shortcode wonderplugin_lightbox_page only outputs the contents of the post or page, that's, the contents that you have entered in the post or page editor. If the contents require any special CSS or JavaScript that is located in the original page header or footer, the contents may not show up correctly.