Adding Countdown Widget to Wordpress Site

This article will walk you through adding the countdown widget to a website running on Wordpress.

Install the 'CSS & Javascript Toolbox' plugin

  1. In the Wordpress Admin area, add a new plugin.
  2. Search for "CSS & Javascript Toolbox"
  3. Install the plugin
  4. Activate the Plugin

Setting up 'CSS & Javascript Toolbox'

Step 1: Navigate to the CSS & Javascript Toolbox menu

Step 2: Click Install

Step 3: Acknowledge the installation time

Step 4: Success!

Step 5: Click Start

Add the Countdown Widget CSS & Javascript Code

Step 1: Add a new code block

Step 2: Name your code block (this is for admin purposes)

Step 3: Make sure your code block is activated

Step 4: The location should be in the "Header"

Step 5: Make the block first

Step 6: On your church online site, go to the tools tab

Step 7: Select "Countdown Widget"

Step 8: Copy the CSS and Javascript code

Step 9: Go back to your Wordpress website and paste the code into your code block

Step 10: SAVE your progress

Step 11: Select the Pages tab

Step 12: Check the pages you want the countdown to appear

Step 13: Save

Add the Countdown Widget HTML

Edit the page on your Wordpress site that you would like the countdown to appear.

Step 1: Copy the HTML code from the church online platform

Step 2: On your Wordpress site, select the Text tab

Step 3: Paste the HTML code into your page

Update your page and click view page to see the result


Success! Your countdown is now active on your site and in sync with any changes made on the church online platform. Above you can see the state if an event is counting down and if the event is live.

Customizations can be made to the CSS to achieve a look that matches your churches brand. You may also add anchor tags in the HTML to create hyperlinks to your church online platform when a user clicks the countdown or Live Now text.

How did we do?

Powered by HelpDocs (opens in a new tab)

Powered by HelpDocs (opens in a new tab)