I’m hoping someone might be able to assist me. I’m utilizing ACF Pro for creating a Date Time Picker field that is Countdown Timer that count down (days, hours, minutes, second). I’m also using simplyCountdown.js to make the countdown timer but trying to load jquery animate into my function theme_acf.php. Here’s what I got and it works but not countdown the numbers.
(theme_acf.php)______________________________________
/*
* Check if landing-page
* */
add_action('wp_head', 'condition_checker');
function condition_checker (){
//does field exist and true?
if (get_field('enable_splash_page')) {
//if true do this
// get raw date
add_action('wp_print_scripts','landing_page_js');
}
}
//* Check If Landing Page is Working **/
add_action( 'wp_print_scripts', 'landing_page_js' );
function landing_page_js() {
// Geting Raw Date
$date = get_field( 'countdown_timer', false, false);
//Check the Fields are not empty else will not run
if(empty($date) ) {
//Make date object
$date = new DateTime( $date );
echo '
<div class="alert alert-info">
<button type="button" class="close" date-dismiss="alert" aria-hidden="true">&time;</button>
<strong>Time</strong><br>
Year: ' . $date->format( 'Y' ) . '<br>
Month: ' . $date->format( 'm' ) . '<br>
Day: ' . $date->format( 'd' ) . '<br>
</div>
';
}
}
(front-page.php)______________________________________
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="comming-soon-area text-center">
<div class="display-table">
<div class="display-table-cell">
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="coming-text text-center">
<img class="logo" src="<?php bloginfo('template_directory'); ?>/assets/images/PixelCity.png"/>
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
</div>
<div class="countdown">
<?php $date = DateTime::createFromFormat('YJM',
get_field('countdownhttp://localhost/Beta-Sites/wp-admin/users.php_timer'));
$days = ceil((strtotime(the_field('countdown_timer')) - time())/(60*60*24)); ?>
</div>
<div class="social-icon text-center">
<a href=""><i class="fa fa-twitch"></i></a>
<a href="" class="one"><i class="fa fa-twitter"></i></a>
<a href="" class="two"><i class="fa fa-youtube-play"></i>
<a href="" class="three"><i class="fa fa-linkedin"></i>
<a href="" class="four"><i class="fa fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
This Html finish project
https://gyazo.com/c833f813116fddba6efb8af472f6ed2d
Hi @brandonpweb
I think there are some typos there. In the ‘theme_acf.php’, I believe this line of code:
if(empty($date) ) {
Should be like this:
if(!empty($date) ) {
And in the ‘front-page.php’, I believe this line:
get_field('countdownhttp://localhost/Beta-Sites/wp-admin/users.php_timer'));
Should be like this:
get_field('countdown_timer'));
Could you please fix it and see if it fixes the issue?
Thanks 🙂
Hello @James,
I have fix my source code but getting an error that say in browser
Fatal error: Uncaught Error: Call to a member function format() on unknown in /Applications/MAMP/htdocs/Beta-Sites/wp-content/themes/Pixel-City-Coming-Soon-Theme/lib/theme_acf.php:42 Stack trace: #0 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/plugin.php(525): landing_page_js(”) #1 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/script-loader.php(1027): do_action(‘wp_print_script…’) #2 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/plugin.php(525): wp_print_head_scripts(”) #3 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/general-template.php(2528): do_action(‘wp_head’) #4 /Applications/MAMP/htdocs/Beta-Sites/wp-content/themes/Pixel-City-Coming-Soon-Theme/templates/head.php(5): wp_head() #5 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/template.php(574): require(‘/Applications/M…’) #6 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/template.php(531): load_template(‘/Applications/M…’, false) #7 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/general-template.php(167): locate_template(Array, true, fals in /Applications/MAMP/htdocs/Beta-Sites/wp-content/themes/Pixel-City-Coming-Soon-Theme/lib/theme_acf.php on line 42
add_action( 'wp_print_scripts', 'landing_page_js' );
function landing_page_js() {
// Geting Raw Date
$date = get_field('countdown_timer');
//Check the Fields are not empty else will not run
if(!empty($date) ) {
//Make date object
$date = new DateTime( $date );
echo '
<div class="alert alert-info">
<button type="button" class="close" date-dismiss="alert" aria-hidden="true">&time;</button>
<strong>Time</strong><br>
Day: ' . $date->format( 'd' ) . '<br>
Hours: ' . $hour->format( 'h' ) . '<br>
Minutes: ' . $minute->format( 'h' ) . '<br>
Seconds: ' . $second->format( 's' ) . '<br>
</div>
';
}
}
Hi @brandonpweb
Could you please tell me which one is the line 42? Also, could you please share the code you used to include the “theme_acf.php” file?
Thanks 🙂
HI @James,
Thank you for help me so line 42 is Hours: ‘ . $hour->format( ‘h’ ) . ‘<br> him still learn about PHP Development.
Hi @brandonpweb
Could you please try this code instead:
$now = new DateTime();
$date = get_field('date_time_picker', 85);
$date = new DateTime( $date );
$interval = $now->diff($date);
echo '
<div class="alert alert-info">
<button type="button" class="close" date-dismiss="alert" aria-hidden="true">&time;</button>
<strong>Time</strong><br>
Day: ' . $interval->format( '%d' ) . '<br>
Hours: ' . $interval->format( '%h' ) . '<br>
Minutes: ' . $interval->format( '%i' ) . '<br>
Seconds: ' . $interval->format( '%s' ) . '<br>
</div>
';
This page should give you more idea about it: http://stackoverflow.com/questions/14675739/php-datetime-countdown.
I hope this helps 🙂
Thank you @James, but I have find out the idea by myself but its similar to yours.
Thank for all the help (:
Hello,
i am new bee, so i could not understand where i will find the “theme_acf.php” file. would you pls help me to use the countdown timer in ACF plugins.
Thanks
Md. Elias
Hi @elias1435
The “theme_acf.php” is a theme used by @brandonpweb to show the countdown; which utilizes simplyCountdown.js. You can check how to use ACF with the script from the code on this page, but to create the theme and implement the script, I’m afraid you need to get in touch with the script author or the community.
I hope this makes sense 🙂
