CODEWITHSUNDEEP
phpjquerywordpressgithubplugins
Jake C.
Jake C.

Reputation: 81

Including a github jquery plugin in Wordpress

I am trying to include a plugin from github (https://github.com/rendro/countdown) the right way on my wordpress site. After hours of research in the codex and here on stack I still cannot find a way to make it work.

If I use the default method:

1) Adding these lines to the <head> of my header.php file:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.countdown.js"></script>

2) Initializing the plugin with my desired configuration in between </head> and <body> in my header.php file, in this case: 

<script>

    $(function() {
        var endDate = "November 30, 2015 10:00:00";

            $('.countdown.styled').countdown({
                date: endDate,
                render: function(data) {
                $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>");
                }
            });
    });

</script>

3) And then calling the plugin in my html file:

<?php if(is_front_page() ) { ?>

    <div id="cdtoevent" class="countcont">
    <div class="countdown styled"></div>
    </div>

<?php } ?>

It works perfectly !

If, however, I try doing it the right way

(If I understand well, wordpress ships with jQuery by default, by using the default method I'm making the user download jquery twice which augments my loading time as well, right ?)

Which means enqueuing jquery and then my script in my functions.php file like so:

wp_enqueue_script('jquery');

function add_cdtoevent() {
        wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );

And then repeat step 2) and 3) of the default method, it simply does not work ! I tried wrapping my jquery code in step 2) just like this:

jQuery(document).ready(function( $ ) {

    // $ Works! You can test it with next line if you like
    // console.log($);

});

But it still does not work. If anybody could help, it would truly be greatly appreciated !

What I currently have in my header.php:

<?php if(is_front_page() ) { ?>

     <div id="cdtoevent" class="countcont">
     <div class="countdown styled"></div>
     </div>

<?php } ?>

What I currently have in my footer.php:

<script type="text/javascript">

    $(function() {
        var endDate = "November 14, 2015 10:00:00";

            $('.countdown.styled').countdown({
                date: endDate,
                render: function(data) {
                        $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>");
            }
        });
    });

</script>

What I currently have in my functions.php :

// Loads JavaScript file with functionality specific to LCQC.

wp_enqueue_script('jquery');

function add_cdtoevent() {
        wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );

The jquery plugin (.js)

Upvotes: 4

Views: 176

Answers (2)

Jake C.
Jake C.

Reputation: 81

I finally got it to work !

First, I had misplaced this as it was within another function in my functions.php file..

// Loads JavaScript file with functionality specific to LCQC.

wp_enqueue_script('jquery');

function add_cdtoevent() {
        wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );

Afterward, I made sure my script was declared this way (due to the noConflict() variable wordpress uses) right before my closing body tag:

<script type="text/javascript">

jQuery(document).ready(function($) {
    $(function() {
        var endDate = "November 14, 2015 10:00:00";
            $('.countdown.styled').countdown({
                date: endDate,
                render: function(data) {
                        $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>");
            }
        });
    });
});

</script>

And finally, I modified the following lines in jquery.countdown.js:

jQuery.fn.countdown = function(options) {
  return $.each(this, function(i, el) {
    var $el = $(el);
    if (!$el.data(NAME)) {
      // allow setting the date via the data-date attribute
      if ($el.data(DATA_ATTR)) {
        options.date = $el.data(DATA_ATTR);
      }
      $el.data(NAME, new Countdown(el, options));
    }
  });
};

to: 

jQuery(document).ready(function($) {
    jQuery.fn.countdown = function(options) {
      return $.each(this, function(i, el) {
        var $el = $(el);
        if (!$el.data(NAME)) {
          // allow setting the date via the data-date attribute
          if ($el.data(DATA_ATTR)) {
            options.date = $el.data(DATA_ATTR);
          }
          $el.data(NAME, new Countdown(el, options));
        }
      });
    };  
});

Thank you all for your help !

Upvotes: 0

Jeremy
Jeremy

Reputation: 548

It's a good idea to use a function to enqueue your script. However: where do you call this function? You need to call it to enqueue your script. The best way to do this is by attach it to the right action (wp_enqueue_scripts): add_action('wp_enqueue_scripts', 'add_cdtoevent');.

I wrote a guide about including scripts in WordPress if you want more information about this function. It's useful to know how it works, as you can then discover that enqueuing jQuery manually is useless: you indicated that it's a dependency, so WordPress will automatically add it if needed.

Upvotes: 1

Related Questions