{"id":210,"date":"2019-01-25T19:30:03","date_gmt":"2019-01-25T11:30:03","guid":{"rendered":"https:\/\/www.intelliwolf.com\/?p=210"},"modified":"2019-01-26T16:31:56","modified_gmt":"2019-01-26T08:31:56","slug":"create-countdown-timer-wordpress-without-plugin","status":"publish","type":"post","link":"https:\/\/www.intelliwolf.com\/create-countdown-timer-wordpress-without-plugin\/","title":{"rendered":"How To Create A Countdown Timer In WordPress Without A Plugin"},"content":{"rendered":"\n

Countdown timers are very useful on things like sales pages or event listings. Most of the decent page builders<\/a> have great looking countdown timers, but sometimes you just want something that looks a specific way and does exactly what you need.<\/p>\n\n\n\n

Fortunately it's pretty easy to create a countdown timer in WordPress without a plugin:<\/strong><\/p>\n\n\n\n

  1. Create a shortcode that takes attributes<\/li>
  2. Convert the string time from the attributes to a usable time format<\/li>
  3. Split the time into segments<\/li>
  4. Style and echo the result<\/li>
  5. Add the shortcode, passing in the time you're counting down to as a shortcode attribute<\/li><\/ol>\n\n\n\n

    This is basically what we're creating:<\/p>\n\n\n\n

    \"\"<\/figure><\/div>\n\n\n\n

    Here's the full code you'll need:<\/p>\n\n\n\n

    \/*** Countdown Timer Shortcode ***\/\nfunction next_event_shortcodes_init() {\n  add_shortcode('next_event', 'next_event_shortcode');\n}\nadd_action('init', 'next_event_shortcodes_init');\n\nfunction next_event_shortcode ($atts = [])\n{\n  \/\/ normalize attribute keys to lowercase\n  $atts = array_change_key_case((array)$atts, CASE_LOWER);\n  if (!array_key_exists(\"date\", $atts)) return false;\n\n  $time_remaining = strtotime($atts['date']) - time();\n\n  if ($time_remaining < 0) {\n    $time_remaining = 0;\n  }\n\n  $total_days_remaining = ceil($time_remaining \/ (60 * 60 * 24));\n\n  if ($total_days_remaining >= 7) {\n    $weeks_remaining = sprintf(\"%02d\", floor($total_days_remaining \/ 7));\n    $days_remaining = sprintf(\"%02d\", $total_days_remaining % 7);\n  } else {\n    $weeks_remaining = sprintf(\"%02d\", 0);\n    $days_remaining = sprintf(\"%02d\", $total_days_remaining);\n  }\n  \n  echo \"\n  <div class='next-event'>\n    $weeks_remaining Weeks, $days_remaining Days\n  <\/div>\";\n}<\/code><\/pre>\n\n\n\n
    The shortcode you need looks like this:<\/p>\n\n\n\n
    [next_event date=\"1 July 2019\"]<\/code><\/pre>\n\n\n\n
    Create a shortcode that takes attributes<\/h2>\n\n\n\n
    The first function hooks into the init<\/em> hook. This just makes sure it doesn't fire off too soon.<\/p>\n\n\n\n
    If you've already got a function hooking into init<\/em>, then just add this line to that function:<\/p>\n\n\n\n
    add_shortcode('next_event', 'next_event_shortcode');<\/code><\/pre>\n\n\n\n
    Otherwise, add the whole function with the hook:<\/p>\n\n\n\n
    function next_event_shortcodes_init() {\n  add_shortcode('next_event', 'next_event_shortcode');\n}\nadd_action('init', 'next_event_shortcodes_init');<\/code><\/pre>\n\n\n\n
    The setup of the shortcode function is what allows you to add an attribute.<\/p>\n\n\n\n
    function next_event_shortcode ($atts = []) {}<\/code><\/pre>\n\n\n\n
    In our example, that attribute will be the date, as a string. The date will be passed in as $atts['date']<\/em>. The form of the date doesn't really matter, as we'll explain when it comes time to add the shortcode.<\/p>\n\n\n\n
    NOTE<\/strong>: For this example, we're just passing in a date. All we care about is weeks and days. You can use this exact format for a date and time; you just have to split the time segments accordingly.<\/p><\/blockquote>\n\n\n\n
    In the next three lines, we do some case normalization and error checking, just to make sure the person implementing the shortcode didn't make a mistake:<\/p>\n\n\n\n
    \/\/ normalize attribute keys to lowercase\n$atts = array_change_key_case((array)$atts, CASE_LOWER);\nif (!array_key_exists(\"date\", $atts)) return false;<\/code><\/pre>\n\n\n\n
    The second line there converts the attribute, just in case the author wrote \"Date\", instead of \"date\".<\/p>\n\n\n\n
    In the third line, we make sure they remembered to give us a date.<\/p>\n\n\n\n
    Convert the string time from the attributes to a usable time format<\/h2>\n\n\n\n
    As mentioned above, all we're getting is a string of the date.<\/p>\n\n\n\n
    Using the magic of PHP, we can convert the string to a usable time format with strtotime($atts['date'])<\/em>.<\/p>\n\n\n\n
    To figure out how much time is left between when the visitor visits the page and the event occurs, we use this code:<\/p>\n\n\n\n
    $time_remaining = strtotime($atts['date']) - time();<\/code><\/pre>\n\n\n\n
    As you can probably gather from that line, time()<\/em> is a PHP function that simply gets \"now\".<\/p>\n\n\n\n
    time() essentially returns the number of seconds between 1 January 1970 00:00 GMT and the present<\/p>http:\/\/php.net\/manual\/en\/function.time.php<\/a><\/em><\/cite><\/blockquote>\n\n\n\n
    The visitor might see the page after the date of the event. We don't want to show them negative time, so we add this next:<\/p>\n\n\n\n
    if ($time_remaining < 0) {\n  $time_remaining = 0;\n}<\/code><\/pre>\n\n\n\n
    That will show them 0 Weeks, 0 Days<\/em>.<\/p>\n\n\n\n
    Split the time into segments<\/h2>\n\n\n\n
    First we want to calculate the total number of days between \"now\" and the event:<\/p>\n\n\n\n
    $total_days_remaining = ceil($time_remaining \/ (60 * 60 * 24));<\/code><\/pre>\n\n\n\n
    The (60 * 60 * 24)<\/em> is because $time_remaining<\/em> is in seconds. We need to convert it into days.<\/p>\n\n\n\n
    We use ceil()<\/em> to round the fraction up to the nearest whole number. That way, if the event is tomorrow, it will show as one day remaining.<\/p>\n\n\n\n
    Next we split the days into weeks and days, if there are more than 7 days remaining, or just into days, if there are fewer.<\/p>\n\n\n\n
    if ($total_days_remaining >= 7) {\n  $weeks_remaining = sprintf(\"%02d\", floor($total_days_remaining \/ 7));\n  $days_remaining = sprintf(\"%02d\", $total_days_remaining % 7);\n} else {\n  $weeks_remaining = sprintf(\"%02d\", 0);\n  $days_remaining = sprintf(\"%02d\", $total_days_remaining);\n}<\/code><\/pre>\n\n\n\n
    Under $weeks_remaining<\/em>, notice we use floor()<\/em> after calculating how many weeks are left. This will round the result down to the nearest whole number. That way, it won't say there are two weeks and one day remaining if there are only eight days left.<\/p>\n\n\n\n
    We use sprintf(\"%02d\", $total_days_remaining)<\/em> to turn the number returned from the calculations into a string. %02d<\/em> is the format for numbers like 03, rather than 3. If you prefer it to be like the latter, you'd use \"%d\"<\/em>.<\/p>\n\n\n\n
    Style and echo the result<\/h2>\n\n\n\n
    Finally, we echo the result, formatted the way we want:<\/p>\n\n\n\n
    echo \"<div class='next-event'>\n    $weeks_remaining Weeks, $days_remaining Days\n  <\/div>\";<\/code><\/pre>\n\n\n\n
    This is the html that will actually be outputted to the front end.<\/p>\n\n\n\n
    If you want to get the look from the example at the top of this tutorial, you can wrap the variables in <span> tags, formatting them to be larger.<\/p>\n\n\n\n
    Notice that the whole thing is wrapped in double quotation marks. That's what allows us to use html and input the variables directly.<\/p>\n\n\n\n
    Add the shortcode, passing in the time you're counting down to as a shortcode attribute<\/h2>\n\n\n\n
    Finally, we add this shortcode wherever we need it to display:<\/p>\n\n\n\n
    [next_event date=\"1 July 2019\"]<\/code><\/pre>\n\n\n\n
    The next_event<\/em> is set in add_shortcode()<\/em>.<\/p>\n\n\n\n
    If you want to use something other than date=\"\"<\/em>, then make sure you change the references to !array_key_exists(\"date\", $atts)<\/em> and $atts['date']<\/em> in the next_event_shortcode<\/em> function.<\/p>\n\n\n\n
    The beauty of doing it this way is that you can use whatever format of date works for you.<\/p>\n\n\n\n
    Some formats you can use:<\/p>\n\n\n\n