Open a video lightbox popup on page load and autoplay then close the popup automatically on video end

Product:

Wonder Lightbox

Tutorial:

This tutorial will guide you on how to open a video lightbox popup upon page load, play the video, and then automatically close the popup after the video has finished playing.

At the end of the tutorial, it will also discuss how to redirect to a URL when the lightbox closes.

Continue reading

How to embed a PDF file hosted on Google Drive in a WordPress page or post

This tutorial will guide you how to embed a PDF file hosted on Google Drive in a WordPress page or post.

We will also show you how to open the PDF file in a WordPress lightbox using the plugin Wonder Lightbox.

There are three steps in the tutorial:

  • Step 1 - Share on Google Drive and copy the link
  • Step 2 - Change the format of the Google Drive link
  • Step 3 - Embed the PDF to a WordPress page or post using an iframe
  • Optional - Open the PDF file in a WordPress lightbox

Continue reading

How to load Wonder plugin JS files as non-render blocking and improve the webpage loading performance

Product:

All Wonder Plugins

Tutorial:

By default, Wonder plugins load the plugin JS files in the WordPress header. While this provides best compatibility with all kinds of WordPress themes, JS files in the header will be render-blocking. That's, the webpage will only be rendered after the JS files are loaded.

There are two methods to load the JS files as non-render blocking and fix the issue.

  • First method: load Wonder plugin JS files in the WordPress footer
  • Second method: use a third-party plugin to aggregate the JS files and load it as non-render blocking

We will also discuss plugin conditional loading at the end of this tutorial:

  • Plugin conditional loading: only load plugins on selected pages or posts

Continue reading

How to open a Wistia video in a WordPress lightbox

Product: Wonder Lightbox

Tutorial:

After installing the WordPress plugin Wonder Lightbox, by adding a class name wplightbox to a link, you can easily change the link to a WordPress lightbox popup and use it to open an image or a video in the lightbox popup.

This tutorial will guide you how to open a Wistia video in a WordPress lightbox.

Continue reading

How to show HTML content in a WordPress lightbox

This tutorial will guide you how to show HTML content in a WordPress lightbox by using the plugin Wonder Lightbox.

The tutorial will also discuss how to open the HTML content in the lightbox of a gallery created with Wonder Grid Gallery or a carousel created with Wonder Carousel

There are two steps in this tutorial:

  • Step 1 - Add the HTML content to a div on the webpage
  • Step 2 - Open the div in a WordPress lightbox
  • Additional - Open the div in the lightbox of a gallery created with Wonder Grid Gallery or a carousel created with Wonder Carousel

Continue reading

How to show shortcode content in a WordPress lightbox

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

Continue reading