How to add a search box to WordPress Grid Gallery

Product

Wonder Grid Gallery Version 17.4 or above

Tutorial

This tutorial will guide you how to add an external search box to the grid galleries created with Wonder Grid Gallery. You can place the search box anywhere on the same page as the gallery, for example, above or below the gallery, or in a sidebar widget etc.

Continue reading

How to open a lightbox gallery popup on clicking a button or text link

This tutorial will guide you how to open a lightbox gallery popup on clicking a button or text link.

There are four steps in this tutorial:

  • Step 1 - Install Wonder Grid Gallery
  • Step 2 - Add a button or text link in WordPress page editor
  • Step 3 - Create a lightbox gallery in Wonder Grid Gallery
  • Step 4 - Add the lightbox gallery to the page

Continue reading

How to add images to the player track list for each audio

Product:

Wonder Audio Player

Tutorial:

This tutorial will guide you how to add a different image to each audio in the WordPress audio player track list.

There are 4 steps in this tutorial:

  • Step 1 - Add an image to each audio in the player
  • Step 2 - Change the track list format and add the image
  • Step 3 - Add CSS code to style the images

Continue reading

How to open PDF files hosted on Dropbox in a WordPress lightbox popup

Product

Wonder Lightbox 9.4 or above, Wonder PDF Embed 1.8 or above

Tutorial

Wonder Lightbox and Wonder PDF Embed use Mozilla PDF.js to display PDF files. By default, PDF.js only supports PDF files that are hosted on the same domain as the webpage. If your PDF files are hosted on Dropbox, PDF.js will not be able to display them and may show an error "An error occurred while loading the PDF".
Continue reading

How to display PDF files hosted on Amazon S3 in WordPress lightbox by configuring CORS policy

Product

Wonder Lightbox 9.4 or above, Wonder PDF Embed 1.8 or above

Tutorial

Wonder Lightbox and Wonder PDF Embed use Mozilla PDF.js to display PDF files. By default, PDF.js only supports PDF files that are hosted on the same domain as the webpage. If your PDF files are hosted on Amazon S3, PDF.js will not be able to display them and may show an error "An error occurred while loading the PDF".

This tutorial will guide you how to configure the CORS policy of your Amazon S3 bucket, so the PDF files can be displayed by Wonder Lightbox and Wonder PDF Embed.
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