Is possible to use the wp_localize_script fom the front-end? I'vecreated a JS countdown timer that will take an input data from a settings page fom backend. The script that will display the countdown is enqueued only on fornt-end and will be visible only if a checkbox is checked. If I use the get_option() function and then pass the result to the wp_localize script, will it work as expected? What's the best way to proceed?
UPDATE:
While I'm debugging the code, I've noticed that the css and the js script I need on fornt-end are not loaded, this because I'm creting a maintenance mode plugin. I need some help to figure out how to make things work, also the emebed version of jquery isn't loaded.
Back-end code
public function init()
{
add_action( 'wp_loaded', array($this, 'maintenance_mode') );
add_action( 'admin_init', array($this, 'maintenance_settings') );
add_action( 'wp_enqueue_scripts', array($this, 'maintenance_scripts') );
}
public function maintenance_scripts()
{
wp_enqueue_style( 'maintenance-css', plugins_url('assets/maintenance.min.css', __FILE__), null );
wp_enqueue_script( 'maintenance-js', plugins_url('assets/maintenance.min.js', __FILE__), array('jquery'), null );
}
// this method is part of a settings field and will render the date input to let the user select the day until the countdown will run. The JS code will check if the related checkbox to activate the timer is checked.
public function maintenance_countdown_timer( $args )
{
$date = get_option('countdown-timer');
wp_localize_script( 'maintenance-js', 'c', array(
'endtime' => $date
)
);
?>
<input type="date" name="countdown-timer" id="countdown-timer" disabled value="<?php echo get_option('countdown-timer'); ?>"/>
<script>
(function($){
$(document).ready(function(){
if( $('#show-countdown').is(':checked') ){
$('#countdown-timer').attr('disabled',false);
}
console.log($('#show-countdown').is(':checked'));
});
}(jQuery));
</script>
<?php
}
Front-end
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="">
<link rel="stylesheet" href=".4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="<?php echo plugins_url('assets/maintenance.min.css', dirname( __FILE__ )); ?>">
<script src=".4.1/jquery.min.js"></script>
<script src="<?php echo plugins_url('assets/maintenance.min.js', dirname(__FILE__)); ?>" type="text/javascript"></script>
<title>Maintenance mode | <?php bloginfo('name'); ?></title>
</head>
<body>
<div class="jumbotron jumbotron-fluid maintenance-screen">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<!-- logo here -->
<?php if( get_option('show-logo') ): ?>
<img class="img-fluid" src="" />
<?php endif; ?>
<!-- countdown here -->
<?php if( get_option('show-countdown') ): ?>
<h1 id="countdown"></h1>
<?php endif; ?>
</div>
</div>
</div>
</div>
</body>
</html>