WP SITES

2661

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

Add Countdown Timer To Genesis

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.

Register or login to access the code :

Register for full access

Related Tutorials

Reader Interactions

Comments

  1. 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?

    • Never mind! Just pieced together the code from here: https://wpsites.net/web-design/add-button-to-genesis-header-right-hook/

      Came up with:

      unregister_sidebar( 'header-right' );
add_action( 'genesis_header_right', 'hook_countdown', 5 );
function hook_countdown() {
	echo '<div id="demo"></div>';
}

      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

    • 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.

      <div id="demo"></div>

      Or, you could hook it in by changing the hook from genesis_header to genesis_header_right

      add_action( 'genesis_header_right', 'hook_countdown', 15 );
function hook_countdown() {
echo '<div id="demo"></div>';	
}

Leave a Reply