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

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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 Grid Columns

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems