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 to control the audio player

Continue reading

How to remove Google Font and disable YouTube connections in WordPress carousel

Product

Wonder 3D Carousel
Wonder Carousel

Tutorial

By default, WordPress carousels created with Wonder 3D Carousel and Wonder Carousel will contain a Google font, and to support YouTube videos, it will also initialise the YouTube API.

This tutorial will guide you how to remove the Google font and prevent the carousel from connecting YouTube.

Continue reading

WordPress Lightbox and Ajax Loading

Product:

Wonder Lightbox Version 9.3 or above

Tutorial:

After installing the plugin Wonder Lightbox, simply adding a class wplightbox to any link will activate the lightbox effect and open the image, video, PDF or webpage in a lightbox popup.

The plugin Wonder Lightbox initialises the lightbox effect in the jQuery document ready event. But if the webpage content is loaded via Ajax (asynchronous JavaScript and XML), the wplightbox links in the content will not have a chance to be initialised and hence will not work.

This tutorial will discuss two types of Ajax loading and provide solutions for each type.

Continue reading

How to activate WordPress plugins on select pages or posts only

By default WordPress will enable all activated plugins on all WordPress posts and pages, and will load all relative CSS and JavaScript plugin files on these pages.

In some cases, you may want to only enable a plugin and load the relative files on some specific pages. For example, if your website has a gallery page, you may want to only enable the gallery plugin on this page, thus speed up the loading of other pages.
Continue reading

How to set up a GDPR content blocker to block YouTube and Vimeo videos in WordPress Grid Gallery

By using the plugin Wonder Grid Gallery, you can create a YouTube and Vimeo video gallery for your WordPress website.

This tutorial will guide you how to set up a GDPR content blocker to block YouTube and Vimeo videos in the gallery before a visitor accepts the consent or if the visitor chooses to not accept the consent.

We will use the free plugin WordPress Real Cookie Banner to set up the content blocker.
Continue reading

How to show product variation swatches in WooCommerce quick view popup

This tutorial will guide you how to show product variation swatches in the WooCommerce quick view popup by using the plugin Wonder Quick View and Variation Swatches for WooCommerce.

There are two steps in the tutorial:

You can check the online demo at WooCommerce Quick View Demo, the product "Ship Your Idea".

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 convert m4a audio to mp3 or HTML5 compatible m4a format on Mac

On Apple platforms, there is a difference between directly playing audio in Safari and playing in an HTML5 audio tag. When directly playing in Safari, it uses the codec in the device, when playing in an HTML5 audio tag, it uses the codec only available for Safari.

So an m4a audio file may play if you directly open the m4a file URL with Safari, but may not play in an embedded HTML5 audio tag.

This tutorial will show you how to convert m4a audio files to HTML5 compatible m4a or mp3 format on Mac by using the Apple Music app.

There are 4 steps in this tutorial.

  • Step 1 - Open the m4a file with the Apple Music app
  • Step 2 - Change the import settings of the Music app
  • Step 3 - Convert the m4a file
  • Step 4 - Drag the file to the desktop

Continue reading