{"id":100823,"date":"2020-03-23T15:26:03","date_gmt":"2020-03-23T20:26:03","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&#038;p=100823"},"modified":"2024-01-01T06:12:10","modified_gmt":"2024-01-01T12:12:10","slug":"add-countdown-timer-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/add-countdown-timer-wordpress\/","title":{"rendered":"How to Add a Countdown Timer in WordPress"},"content":{"rendered":"\n<p>When you\u2019re creating your WordPress site, you may need to incorporate tools, designs, and features that help you promote events or other time-sensitive offerings. Using a countdown timer widget or plugin can make achieving that a lot easier.<\/p>\n\n\n\n<p>With a WordPress countdown timer widget, you can make it simpler for site owners and visitors to keep track of specific dates and times. Plus, there are a handful of countdown plugins that make adding one to your site a quick process.&nbsp;<\/p>\n\n\n\n<p>In this post, we\u2019ll explain when to use a countdown timer and what a WordPress countdown timer widget is. Then we\u2019ll walk you through three of the best options for adding a countdown timer in WordPress using a plugin. Let\u2019s get started!<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">When to Use a Countdown<\/h2>\n\n\n\n<p>A countdown timer can be used to showcase different milestones, such as business anniversaries. You can also use one to help build anticipation for an upcoming event (such as a new product launch), promote the start of a sale, or inform visitors when a site will be out of maintenance mode.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Is a Countdown Timer Widget?<\/h2>\n\n\n\n<p>A countdown timer widget is an extension that you can add to your WordPress site, in order to build up excitement or urgency around a product or event. You can use a WordPress countdown timer widget to inform or remind customers when to expect something, by displaying a clock that counts down the remaining time left.&nbsp;<\/p>\n\n\n\n<p>Some of the most common scenarios in which a countdown timer is used include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Letting visitors know that a WordPress site is undergoing maintenance, and when it will be back online<\/li>\n\n\n\n<li>Promoting and building anticipation for an upcoming event such as a product launch, social gathering, or conference<\/li>\n\n\n\n<li>Acknowledging important milestones such as anniversaries<\/li>\n\n\n\n<li>Generating excitement for a special sales event, promotion, or a <a href=\"https:\/\/wpengine.com\/resources\/coming-soon-page-wordpress\/\">Coming Soon page<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Options for Adding a Countdown Timer to WordPress<\/h2>\n\n\n\n<p>There are multiple options for adding a countdown timer to your WordPress site. While you <em>could<\/em> do so via code, the easiest method is to use a WordPress countdown plugin. Let\u2019s take a look at three recommended countdown timer plugins, and how to get started with them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Option 1: Add a Countdown Timer Using <a href=\"https:\/\/wordpress.org\/plugins\/t-countdown\/\">T(-) Countdown Widget<\/a><\/h3>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/t-countdown\/\">(T-) Countdown Widget<\/a> is one of the most popular WordPress countdown plugins available. It enables you to display a highly-flexible and customizable HTML5 timer via a shortcode, on any page or post of your WordPress site:<\/p>\n\n\n\n<p>To take full advantage of the plugin\u2019s features, however, you do need a bit of HTML and CSS knowledge. Therefore, it may not be the best option for beginners.&nbsp;<\/p>\n\n\n\n<p>After you install and activate the plugin, you can locate it under <em>Settings &gt; T(-) Countdown<\/em>:<\/p>\n\n\n\n<p>On this screen, you can choose whether to count down seconds, weeks, months, or years. You can also customize the labels that will be displayed, and add your own CSS.<\/p>\n\n\n\n<p>When you download and activate the plugin, a <em>T(-) Countdown<\/em> block will be added to your WordPress editor. To use it, navigate to the page or post you want to add your countdown timer to. Click on the plus icon, and then search the blocks for the<em> T(-) Countdown<\/em> option:<\/p>\n\n\n\n<p>This block will add a standard countdown timer to the page or post. You can customize and configure it in the panel to the right:<\/p>\n\n\n\n<p>You can choose a launch time and date, and select one of 13 styles for how the timer will appear. There are also sections for you to tweak the same settings (including labels and custom CSS) that are also found on the <em>T(-) Countdown<\/em> settings page.&nbsp;<\/p>\n\n\n\n<p>If you need it, there is free support available for this plugin, as well as a <a href=\"https:\/\/plugins.twinpictures.de\/plugins\/t-minus-countdown\/documentation\/#shortcode\">full list of shortcode options<\/a> you can use. It\u2019s also worth noting that this is the actively-developed version of the older <a href=\"https:\/\/wordpress.org\/plugins\/jquery-t-countdown-widget\/\">jQuery T(-) Countdown Widget<\/a> plugin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Option 2: Add a Countdown Timer Using <a href=\"https:\/\/wordpress.org\/plugins\/countdown-timer-ultimate\/\">Countdown Timer Ultimate<\/a><\/h3>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/countdown-timer-ultimate\/\">Countdown Timer Ultimate<\/a> uses a shortcode to display countdown timers on your WordPress site. It works well with the Gutenberg editor, is fully responsive, and lets you create unlimited countdowns:<\/p>\n\n\n\n<p>After you install and activate the plugin, it will present you with a welcome message. Select either <em>Skip <\/em>or <em>Allow &amp; Continue<\/em>:<\/p>\n\n\n\n<p>Next, navigate to <em>Countdown Timer &gt; Add Timer<\/em>:<\/p>\n\n\n\n<p>On this screen, you can name your countdown timer and customize its display. After you choose an expiration date, you can pick between two animation styles: <em>Smooth <\/em>or <em>Ticks<\/em>.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Next, select your circle width and colors. Anything you don\u2019t define will be set to the default style. When you\u2019re finished, click on <em>Publish<\/em>.&nbsp;<\/p>\n\n\n\n<p>You can then add your countdown timer widget to any WordPress post or page. To do so, copy the countdown timer shortcode (located under the <em>Shortcode<\/em> column on the <em>WP Countdown TImer<\/em> page):<\/p>\n\n\n\n<p>Then navigate to the page or post where you want to add the timer. Click on the plus icon in the block editor, and select the <em>Shortcode<\/em> widget:<\/p>\n\n\n\n<p>Paste the shortcode into the text field, and then preview the page to make sure you\u2019re happy with how it looks. If you\u2019re satisfied, hit <em>Publish<\/em>.<\/p>\n\n\n\n<p>If you want to add the countdown widget to a sidebar on your site instead, you can do that by going to <em>Appearance &gt; Widgets<\/em>, and adding the <em>Text <\/em>widget to your sidebar. Under the widget\u2019s settings, simply paste in the countdown timer shortcode:<\/p>\n\n\n\n<p>As we mentioned earlier, you can download and use the free version of this plugin to create unlimited timers. You can also upgrade to the premium version, in order to unlock access to additional designs and advanced features. If you want to test the plugin out first, you can also <a href=\"https:\/\/demo.essentialplugin.com\/countdown-timer-ultimate-demo\/\">sign up for a free demo<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Option 3: Add a Counter Timer Using <a href=\"https:\/\/wordpress.org\/plugins\/powr-pack\/\">POWr<\/a><\/h3>\n\n\n\n<p>Last but not least, <a href=\"https:\/\/wordpress.org\/plugins\/powr-pack\/\">POWr<\/a> is a cloud-based countdown timer plugin. Therefore, in order to use it, you\u2019ll first need to sign up for a free account.&nbsp;<\/p>\n\n\n\n<p>One of the benefits of POWr is that it is fully responsive and customizable. However, it is unique in that, in addition to creating regular countdown timers, you can also use it to track events over time.<\/p>\n\n\n\n<p>To get started, first download and activate the POWr WordPress countdown plugin on your site. It comes as a package with various other features, which can be used for creating forms and social feeds:<\/p>\n\n\n\n<p>Next, visit the <a href=\"https:\/\/www.powr.io\/\">POWr website<\/a> and click on the <em>Get Started<\/em> button to sign up for a free account. After you create your account, you\u2019ll be brought to the <em>My Plugins<\/em> page. This is where you can \u2018create your own plugin\u2019, by selecting <em>Countdown Timer<\/em> in the left-hand navigation menu:<\/p>\n\n\n\n<p>Next, you\u2019ll be brought to the screen where you can create and customize a countdown timer widget for your WordPress site:<\/p>\n\n\n\n<p>You have a variety of options for the type of countdown you want to use. Also, under the <em>Content <\/em>and <em>Design <\/em>tabs you can set a target date, customize the timer&#8217;s labels, create custom messages, and add animations.<\/p>\n\n\n\n<p>Once you\u2019re satisfied with your countdown timer, click on the <em>Add to Site<\/em> button at the bottom of the screen:<\/p>\n\n\n\n<p>You\u2019ll then be presented with a number of options for adding it to your site. For example, you can click on the WordPress icon to produce a shortcode for the countdown timer:<\/p>\n\n\n\n<p>You can then copy this shortcode and paste it into the <em>Shortcode<\/em> block in the WordPress editor (as seen in the previous section). You can also choose the <em>Embed Code<\/em> option to copy and paste the code into any HTML element on your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Find More Helpful Resources from WP Engine<\/h2>\n\n\n\n<p>Adding a countdown timer to your website is a great way to drum up excitement and get visitors motivated. Of course, whatever features you\u2019re looking to add to your site, we\u2019re here to help.<\/p>\n\n\n\n<p>WP Engine offers the best resources for <a href=\"https:\/\/developer.wordpress.org\/\">users and developers<\/a>, providing you with the information and tools needed to deliver an incredible digital experience. Get started with <a href=\"https:\/\/wpengine.com\/plans\/\">the best WordPress hosting<\/a> today!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you\u2019re creating your WordPress site, you may need to incorporate tools, designs, and features that help you promote events or other time-sensitive offerings. Using a countdown timer widget or plugin can make achieving that a lot easier. With a WordPress countdown timer widget, you can make it simpler for site owners and visitors to<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":177,"featured_media":0,"template":"","resource-topic":[904],"resource-role":[895,896,906,897,899],"resource-type":[916],"class_list":["post-100823","resource","type-resource","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Add a Countdown Timer Widget in Wordpress | WP Engine\u00ae<\/title>\n<meta name=\"description\" content=\"Add a countdown timer widget to your WordPress in a few simple steps with a WP plugin. Learn how to code a custom WordPress countdown timer with WP Engine.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add a Countdown Timer Widget in Wordpress | WP Engine\u00ae\" \/>\n<meta property=\"og:description\" content=\"Add a countdown timer widget to your WordPress in a few simple steps with a WP plugin. Learn how to code a custom WordPress countdown timer with WP Engine.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/resources\/add-countdown-timer-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-01T12:12:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/WPE-IMG-Thumbnail-1200x630-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-countdown-timer-wordpress\/\",\"url\":\"https:\/\/wpengine.com\/resources\/add-countdown-timer-wordpress\/\",\"name\":\"Add a Countdown Timer Widget in Wordpress | WP Engine\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2020-03-23T20:26:03+00:00\",\"dateModified\":\"2024-01-01T12:12:10+00:00\",\"description\":\"Add a countdown timer widget to your WordPress in a few simple steps with a WP plugin. Learn how to code a custom WordPress countdown timer with WP Engine.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/resources\/add-countdown-timer-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/resources\/add-countdown-timer-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/resources\/add-countdown-timer-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add a Countdown Timer in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/aba73ed4c15eda43b5fd78844ec31fad\",\"name\":\"Samantha Rodriguez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/933722cf8761e0c08fbced6085998032df460c5ecfa2481d9cd16f569f3da2c1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/933722cf8761e0c08fbced6085998032df460c5ecfa2481d9cd16f569f3da2c1?s=96&d=mm&r=g\",\"caption\":\"Samantha Rodriguez\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add a Countdown Timer Widget in Wordpress | WP Engine\u00ae","description":"Add a countdown timer widget to your WordPress in a few simple steps with a WP plugin. Learn how to code a custom WordPress countdown timer with WP Engine.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Add a Countdown Timer Widget in Wordpress | WP Engine\u00ae","og_description":"Add a countdown timer widget to your WordPress in a few simple steps with a WP plugin. Learn how to code a custom WordPress countdown timer with WP Engine.","og_url":"https:\/\/wpengine.com\/resources\/add-countdown-timer-wordpress\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-01-01T12:12:10+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/WPE-IMG-Thumbnail-1200x630-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-countdown-timer-wordpress\/","url":"https:\/\/wpengine.com\/resources\/add-countdown-timer-wordpress\/","name":"Add a Countdown Timer Widget in Wordpress | WP Engine\u00ae","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2020-03-23T20:26:03+00:00","dateModified":"2024-01-01T12:12:10+00:00","description":"Add a countdown timer widget to your WordPress in a few simple steps with a WP plugin. Learn how to code a custom WordPress countdown timer with WP Engine.","breadcrumb":{"@id":"https:\/\/wpengine.com\/resources\/add-countdown-timer-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/resources\/add-countdown-timer-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/resources\/add-countdown-timer-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Add a Countdown Timer in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/aba73ed4c15eda43b5fd78844ec31fad","name":"Samantha Rodriguez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/933722cf8761e0c08fbced6085998032df460c5ecfa2481d9cd16f569f3da2c1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/933722cf8761e0c08fbced6085998032df460c5ecfa2481d9cd16f569f3da2c1?s=96&d=mm&r=g","caption":"Samantha Rodriguez"}}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/03\/shutterstock_1298952580.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Agency, Developer, Entrepreneur, Freelancer, Site Owner","topic":"<strong>Topics:<\/strong> Marketing","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/100823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/177"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=100823"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=100823"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=100823"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=100823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}