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

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

  • Countdown Timer For Genesis

Grid Columns

Reader Interactions

Comments

  1. James Hahn II says

    June 2, 2018 at 6:31 am

    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?

    Log in to Reply
    • James Hahn II says

      June 2, 2018 at 6:57 am

      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

      Log in to Reply
    • Brad Dalton says

      June 2, 2018 at 6:59 am

      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>';	
      }
      Log in to Reply

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