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
With Snippy you can build your own shortcodes and define which resources (bits) are required when the shortcode is used on a page.
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
Click the Snippy menu item. Then click on “Add bit”.
- Set type to “Resource”, as we want to upload a file.
- Click on the file upload control and select the “tick.js” file.
- 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”.
- Name the bit “Tick Countdown Preset” and set type to “HTML”.
- Open the countdown preset in your favorite text editor and copy past the preset snippet to the value field.
- We can now add a placeholder value. Replace the
duevalue is now automatically turned into a placeholder and we can use it later in our shortcode.
- 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.
- Now, click on the little Snippy icon. It’ll show a list of available custom shortcodes.
- Select our “countdown” short code. It will now unfold at the location you had selected showing the available attributes. In this case “due”.
- 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.
That’s all there is to it! Have fun!