javascriptwordpress

how to add this jquery script in to wordpress website

i liked this countdown script from http://www.jqueryscript.net/time-clock/Modern-Circular-jQuery-Countdown-Timer-Plugin-Final-Countdown.html and want to use this one to my wordpress website , i read some tutorials about how to put any script in wordpress but i could not understand exactly cause i am newbie , can you help me to do this step by step

now i will show the script author instructions to use this script on normal html page i want to do these steps also but in wordpress .

  1. Include the necessary javascript files at the end of the page.

     <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">     
 </script> 
 <script type="text/javascript" src="js/kinetic.js"></script> 
 <script type="text/javascript" src="../jquery.final-countdown.js"></script>

  2. Include the required bootstrap 3 CSS in the head of the page.

     <link rel="stylesheet"          
  href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

  3. Create a countdown timer using the html structure like this:

     <div class="countdown-container container">
 <div class="clock row">

 <!-- days --> 
 <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
 <div class="wrap">
 <div class="inner">
 <div id="canvas_days" class="clock-canvas"></div>
 <div class="text">
 <p class="val">0</p>
 <p class="type-days type-time">DAYS</p>
 </div>
 </div>
 </div>
 </div>

 <!-- hours --> 

 <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
 <div class="wrap">
 <div class="inner">
 <div id="canvas_hours" class="clock-canvas"></div>
 <div class="text">
 <p class="val">0</p>
 <p class="type-hours type-time">HOURS</p>
 </div>
 </div>
 </div>
 </div>

 <!-- minutes --> 
 <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
 <div class="wrap">
 <div class="inner">
 <div id="canvas_minutes" class="clock-canvas"></div>
 <div class="text">
 <p class="val">0</p>
 <p class="type-minutes type-time">MINUTES</p>
 </div>
 </div>
 </div>
 </div>

 <!-- seconds --> 
 <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
 <div class="wrap">
 <div class="inner">
 <div id="canvas_seconds" class="clock-canvas"></div>
 <div class="text">
 <p class="val">0</p>
 <p class="type-seconds type-time">SECONDS</p>
 </div>
 </div>
 </div>
 </div>
 </div>

 </div>

  4. Add the following CSS snippet to your CSS file.

    html, body {
  height: 100%;
}
html {
  background-image: url('../img/sample.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
body {
  background-color: rgba(44,62,80 , 0.6 );
  background-image: url('../img/pattern.png');
  background-position: center;
  background-repeat: repeat;
  font-family: 'Raleway', 'Arial', sans-serif;
}
.countdown-container {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
}
.clock-item .inner {
  height: 0px;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}
.clock-canvas {
  background-color: rgba(255, 255, 255, .1);
  border-radius: 50%;
  height: 0px;
  padding-bottom: 100%;
}
.text {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  margin-top: -50px;
  position: absolute;
  top: 50%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
  width: 100%;
}
.text .val {
  font-size: 50px;
}
.text .type-time {
  font-size: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .clock-item {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .clock-item {
    margin: 0px 30px 30px 30px;
  }
}

  5. Initialize the countdown timer and set the start time, end time, and current time in JavaScript.

      <script type="text/javascript">
  $('.countdown').final_countdown({
  start: '1362139200',
  end: '1388461320',
  now: '1387461319'
   });
  </script>

  6. All the default options.

     $(document).ready(function() {
 $('.countdown').final_countdown({
 start: '1362139200',
 end: '1388461320',
 now: '1387461319',
 selectors: {
 value_seconds: '.clock-seconds .val',
 canvas_seconds: 'canvas_seconds',
 value_minutes: '.clock-minutes .val',
 canvas_minutes: 'canvas_minutes',
 value_hours: '.clock-hours .val',
 canvas_hours: 'canvas_hours',
 value_days: '.clock-days .val',
 canvas_days: 'canvas_days'
   },
  seconds: {
    borderColor: '#7995D5',
    borderWidth: '6'
  },
   minutes: {
   borderColor: '#ACC742',
   borderWidth: '6'
  },
  hours: {
    borderColor: '#ECEFCB',
    borderWidth: '6'
   },
   days: {
   borderColor: '#FF9900',
   borderWidth: '6'
 }}, function() {
 // Finish callback
 });
 });
Solution

  • To add Javascript and CSS files inside Wordpress, you need to use wp_register_script and wp_register_style functions inside your functions.php theme file.

    So let's translate every step:

    Include the necessary javascript files at the end of the page.

    You don't need to include jquery as it is already included by Wordpress. Download kinetic.js and jquery.final-countdown.js, and add them into your theme folder in a js directory.

    Then in your functions.php add the following:

    add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
    wp_enqueue_script('kinetic', get_stylesheet_directory_uri() . '/js/kinetic.js', array('jquery'), '', true);
    wp_enqueue_script('countdown', get_stylesheet_directory_uri() . '/js/jquery.final-countdown.js', array('jquery'), '', true);
}

    Include the required bootstrap 3 CSS in the head of the page.

    In the same function, add the following line:

    wp_enqueue_style('bootstrap_css', '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

    Create a countdown timer using the html structure like this

    See where you want to include it. If you want this on all the pages inside header, add this inside header.php in your theme folder.

    Add the following CSS snippet to your CSS file.

    Just add the code inside your actual stylesheet.

    Initialize the countdown timer and set the start time, end time and current time in the javascript.

    You could do this in your own js file. Add a countdown.js file in your js folder, and enqueue it like before:

    wp_enqueue_script('countdown_script', get_stylesheet_directory_uri() . '/js/countdown.js', array('jquery'), '', true);

    And in your countdown.js file:

    jQuery(document).ready(function($) {
    $('.countdown').final_countdown({
        start: '1362139200',
        end: '1388461320',
        now: '1387461319'
    });
});

    That way it will prevent any conflict.