• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Countdown Timer For Genesis

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 :

  1. # Upload the file named countdown.js to your child theme folder.
  2.  

  3. # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your child themes functions file.
  4.  

  5. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
  6.  

Once you’ve installed the code, open the countdown.js file and change the date on line 4 to match your countdown date.

Download Folder

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>

Animation CSS Grid Columns

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.