How to save the current slide ID of the carousel to a web browser cookie and navigate to the slide when the user returns to the page

Product:

Wonder Carousel

Question:

We are using Wonder Carousel with more than 50 text content frames to aid our users in a study program.

We would like to know if there is a way to automatically set a cookie at the most current frame so that when a user returns to the page (same device and browser, of course), the most recent frame will open. Right now, the user has to use the arrow to advance a few or may dozens of pages to get back to where they were in their prior session (if the user even remembers).

Continue reading

How to add extra buttons to control a WordPress audio player on the same webpage

This tutorial will guide you how to add your own buttons to play/pause/rewind/fast forward a WordPress audio player created with the plugin Wonder Audio Player.

If the audio player has a playlist, the tutorial will also guide you how to add buttons to play a specific song in the playlist or switch to the previous or next song.

There are two steps in this tutorial:

  • Step 1 - Create an audio player with Wonder Audio Player plugin
  • Step 2 - Add buttons with inline JavaScript to control the audio player
  • Optional - Use custom JavaScript to control the audio player

Continue reading

How to Stop Safari from Automatically Unzipping Downloaded ZIP Files

WordPress plugins are typically distributed in compressed ZIP file format. If you are using Safari on a Mac computer, you might notice that after clicking the download link, instead of receiving a .zip file, you get a folder. This can make it impossible to upload the plugin to your WordPress dashboard.

This issue occurs because Safari automatically unzips downloaded ZIP files. To resolve this, you can either use a different web browser, such as Google Chrome or Mozilla Firefox, to download the plugin file, or you can configure Safari to stop automatically unzipping downloaded ZIP files.

Continue reading

How to use a button to trigger a WordPress popup

Product:

Wonder Popup

Tutorial:

This tutorial will guide you how to use a button or text link to trigger a WordPress popup created with the plugin Wonder Popup. At the end of this tutorial, we will also show you how to trigger the popup using a button created with the plugin MaxButtons https://wordpress.org/plugins/maxbuttons/.
Continue reading

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 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

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