This jQuery countdown timer can be added anywhere in any Genesis or WordPress child theme. It generates a live countdown in days, hours, minutes & seconds.
Demo Video
Shows the countdown timer added to the header of the Genesis Sample child theme by StudioPress.
Includes CSS for media queries which removes the background gradient and centres the timer on mobile screens.
Installation Steps
There’s 3 steps :
- # Upload the file named countdown.js to your child theme folder.
- # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your child themes functions file.
- # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
Once you’ve installed the code, open the countdown.js file and change the date on line 4 to match your countdown date.
Position
In this example, the timer is hooked in using the genesis_header hook which you can change to any other hook. Or, you can add the following HTML to a text widget, editor or custom block.
<span class="countdown-timer"></span>
Was This Tutorial Helpful?