This tutorial will show you how to add a recent post carousel or a category post carousel to your WordPress. The carousel will automatically update itself when you add new posts to your WordPress.

Continue reading →

Different sliders for desktop and mobile

Last updated on February 23, 2016

Product

WonderPlugin Slider

Question

Some of our pages function better with different skins depending on whether we are using desktop or mobile.

Is there a way to use different skins for desktop and mobile?

Answer

You can create two WordPress sliders, one for mobile, one for desktop.

After you have created two sliders, you can add the following code to your post or page. Please be sure to change the ID value in the code to that of your own sliders.

<div id="largescreen">
[[wonderplugin_slider id="1"]]
</div>

<div id="smallscreen">
[[wonderplugin_slider id="2"]]
</div>

Then you can add the following CSS code to your WordPress theme style.css file to show the small slider when the screen width is less than 640px:

#largescreen {
  display: block;
}

#smallscreen {
  display: none;
}

@media (max-width: 640px) {
  #largescreen {
    display: none;
  }

  #smallscreen {
    display: block;
  }
}

WordPress Live Streaming Audio Player

Last updated on July 5, 2020

Product:

WonderPlugin Audio Player

Question:

I came across your site because it says you have a WordPress Live Streaming Audio Player, but when I click on it, it takes me to just your Wonderplugin Audio Player. Are they the same thing? How would I set up the live feed? The video tutorial didn't show it.

Answer:

The plugin Wonder Audio Player is capable of playing live mp3 streaming URL.

You can view the tutorials on the page: WordPress Live Streaming Player

WordPress Audio Player API Event

Last updated on July 29, 2022

Product:

WonderPlugin Audio Player

Question:

I want to know how to write javascript to catch the event play and stop.

Answer:

You could use the following JavaScript code:

jQuery("#wonderpluginaudio-1").on("amazingaudioplayer.played", function(event, data) {
  console.log(event);
  console.log(data);
});

jQuery("#wonderpluginaudio-1").on("amazingaudioplayer.ended", function(event, data) {
  console.log(event);
  console.log(data);
});

jQuery("#wonderpluginaudio-1").on("amazingaudioplayer.paused", function(event, data) {
  console.log(event);
  console.log(data);
});

jQuery("#wonderpluginaudio-1").on("amazingaudioplayer.switched", function(event, data) {
  console.log(event);
  console.log(data);
});

Please change the number 1 in the above code to the ID of your player.