0

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="http://gmpg.org/xfn/11">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.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="https://ajax.googleapis.com/ajax/libs/jquery/3.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>

  • Yes it will, and it’s the most straightforward solution. Have you tried it? – Jacob Peattie Jan 14 at 14:40
  • @JacobPeattie I'm testing the code, I'm updating the question. The problem is that the scripts that contain the front-end is not loaded because i'm creating a plugin that is used for maintenance mode. I'm using the plugins_url('file/path',dirname(__FILE__)) to pass the css and the js to the file that is served to the front-end. I need some help to figure out how to register the scripts. – sialfa Jan 14 at 15:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.