{"id":4290,"date":"2020-03-24T21:51:42","date_gmt":"2020-03-24T10:51:42","guid":{"rendered":"https:\/\/wpdevdesign.wpengine.com\/?p=4290"},"modified":"2021-11-28T13:01:25","modified_gmt":"2021-11-28T02:01:25","slug":"countdown-timer-using-acf-in-oxygen","status":"publish","type":"post","link":"https:\/\/wpdevdesign.com\/countdown-timer-using-acf-in-oxygen\/","title":{"rendered":"Countdown Timer using ACF in Oxygen"},"content":{"rendered":"<div class=\"mp_wrapper\">\n  <div class=\"mepr-unauthorized-excerpt\">\n    <p>This <a aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\" href=\"https:\/\/wpdevdesign.com\/membership\/\" target=\"_blank\">members-only<\/a> tutorial provides the steps to set up a <a aria-label=\"countdown timer in Oxygen (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\" href=\"https:\/\/wpdevdesign.com\/javascript-countdown-timer-in-oxygen\/\" target=\"_blank\">countdown timer in Oxygen<\/a> with the value coming from a Date Time Picker type of custom field on an Options page instead of hardcoding the value (like \"Nov 23, 2028 00:00:00\").<\/p>\n<figure class=\"wp-block-image size-large is-resized\"><img src=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-24-at-9.01.33-pm.png\" alt=\"\" class=\"wp-image-4291\" width=\"322\" height=\"216\" \/><figcaption>ACF Options page<\/figcaption><\/figure>\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img src=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-24-at-9.02.48-pm.png\" alt=\"\" class=\"wp-image-4292\" \/><figcaption>Countdown timer on the front end<\/figcaption><\/figure>\n<\/div>\n<p>Update: Changes for a calendar-styled countdown are provided at the end.<\/p>\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\">\n<div class=\"wp-block-embed__wrapper\">\n<span class=\"xPgt5dyu7oE0NrAfM89NrnQtIHazxHXpCRmQfqWY0W28JsqgXLbZiZKeGApmohy3DTkdb6F\"><iframe title=\"Countdown Date Calendar Styling\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/iaiM3tfYTOo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/span>\n<\/div>\n<\/figure>\n<h2>Step 1<\/h2>\n<p>Install and activate <a aria-label=\"ACF Pro (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\" href=\"https:\/\/www.advancedcustomfields.com\/pro\/\" target=\"_blank\">ACF Pro<\/a> and <a aria-label=\"Code Snippets (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\" href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/\" target=\"_blank\">Code Snippets<\/a> plugins.<\/p>\n<h2 class=\"wp-block-heading\">Step 2<\/h2>\n<p>Let us enable an ACF Options page.<\/p>\n<p>Go to Snippets &gt; Add New.<\/p>\n<p>Title:&nbsp;<strong>Enable ACF Options Page<\/strong><\/p>\n<p>Code:<\/p>\n<code>if ( function_exists( 'acf_add_options_page' ) ) {\n    acf_add_options_page();\n}<\/code>\n<p>Set the snippet to run only in the admin area.<\/p>\n<h2 class=\"wp-block-heading\">Step 3<\/h2>\n<p>Go to Custom Fields &gt; Add New.<\/p>\n<p>Create a field group titled say, \"Sitewide\" having a Date Time Picker-type of custom field with the name of&nbsp;<code>countdown_date<\/code>. Set it to appear on the Options Page.<\/p>\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2020\/03\/countdown-date-acf-field-group.png\"><img src=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2020\/03\/countdown-date-acf-field-group-808x1024.png\" alt=\"\" class=\"wp-image-4293\" \/><\/a><\/figure>\n<p>Set Display Format and Return Format to <code>F j, Y H:i:s<\/code>.<\/p>\n<h2 class=\"wp-block-heading\">Step 4<\/h2>\n<p>Click Options in the WP admin and pick your desired countdown date.<\/p>\n<h2 class=\"wp-block-heading\">Step 5<\/h2>\n<p>Install and activate <a href=\"https:\/\/wpdevdesign.com\/a-basic-wordpress-custom-functionality-plugin\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">My Custom Functionality<\/a> plugin.<\/p>\n<p>Connect to your hosting account using a FTP client and navigate to site's <code>\/wp-content\/plugins\/my-custom-functionality-master<\/code>.<\/p>\n<p>Create a file named say, <code>countdown-date.js<\/code> in the plugin's <code>assets\/js<\/code> directory having the following code:<\/p>\n  <\/div>\n  <div class=\"mepr-unauthorized-message\">\n    <p>This is a premium members-only content.<\/p>\n<p>To view the rest of the content, please <a title=\"Membership\" href=\"https:\/\/wpdevdesign.com\/membership\/\">sign up for membership ($47\/month or $599 one-time)<\/a>.<\/p>\n<p>Already a member? Log in below or <a href=\"https:\/\/wpdevdesign.com\/login\/\">here<\/a>.<\/p>\n  <\/div>\n  <div class=\"mepr-login-form-wrap\">\n            \n<div class=\"mp_wrapper mp_login_form\">\n                  <!-- mp-login-form-start -->     <form name=\"mepr_loginform\" id=\"mepr_loginform\" class=\"mepr-form\" action=\"https:\/\/wpdevdesign.com\/login\/\" method=\"post\">\n            <div class=\"mp-form-row mepr_username\">\n        <div class=\"mp-form-label\">\n                              <label for=\"user_login\">Username<\/label>\n        <\/div>\n        <input type=\"text\" name=\"log\" id=\"user_login\" value=\"\" \/>\n      <\/div>\n      <div class=\"mp-form-row mepr_password\">\n        <div class=\"mp-form-label\">\n          <label for=\"user_pass\">Password<\/label>\n          <div class=\"mp-hide-pw\">\n            <input type=\"password\" name=\"pwd\" id=\"user_pass\" value=\"\" \/>\n            <button type=\"button\" class=\"button mp-hide-pw hide-if-no-js\" data-toggle=\"0\" aria-label=\"Show password\">\n              <span class=\"dashicons dashicons-visibility\" aria-hidden=\"true\"><\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n            <div>\n        <label><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/> Remember Me<\/label>\n      <\/div>\n      <div class=\"mp-spacer\">&nbsp;<\/div>\n      <div class=\"submit\">\n        <input type=\"submit\" name=\"wp-submit\" id=\"wp-submit\" class=\"button-primary mepr-share-button \" value=\"Log In\" \/>\n        <input type=\"hidden\" name=\"redirect_to\" value=\"\/wp-json\/wp\/v2\/posts\/4290\" \/>\n        <input type=\"hidden\" name=\"mepr_process_login_form\" value=\"true\" \/>\n        <input type=\"hidden\" name=\"mepr_is_login_page\" value=\"false\" \/>\n      <\/div>\n    <\/form>\n    <div class=\"mp-spacer\">&nbsp;<\/div>\n    <div class=\"mepr-login-actions\">\n        <a\n          href=\"https:\/\/wpdevdesign.com\/login\/?action=forgot_password\"\n          title=\"Click here to reset your password\"\n        >\n          Forgot Password        <\/a>\n    <\/div>\n\n      \n    <!-- mp-login-form-end --> \n  <\/div>\n      <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This members-only tutorial provides the steps to set up a countdown timer in Oxygen with the value coming from a Date Time Picker type of custom field on an Options page instead of hardcoding the value (like &#8220;Nov 23, 2028 00:00:00&#8221;). ACF Options page Countdown timer on the front end Update: Changes for a calendar-styled &hellip;<\/p>\n","protected":false},"author":1,"featured_media":4291,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"footnotes":""},"categories":[64,2,52],"tags":[53,314,125,183,311],"class_list":["post-4290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oxygen","category-plugins","category-premium","tag-acf-pro","tag-countdown","tag-javascript","tag-options","tag-wp_localize_script"],"acf":[],"featured_image_src":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-24-at-9.01.33-pm.png","featured_image_src_square":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-24-at-9.01.33-pm.png","author_info":{"display_name":"Sridhar Katakam","author_link":"https:\/\/wpdevdesign.com\/author\/srikat\/"},"_links":{"self":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/4290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/comments?post=4290"}],"version-history":[{"count":0,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/4290\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media\/4291"}],"wp:attachment":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media?parent=4290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/categories?post=4290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/tags?post=4290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}