I have a wordpress theme and I would like to display a certain promo start time in front page. It uses jquery.countdown.min.js and has following default timer settings

var siteCountDown = function() {

        if ( $('#date-countdown').length > 0 ) {
            $('#date-countdown').countdown('2020/10/10', function(event) {
              var $this = $(this).html(event.strftime(''
                + '<span class="countdown-block"><span class="label">%w</span> weeks </span>'
                + '<span class="countdown-block"><span class="label">%d</span> days </span>'
                + '<span class="countdown-block"><span class="label">%H</span> hr </span>'
                + '<span class="countdown-block"><span class="label">%M</span> min </span>'
                + '<span class="countdown-block"><span class="label">%S</span> sec</span>'));
            });
        }

    };
    siteCountDown();

It displays that promo will start in four months later after now. But I would like to set timer manually via wordpress admin dashboard. Is it possible to insert some php codes in .countdown('2020/10/10' something like

<?php if ($year = get_option('of_year') && $month = get_option('of_month') &&  $day = get_option('of_day') ) { ?>
.countdown('<?php echo $year; ?>/<?php echo $month; ?>/<?php echo $day; ?>
<?php }  ?>

so that I can edit promo start time manually

My options are:

$options[] = array( "name" => "Year",
                    "desc" => "promo start year",
                    "id" => $shortname."_promo_year",
                    "std" => "",
                    "type" => "text"); 

$options[] = array( "name" => "Mount",
                    "desc" => "promo start month",
                    "id" => $shortname."_promo_month",
                    "std" => "",
                    "type" => "text");

$options[] = array( "name" => "Day",
                    "desc" => "promo start day",
                    "id" => $shortname."_promo_day",
                    "std" => "",
                    "type" => "text");

I have a wordpress theme and I would like to display a certain promo start time in front page. It uses jquery.countdown.min.js and has following default timer settings

var siteCountDown = function() {

        if ( $('#date-countdown').length > 0 ) {
            $('#date-countdown').countdown('2020/10/10', function(event) {
              var $this = $(this).html(event.strftime(''
                + '<span class="countdown-block"><span class="label">%w</span> weeks </span>'
                + '<span class="countdown-block"><span class="label">%d</span> days </span>'
                + '<span class="countdown-block"><span class="label">%H</span> hr </span>'
                + '<span class="countdown-block"><span class="label">%M</span> min </span>'
                + '<span class="countdown-block"><span class="label">%S</span> sec</span>'));
            });
        }

    };
    siteCountDown();

It displays that promo will start in four months later after now. But I would like to set timer manually via wordpress admin dashboard. Is it possible to insert some php codes in .countdown('2020/10/10' something like

<?php if ($year = get_option('of_year') && $month = get_option('of_month') &&  $day = get_option('of_day') ) { ?>
.countdown('<?php echo $year; ?>/<?php echo $month; ?>/<?php echo $day; ?>
<?php }  ?>

so that I can edit promo start time manually

My options are:

$options[] = array( "name" => "Year",
                    "desc" => "promo start year",
                    "id" => $shortname."_promo_year",
                    "std" => "",
                    "type" => "text"); 

$options[] = array( "name" => "Mount",
                    "desc" => "promo start month",
                    "id" => $shortname."_promo_month",
                    "std" => "",
                    "type" => "text");

$options[] = array( "name" => "Day",
                    "desc" => "promo start day",
                    "id" => $shortname."_promo_day",
                    "std" => "",
                    "type" => "text");

• php
• functions
• jquery

1 Answer 1

You can achieve this using wp_footer action. Add bellow code to functions.php file. It will load the script at the footer of page.

add_action('wp_footer', 'load_count_down');

function load_count_down(){
    if ($year = get_option('of_year') && $month = get_option('of_month') &&  $day = get_option('of_day') ) {

        $date = $year.'/'.$month.'/'.$day;
        $script = <<<EOF
<script type="text/javascript">

var siteCountDown = function() {
    if ( $('#date-countdown').length > 0 ) {
        $('#date-countdown').countdown('$date', function(event) {
          var \$this = $(this).html(event.strftime(''
            + '<span class="countdown-block"><span class="label">%w</span> weeks </span>'
            + '<span class="countdown-block"><span class="label">%d</span> days </span>'
            + '<span class="countdown-block"><span class="label">%H</span> hr </span>'
            + '<span class="countdown-block"><span class="label">%M</span> min </span>'
            + '<span class="countdown-block"><span class="label">%S</span> sec</span>'));
        });
    }
};
siteCountDown();
</script>
EOF;

    echo $script;
    }
}