Add Countdown Timer To Genesis

Jun 2, 2018

—

This code adds a countdown timer to the site header or nav menu in the latest version of the Genesis Sample child theme.

Order of Header Elements

The solution in this tutorial includes CSS which enables you to re-order the stacking of site header elements at specific screen widths including the title-area, countdown timer and genesis-responsive-menu divs.

Video Demo

Shows the countdown timer displaying in the Genesis header and centered after the site title before the responsive toggle menu icon on smaller screens.

Tested using the Genesis Sample child theme by StudioPress. CSS may need tweaking for use in other Genesis child themes.

Related Tutorials

Countdown Timer For Genesis

CSS Grid Columns

3 responses to “Add Countdown Timer To Genesis”

James Hahn II

June 2, 2018

This is great, Brad. Perfect for the project I need to wrap up this morning. How would I get this to execute in the Header Right menu widget in Centric Pro?

Reply
1. James Hahn II
  
  June 2, 2018
  
  Never mind! Just pieced together the code from here: https://wpsites.net/web-design/add-button-to-genesis-header-right-hook/
  
  Came up with:
  
  [code]
  unregister_sidebar( ‘header-right’ );
  add_action( ‘genesis_header_right’, ‘hook_countdown’, 5 );
  function hook_countdown() {
  echo ‘
  
  ‘;
  }
  [/code]
  
  Changed the color and added a little margin to the Site Header
  
  .site-header .widget area {
  color: #000;
  text-align: right;
  margin: 10px 10px 0px 0px;
  }
  
  And, POW!
  
  Can’t believe I figured that out all by myself! You’ve taught me so much over this past year!! haha
  
  Reply
2. Brad Dalton
  
  June 2, 2018
  
  The easiest way is to add the HTML to a text widget in the header right widget area and use CSS to display the counter inline with your menu.
  
  [code]
  
  [/code]
  
  Or, you could hook it in by changing the hook from genesis_header to genesis_header_right
  
  [code]
  add_action( ‘genesis_header_right’, ‘hook_countdown’, 15 );
  function hook_countdown() {
  echo ‘
  
  ‘;
  }
  [/code]
  
  Reply