How to create an accessible WordPress HTML5 video player

Player controls in video players are normally buttons. They are not seen by screen readers which makes the player not accessible for blind and vision impaired people.

This tutorial will guide you how to add extra text controls that can be read by screen readers. The text controls include play video, pause video, fast forward, rewind, mute/unmute and go fullscreen.

The tutorial will also show you how to add accesskey attribute to the text controls so the command can be activated with shortcut keys.
Continue reading

How to send automated MailChimp welcome email to WordPress popup subscribers

This tutorial will guide you how to send automated welcome email to MailChimp subscribers that subscribed from WordPress popup forms created with the Wonder Popup plugin.

Wonder Popup is a WordPress popup plugin to create lightbox popup forms, embed forms, corner slide-in forms and notification bars that can help you get more newsletter subscribers.

For how to create an email subscription popup form with Wonder Popup, please view the tutorial: How to create WordPress email subscription popup for MailChimp.
Continue reading

How to display YouTube view count in WordPress YouTube carousel

This tutorial will guide you how to create a WordPress YouTube carousel and display the YouTube video view count. There are 4 steps in the tutorial:

  • Step 1 - Install Wonder Carousel
  • Step 2 - Add YouTube videos or YouTube playlist to the carousel
  • Step 3 - Display YouTube video view count
  • Step 4 - Publish the carousel

Continue reading

How to apply for a Google Drive API key

This tutorial will guide you how to apply for a Google Drive API key. You can use the key to generate Google Drive direct download links for image, audio and video files hosted on Google Drive: Google Drive Direct Link Generator for Image, MP3 and Video Files.

There are 4 steps in this tutorial:

  • Step 1 - Log into the Google Cloud Platform
  • Step 2 - Create a project in Google Cloud Platform dashboard
  • Step 3 - Enable Google Drive API
  • Step 4 - Create a Google Drive API key

Continue reading

WordPress HTML Content Slider

This tutorial will show you how to create a WordPress HTML content slider by using the plugin Wonder Carousel.

You only need to select images, enter text or HTML code for title and description, select a skin, the plugin will create an HTML content slider that you can add to a WordPress page or post.

There are 4 steps in this tutorial:

  • Step 1 - Install Wonder Carousel
  • Step 2 - Add images, enter text or HTML code for title and description
  • Step 3 - Select an HTML content slider skin
  • Step 4 - Publish the slider

Continue reading

How to play DailyMotion videos in WordPress carousel

This tutorial will guide you how to play DailyMotion videos in a WordPress carousel. You can play the video in a lightbox popup when clicking an image in the carousel.

There are 4 steps in this tutorial:

  • Step 1 - Install Wonder Carousel
  • Step 2 - Create a new carousel
  • Step 3 - Play DailyMotion video in a lightbox popup when clicking an image in the carousel
  • Step 4 - Publish the carousel

Continue reading

How to create WordPress Logo Carousel

This tutorial will guide you how to create a WordPress logo carousel. You can link the logos to webpages, configure the carousel to auto scroll and pause the carousel on mouse over.

There are 4 steps in the tutorial:

  • Step 1 - Install Wonder Carousel
  • Step 2 - Create a new WordPress carousel and add logo images
  • Step 3 - Configure the WordPress logo carousel to auto scroll
  • Step 4 - Publish the WordPress logo carousel

Continue reading

WordPress Full Screen Background Slider

This tutorial will guide you how to create a fullscreen background slider for your WordPress. At the end of the tutorial, we will create two kinds of full screen sliders.

The first demo shows the full screen slider in the background, while the page displays the normal content you entered in the page editor: WordPress full screen background slider.

The second demo just shows the page header, menu and the full screen slider, it does not display the normal page content: WordPress full screen slider.

If you want to create a WordPress full screen slider without the page header and menu, please view this tutorial: How to Create a Fullscreen WordPress Slideshow.

Continue reading

Demo Post 10

Condimentum vitae sapien pellentesque habitant morbi. Fermentum dui faucibus in ornare quam. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Libero justo laoreet sit amet. Quam lacus suspendisse faucibus interdum posuere lorem. At in tellus integer feugiat scelerisque varius morbi enim. Et egestas quis ipsum suspendisse ultrices gravida. Duis ut diam quam nulla porttitor massa id neque. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. Dui accumsan sit amet nulla facilisi morbi. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Odio ut sem nulla pharetra. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Mattis molestie a iaculis at erat pellentesque adipiscing commodo elit. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus.

Demo Post 9

Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. Amet purus gravida quis blandit turpis cursus in. Orci a scelerisque purus semper eget duis at tellus at. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Odio morbi quis commodo odio aenean sed. Pharetra convallis posuere morbi leo urna. Mauris augue neque gravida in fermentum et sollicitudin ac orci. Semper risus in hendrerit gravida rutrum quisque non. Neque vitae tempus quam pellentesque nec. Leo vel fringilla est ullamcorper eget nulla facilisi. Ut sem nulla pharetra diam sit amet nisl. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci. Vestibulum lorem sed risus ultricies tristique. Metus dictum at tempor commodo ullamcorper a.