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


Wonder Lightbox Version 9.5 or above


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]

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, you can install the AnyWhere Elementor plugin, and use the following HTML code:

<div id="lightboxdiv" style="display:none;position:absolute;top:0;left:0;">

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.