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

How to add time marks to WordPress audio player

This tutorial will guide you how to add time marks to a WordPress audio player created with the plugin Wonder Audio Player. When clicking on the time mark, the player will jump to the specified time and start playing.

The tutorial will also guide you how to add play, pause, rewind and forward buttons to the player.

There are two steps in this tutorial:

  • Step 1 - Create an audio player with Wonder Audio Player plugin
  • Step 2 - Add time marks to the audio player

Continue reading

How to create a WordPress Icecast Player

This tutorial will show you how to create an Icecast2 live streaming audio player for your WordPress website.

There are 4 steps in this tutorial:

  • Step 1 - Install Wonder Audio Player
  • Step 2 - Create an audio player to play the Icecast2 streaming
  • Step 3 - Select a skin for the audio player
  • Step 4 - Publish the player

The created demo is as follows:
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