Pulling data from custom plugin settings using PHP shortcode and Javascript

enter image description here

I’m building a custom plugin that’s just a basic event countdown timer. You can input a date and time to countdown to, then paste the shortcode into a page in your website to display how many days, hours, minutes, and seconds until the event. I’m using PHP to generate the form and JavaScript to pull the data from the form to render it to the page. I set up a “preview” section in the settings to make sure the countdown is correct, data persists, etc. It works great (see screenshot #1)!

However, when I use my shortcode [mbc_countdown_clock] on an external page, it doesn’t pull the event date data into the divs that the shortcode generates. I have made sure the shortcode is generating the HTML properly as well by adding text in the divs and it is visible. When I check the console on the page the shortcode is running on, I see this:

In the 2nd red box, the numbers on the left count up in one-second intervals, so something is working, but I can’t figure out why it can’t display the property(s) of ‘value’ on the non-settings page. I have my one PHP file for my plugin and two Js files: one for the countdown clock, the other for the date picker on my settings page (I’m not including that one in this post right now).

I’ve tried looking it up, but I can’t find a good resource that has helped so far. Any thoughts?

PHP code:

register_activation_hook( __FILE__, 'mbc-countdown-clock' );
register_deactivation_hook( __FILE__, 'mbc-countdown-clock' );

wp_enqueue_script('moment_js', plugin_dir_url( __FILE__ ) .'/moment.js', array(), null, true);
wp_enqueue_script('cdc-picker', plugin_dir_url( __FILE__ ) .'/mbc_datepicker.js', array(), null, true);
wp_enqueue_script('cdc-settings', plugin_dir_url( __FILE__ ) .'/mbc_cdc_settings.js', array(), null, true);

wp_enqueue_style('cdc-css', plugin_dir_url( __FILE__ )  .'/mbc_datepicker.css', false, 1.1,  'all');


function addMenu(){
add_menu_page('Countdown Clock', 'Countdown Clock', 4, 'countdown-clock', 
'countdownMenu');
}
add_action('admin_menu', 'addMenu');


if (is_admin ()) {
add_action('adminMenu', 'add_myMenu');
add_action('admin_init', 'register_mySettings');
}

function register_mySettings(){
add_option('mbccdc_datepicker', 'Date Picker');
add_option('mbccdc_timepicker', 'Time  Picker');
register_setting('mbccdc', 'cdc_datepicker');
register_setting('mbccdc', 'cdc_timepicker');
}

function countdownMenu(){
?>
<div id="mbc-countdown-dash">
    <div class="mbc-cdc-header">
        <h1>Timer Settings</h1>
    </div>

    <div class="mbc-cdc-display">
        <form method="post" action="options.php">
        <?php settings_fields('mbccdc');
              do_settings_sections('mbccdc');?>

            <p>Countdown To Date:<input type="text" name="cdc_datepicker" 
class="datepicker" id="mbc-cdc-date" value="<?php echo esc_attr( get_option( 
'cdc_datepicker' ) ); ?>"></p>

            <p>Countdown To Time:<input type="time" step="1" 
name="cdc_timepicker" id="mbc-cdc-timepicker" value="<?php echo esc_attr( 
get_option( 'cdc_timepicker' ) ); ?>"></p>

           <input type="submit" value="Save Changes" id="mbccdc-submit" />

        </form>

        <div class="mbc-cdc-clock-preview">
            <div><span id="mbc-cdc-preview-days">  </span></div>
            <div><span id="mbc-cdc-preview-hours">  </span></div>
            <div><span id="mbc-cdc-preview-minutes">  </span></div>
            <div><span id="mbc-cdc-preview-seconds">  </span></div>
        </div>
    </div>

    </div>

<?php
}
function mbc_cdc_shortcode() {
    ?>
    <div class="mbc-cdc-clock-onpage">
        <div><span id="mbc-cdc-onpage-days">  H</span></div>
        <div><span id="mbc-cdc-onpage-hours">  E</span></div>
        <div><span id="mbc-cdc-onpage-minutes">  LL</span></div>
        <div><span id="mbc-cdc-onpage-seconds">  O</span></div>
    </div>
    </div>

    <?php
}

add_shortcode( 'mbc_countdown_clock', 'mbc_cdc_shortcode');

JS mbc_cdc_settings file:

console.log('mbc_cdc_settings.js is working!');


function mbcTimer(){


    //EVENT DATE AND TIME
    const eventDate = document.getElementById('mbc-cdc-date').value;
    const eventTime = document.getElementById('mbc-cdc-timepicker').value;
    const concatEvent = new Date (eventDate + ' ' + eventTime).getTime();
    const today = new Date().getTime();

    const distance = concatEvent - today;

    const days = Math.floor (distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor ((distance % (1000 * 60 * 60 *24)) / (1000 * 60 * 60));
    const minutes = Math.floor ((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor ((distance % (1000 * 60)) / 1000);

//PREVIEW
    document.getElementById('mbc-cdc-preview-days').innerHTML = "<h3> Days: </h3>" + "<p>" + days + "</p>";
    document.getElementById('mbc-cdc-preview-hours').innerHTML = "<h3> Hours: </h3>" + "<p>" + hours + "</p>";
    document.getElementById('mbc-cdc-preview-minutes').innerHTML = "<h3> Minutes: </h3>" + "<p>" + minutes + "</p>";
    document.getElementById('mbc-cdc-preview-seconds').innerHTML = "<h3> Seconds: </h3>" + "<p>" + seconds + "</p>";

//PAGE RENDER
    document.getElementById('mbc-cdc-onpage-days').innerHTML = "<h3> Days: </h3>" + "<p>" + days + "</p>";
    document.getElementById('mbc-cdc-onpage-hours').innerHTML = "<h3> Hours: </h3>" + "<p>" + hours + "</p>";
    document.getElementById('mbc-cdc-onpage-minutes').innerHTML = "<h3> Minutes: </h3>" + "<p>" + minutes + "</p>";
    document.getElementById('mbc-cdc-onpage-seconds').innerHTML = "<h3> Seconds: </h3>" + "<p>" + seconds + "</p>";

    if (distance < 0){
    clearInterval(x);
    document.getElementById('mbc-cdc-preview-days').innerHTML = '0';
    document.getElementById('mbc-cdc-preview-hours').innerHTML = '0';
    document.getElementById('mbc-cdc-preview-minutes').innerHTML = '0';
    document.getElementById('mbc-cdc-preview-seconds').innerHTML = '0';
    document.getElementById('mbc-cdc-onpage-days').innerHTML = '0';
    document.getElementById('mbc-cdc-onpage-hours').innerHTML = '0';
    document.getElementById('mbc-cdc-onpage-minutes').innerHTML = '0';
    document.getElementById('mbc-cdc-onpage-seconds').innerHTML = '0';
}


}

timer = setInterval(mbcTimer, 1000);

Thanks in advance!

Read more here:: Pulling data from custom plugin settings using PHP shortcode and Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *