Use JavaScript Plugins With WordPress

You’ve found that perfect plugin for your site, but dang, it’s not available for WordPress, it’s a jQuery plugin. Fear not, the following guide will help you set up any jQuery or JavaScript plugin on WordPress.

For this tutorial we’ll look into how to setup Flip, a JavaScript Countdown plugin, for use with WordPress using Snippy a free WordPress plugin.

If you’d rather watch a video of this tutorial, then follow step one below and then open the Snippy tutorial on YouTube.

Step 1. Download and install WordPress plugin Snippy

Snippy is open source and available on GitHub, you can download Snippy from the WordPress plugin page.

With Snippy you can build your own shortcodes and define which resources (bits) are required when the shortcode is used on a page.

A bit can be a Stylesheet, a JavaScript file or a snippet of HTML, CSS or inline JavaScript.

You are probably familiar with shortcodes already. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Snippy allows you to create your own custom shortcodes. A custom Snippy shortcode consists of one or more bits.

Step 2. Adding Bits

We start by adding our Stylesheet, JavaScript and HTML bits. Without bits, no shortcode.

Click the Snippy menu item. Then click on “Add bit”.

1. We’ll call our JavaScript bit “Tick JavaScript”, so it’s easy to find it later.
2. Set type to “Resource”, as we want to upload a file.
3. Click on the file upload control and select the “tick.js” file.
4. Click Save!

When we return to the overview we can now see our bit is listed.

Follow the same same steps for our Stylesheet. Name the bit “Tick Stylesheet” and this time pick the “tick.css” file. Save!

Okay, we’ve added two bits to our bit list. We can now add the final bit, the HTML snippet required for Tick to work. Again click on “Add bit”.

1. Name the bit “Tick Countdown Preset” and set type to “HTML”.
2. Open the countdown preset in your favorite text editor and copy past the preset snippet to the value field.
3. We can now add a placeholder value. Replace the Tick.count.down() part with Tick.count.down('{{due}}'). The due value is now automatically turned into a placeholder and we can use it later in our shortcode.
4. Click Save to finalize this bit.

Okay, we’ve setup all our bits. Ready to move on to the shortcode.

Step 3. Our very own Shortcode

Click “Add shortcode” to open the Shortcode editor.

We’ll name our shortcode “countdown”, all lowercase letters.

Below the name field we can see a list of all available bits. Let’s select all the bits we’ve just created. When done, click Save.

We’ve now created a custom shortcode. Let’s move to the text editor to add it to a page.

Step 4. Adding the Shortcode to a page

Edit one of your pages, best to make sure it’s a wide page so the counter has enough room.

Okay, you found one. Open the text editor, make sure the view tab is selected and click on a location in the view where you want to shortcode to be placed.

1. Now, click on the little Snippy icon. It’ll show a list of available custom shortcodes.
2. Select our “countdown” short code. It will now unfold at the location you had selected showing the available attributes. In this case “due”.
3. Enter a value for the due date of the counter. Flip dates are defined in ISO8601 format so a value like “2018-07-01T12:00:00” would count down to 12 o’clock on July the first of 2018.

Let’s hit the update button and refresh the page. The Flip counter should now be visible on the page. It’s possible that it requires some style adjustments based on the font size and space of your theme. Change the set font sizes in the preset to make it fit perfectly.